# SCSSについての手引

scss -> cssの強いものって感じ
scssそのものの書き方についてはProgateにおまかせし、僕らの環境で何をしているのか簡単に説明する。

## コンパイルをするときの手順

//開始時

cd <作業ディレクトリに移動>
npx gulp watch
->SCSS監視状態に。.scssファイルを保存すると、勝手にCSSファイルを生成してくれる。
->エラーが発生するとエラー箇所を出力してくれる。

//終了時

コマンド + C

## node.jsについて

node.jsはサーバーサイドで動くjavascriptで、最近のAngular,React,Vueとかっていうモダンwebフレームワークの基礎も担当している強いjs

https://ja.wikipedia.org/wiki/Node.js

今回は別にアプリを作っているわけではないので、単純にSCSSのコンパイル環境と、その他サポートツールを走らせるために使っている。

## なんでそんなややこいことをすんねん

SCSS = 強い CSSだが、単体では動かないので SCSS -> CSSに形式を変えてやる必要がある。これがいわゆる`コンパイル`というもの。これをしないとCSSとして機能してくれない。

また、SCSSをCSSにただコンパイルしたというだけでは使いづらく、色々と整形をする必要がある。

## 今回使っている諸々（興味があればどうぞ）

gulp -> タスク管理ツール。
gulp-sass -> gulpでSCSSをコンパイルしてくれるプラグイン
gulp-plumber、gulp-notify -> コンパイル時にエラーが発生したら通知してくれるようにする。

gulp-postcss　-> 整形後のCSSにあれやこれやしてくれるautoprefixer　-> コンパイル後のCSSを勝手に全ブラウザ対応にしてくれる。すごい。
css-declaration-sorter -> コンパイル後のCSSをいい感じに並び替えて整地してくれる。
css-mqpacker,gulp-sourcemaps -> コンパイル後のCSSのマップを書いてくれる。