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;
    }
  }
}

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