cssを効率的にかける言語、「Sass」について説明します！

Sassとは

CSSを拡張した言語です。より効率的に書けます！
記述を簡略化できる他にも、プログラムのような処理ができたり、同じ値を使い回すことができます。
※今回は.scss記法で説明していきます。

ネスト化

cssはセレクタを何回も書く必要がありましたが、Sassはネストさせることで、
同じ親のセレクタでまとめられちゃいます。

プログラム処理

変数や条件分岐も使えます！

$section-color: rgb(30,30,30);
section {
  background-color: $section-color;
}

複数のファイルをまとめられます

バーシャルを使うと、複数のcssファイルを一つにまとめることができます。

バーシャルとは、分割したSassファイルのことです。
バーシャルを作成するときは、ファイル名の最初に”アンダーバー_”をつけます。

例：_item.scssと_reset.scssファイルを読み込みます。

application.scss

@import "item";  /* _item.scssを読み込む */
@import "reset"; /* _reset.scssを読み込む */

同じ値を使いまわすこともできます

変数を使用して同じ値を使いまわすことができます。
以下のように定義します！
$変数名: 値;

_common.scss

$mainBlackColor: #000000; 

と定義したとします。
_common.scssファイルを読み込むことで、
他のscssファイルでも
「$mainBlackColor」と指定して使うことができます。

mixin

mixinとは、まとまったスタイルを定義することができます。
これを使うと、何度も同じスタイルを定義しなくて良くなります！

mixinを定義するには、
@mixin mixin名() {}
と記述します。

@mixin clearfix() {
  &:after {
    content: '';
    display: block;
    clear: both;
  }
}

以上です。