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

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をインストール

sass-scss-win01.png

https://nodejs.org/ja/

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

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

sass-scss-win02.png
npm install -g node-sass

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

3. インストール確認

sass-scss-win03.png
node -v

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

node-sass -v

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

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

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

node-sass style.scss style.css

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

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

sass-scss-win04.png

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;
}


参考

・【超簡単！】AtomでSass（SCSS）をコンパイルできるようにしてみた – アサモンノデザイン
・node-sassでSassファイルをコンパイルする - Qiita
・Sass-ja/INDENTED_SYNTAX.md at master · Layzie/Sass-ja · GitHub
・Sass（SCSS）は難しくないよ！私なりの使い方をご紹介！ ｜ Tips Note by TAM
・【Sassを覚えよう！Vol.9】変数と演算で効率的に - CSS HappyLife


スポンサーリンク

関連記事