【Windows】Sass（SCSS）をCSSにコンパイルできる環境を作る【簡単】

2018/04/11

CSS

code

趣味でCSSを書いていても、いろいろ限界が出てきたので、SCSSに挑戦してみることにしました。変数も使えるようになるし、いろいろ問題を解決してくれるのでは？と思います。

Sass環境を作ると「SASS」「SCSS」の両方とも

そして Sass のバージョン3.0 から CSS の文法・記法が取り入れられたものが SCSS（Sassy CSS）です。CSSの書き方に慣れている人は SCSS の方がすんなりと理解できると思います。Python っぽい書き方を好む人なら Sass の記法がより効率的に書けるかもしれません。
Web制作環境を整えるその7 – Sass(SCSS) + Compass でもっとCSSを！ – Webtomahawk

Sassが、括弧でSCSSと書いてあるのは、もともとSASS記法というので書かれていたんですが、Sass3.0からCSSちっくに書くことが出来るSCSS記法というのでも書けるようになったためです。
ようはどちらで書いても、同じCSSが生成されるので、自分に合った方を使えばいいと思います。
CSSのメタ言語Sass(SCSS)、LESSの完全入門 - Qiita

Sass環境を作ると「SASS」「SCSS」の両方ともコンパイルできるようになるということのようです。

Python派：SASS
PHP派：SCSS

記述の好みは、個人的な感覚だと上記のような雰囲気ですね。

Windows環境に、Sass（SCSS）コンパイル環境を構築する

1. nodeをインストール

https://nodejs.org/ja/

上記からダウンロードして、初期値のままインストールしました。

2. node-sassをインストール

npm install -g node-sass

コマンドプロンプト（DOSプロンプト）を立ち上げて、上記のコマンドを実行します。そうすると、「node-sass」が導入されます。

3. インストール確認

node -v

これで、バージョンが表示されなければ、nodeのインストールに失敗しています。

node-sass -v

これで、バージョンが表示されなければ、node-sassのインストールに失敗しています。

パス(Path)とかの設定なく、上記のコマンドが実行できるはずです。

実際にコンパイルしてみる

node-sass style.scss style.css

変換元：style.scss
変換先：style.css

上記のように実行すると、Sass（SCSS）ファイルを、CSSファイルに変換してくれます。

node-sass -w style.scss style.css

「-w」を付けると、ファイルが更新されたら自動で変換してくれます。

※注意
コマンドプロンプトは立ち上がったままで、ファイルを監視し続けます。コマンドプロンプトを閉じると、ファイルの監視が終了するので、自動で変換されません。

node-sass -w style.scss style.css --output-style expanded

出力のスタイルが私の好みでないので、「--output-style expanded」を指定してみました。「--」はハイフン２つです。

変換前のstyle.scss

#blog-title {
  text-align: center;
  margin:0;

  #title{
    font-size: 180%;
    font-weight:500;
    font-family: 'Nunito', sans-serif;
  }
}

変換後のstyle.css

#blog-title {
  text-align: center;
  margin: 0;
}

#blog-title #title {
  font-size: 180%;
  font-weight: 500;
  font-family: 'Nunito', sans-serif;
}