#20 Sassの概要を把握した

Bootstrapをカスタマイズしていくにあたり、Sassを用いると簡単にできるため、今回はSassの概要を把握しました。

Sassとは

Sass（サス）とは、Syntactically Awesome Stylesheets（構文的にイケてるスタイルシート）の略。

CSSをより便利に効率的にかけるようにした言語のこと。

背景

• CSSだと複雑なことができない。

　↓

• コードの再利用、変数、条件分岐、演算などをできるSassが生まれた。

メリット

• 簡略に記述できる。
• 変数で同じ値を使い回せる
• 四則演算ができる
• コードの再利用ができる 等

Sassの基本的な使い方

拡張子scssファイルを作成 → CSSにコンパイル → HTMLでCSSを読み込む

• 拡張子にはsassとscssがあるが、後に誕生したscssの方がCSSとの互換性が高く普及している。
• scssファイルを直接HTMLに読み込むことはできないため、一度CSSにコンパイルする必要がある。

Sassの特徴

①ネスト

CSSセレクタを入れ子（ネスト）にして書ける。

HTMLの入れ子構造と同じように書けるので構造が把握しやすくなる。

CSSの書き方

nav ul {
  margin: 0;
  padding: 0;
}
nav li {
  display: inline-block;
}

Sassの書き方

nav {
  ul {
    margin: 0;
    padding: 0;
  }

  li { display: inline-block; }
}

②変数

値を変数に格納し、変数名を参照することで値を使い回せる。

修正が一箇所で済み、似たような違う色が増えることを防ぐこともできる。

CSSの書き方

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

main {
  color: #333;
}

Sassの書き方

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

main {
  color: $primary-color;
}

③親セレクタの参照

&を書くことで親セレクタを参照できる。

&を使うことで親を一から指定し直す必要がなくなり、スッキリ書ける。

SCCの書き方

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline dotted;
}

Sassの書き方

a {
  text-decoration: none;
  $:hover {
  text-decoration: underline dotted;
  }
}

④@import

ファイルを分割して読み込むことができる。

これは、CSSと同様。

CSSの@importとSassの@importは基本的には同じ構文で使える。

参考URL

Sassの公式ドキュメント sass-lang.com