SCSSでコメントアウトをする方法と、便利な変数について学んでいきましょう。変数というと難しそうに聞こえるかもしれませんが、すごく簡単なので大丈夫だと思います。

コメントアウト

/* 複
   数
   行 */

// 1行コメント

CSSと同じ /* */ で囲む方法に加え、SCSSでは // から始まる 1行コメント にも対応しています。それぞれの違いはコンパイルしてみると分かります。

@charset "UTF-8";
/* 複
   数
   行 */

コンパイルしてみると、 1行コメントは消えている ことが分かります。なので、コンパイル後も残したいコメントであれば従来通り /* */ を使いましょう。

node-sass sample.scss sample.css --output-style=compressed

1つ注意が必要で、 --output-style=compressed をつけてコンパイルした際は どちらのコメントも消えて しまいます。

/*! 複
    数
    行 */

なので、この場合コメントを残したいときは /*! */ で囲みましょう。すると、コンパイルされてもコメントは残ったままになります。

変数

変数とは簡単に言えば、 何度も使いまわせるようにするために定義しておく入れ物 のようなものです。

$num: 5em;

.main {
  width: $num;
}
.sidebar {
  margin-top: $num;
}

.main {
  width: 5em;
}
.sidebar {
  margin-top: 5em;
}

SCSSでは変数を $変数名: 値; のように定義します。一度定義しておけば、このように .main でも .box でもどこでも使い回すことができるようになります。

変数のネスト

前回、ネストについて学びましたが変数も ネスト することができます。

.main {
  $num: 5em;
  
  width: $num;
}
.sidebar {
  margin-top: $num;  // $numってなに？
}

先ほどのプログラムを少し変えて、 .main 内に変数を定義してみましょう。コンパイルしてみると、 エラー が発生すると思います。これは $num を .main の { } 内で定義しているため、 .sidebar 内では使うことができないからです。これを スコープ といいます。

$num: 5em;

.main {
  width: $num;
}
.sidebar {
  margin-top: $num;
}

なので、どちらでも使いたい場合は 一番上の階層 に変数を定義しましょう。一方で スコープ を使うことによるメリットもあります。

.main {
  $color: #b17171;

  color: $color;
  border: 1px solid $color;
}
.sidebar {
  $color: #2a4b7e;

  color: $color;
  border: 1px solid $color;
}

.main {
  color: #b17171;
  border: 1px solid #b17171;
}
.sidebar {
  color: #2a4b7e;
  border: 1px solid #2a4b7e;
}

それぞれが 別のスコープ内 にあるため、同じ $color という変数名でも名前の衝突が起きません。

変数の上書き

$num: 5em;
$num: 10px;

.main {
  width: $num;
}

.main {
  width: 10px;
}

SCSSの変数はCSSと同じで、 あとに書かれたものは上書き されます。

変数名の-と_

$base-width: 5em;

.foo {
  width: $base-width;
}
.bar {
  width: $base_width;
}

.foo {
  width: 5em;
}
.bar {
  width: 5em;
}

SCSSの –（ハイフン） と _（アンダースコア）は同じものと見なされるので注意が必要です。$base-width と $base_width どちらでも呼び出すことができます。