Sass(SCSS)を使ってみる

開発環境は、Windows 10 Pro(64bit) + node v10.15.0。

Sass(SCSS)はCSSをより短い入力で書いて、そのままではきちんと動作しないので、変換して、CSSファイルを作成する仕組みです。

すでにnode.js(npm)をインストールしている前提で書いています。

以下の公式サイトの指示通りにやってみたいと思います。
Sass: Syntactically Awesome Style Sheets

1.npmにてsassをインストールする

npm install -g sass

2.テスト用にディレクトリを作成します

cd c:\
mkdir sass
cd sass

3.試しに何か書いてみます。下記のファイルをtest.scssとして保存します。

$color: #000000;

.test{
  color: $color;
}

4.次にカレントディレクトリを先ほど作成したsassディレクトリにして、以下のコマンドを入力して変換します。

sass test.scss test.css

そうすると、同じディレクトリ内に、test.cssとtest.css.mapが作成されていて、test.cssの中身を見ると、

.test {
  color: #000000;
}

/*# sourceMappingURL=test.css.map */

ときちんと変換されていることが分かります。
後は、このCSSファイルを使いたいところに用いるだけです。