SassとSCSSの文法おさらい

調べてみるといろいろ出てきたので、ひとまず使いそうなところだけ。

はじめに。

SCSSとSassの違いは{}かインデントか、行末にセミコロンを打つか否かです、たしか。
セレクタの子要素を表すとき、SCSSは{}で囲うことで、Sassはインデントすることで表します。Sassは行末にセミコロンを打つとコンパイルエラーになります。以降SCSSしか乗せませんので、適宜読み替えてください。

SCSS/Sassのいいところ

では順に見ていきましょう。

ネストできる

SCSSを使うのであればCSSのそれとあんまり変わりありません。SCSSのいいところはネストができるところ。つまり、articleタグに設定するスタイルとその下にあるpタグに設定するスタイルを、

article {
  color: gray;
  p {
    color: green;
  }
}

といった感じに書くことができます。a:hoverとかli:beforeといった擬似要素は

a {
  text-decolation: none;
  color: black;
  &:hover {
    color: white;
    background-color: black;
  }
}

という風にしてネストすることができます。

変数を使える

これはすごく便利です。

$default-margin: 5px 0;
$base-color: #ff9900;

といった風に変数を使えます。使いたいときは
body {
table {
th {
background-color: $base-color;
color: white;
}
td {
border-bottom: 1px solid $base-color;
}
}
}
といった感じで使えます。

ミックスインできる

複数の設定を使いまわすことができます。ベンダープレフィックスの指定が必要なやつをまとめて指定するときなんかに使えます。

@mixin translate-right {
  -webkit-transform: translate(10px 0);
  -moz-transform: translate(10px 0);
  -ms-transform: translate(10px 0);
  -o-transform: translate(10px 0);
  transform: translate(10px 0);
}
@mixin borderline($color) {
  border: 1px solid $;
}
div.test {
  @include translate-right;
  @include borderline(#ff9900);
}

計算できる

色や数値の四則演算ができます。今のところ使うあてがありませんが、お世話になる日が来るかもしれません。

他にも組み込みの関数があったりするそうですが、まだ使ってないのでなんとも…こちらもおいおい調べておきたいところ…(多分調べない)