Sass

Sass学習メモ

本日からSassを学びますので、メモ

Sassとは

CSSをより効率的に書くことができる言語

  • 主な記法
    • SASS記法(拡張子 => .sass)
    • SCSS記法(拡張子 => .scss)

Sassを使用するメリット

  • コードの記述量を減らすことができる
  • コードを再利用できる

使用例

■CSSで入れ子の記述

stylesheet.css
.header {
  height: 60%;
}

.header ul {
  font-size: 15px;
}

.header ul li {
  font-size: 10px;
}

■SCSSで入れ子の記述

stylesheet.scss
.header {
  height: 60%;
  ul {
    font-size: 15px;
    li {
      font-size: 10px;
    }
  }
}

若干ネストしますが、便利っちゃ便利ですね。