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

  • 投稿 : 2018-04-11
趣味で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」を指定してみました。「--」はハイフン2つです。

変換前の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


スポンサーリンク
タグ#CSS#code