CSSのメタ言語「Sass」
コンテンツ
Sass（サース）は、CSSを拡張した言語で、ネスト構造で記述できたり、変数をもちいた記述を可能にしています。
インストールと設定
Sassのインストールには、Node.jsが必須です。
Node.jsのインストール
Node.jsをダウンロードし、インストールします。
推奨版をダウンロードし、インストーラーを実行します。
PCを再起動でコマンドラインから実行が可能になります。
コマンドラインからnode.jsのバージョン、パッケージ管理npmのバージョンを確認します。
> node -v
> npm -v
node-sassのインストール
sassを使えるようにnode-sassをインストールします。
> npm install -g node-sass
バージョン確認をします。
> node-sass -v
Windowsの環境によっては、下記エラーが発生しスクリプトの実行ができない場合があります。
「このシステムではスクリプトの実行が無効になっているため、ファイル node-sass.ps1 を読み込むことができません。」
その場合、powershell コマンドのオプションを付与して実行します。
> powershell -ExecutionPolicy RemoteSigned node-sass -v
または、実行ポリシーを恒久的に変更する場合は、コマンドプロンプトを管理者権限で起動し、下記コマンドを実行します。
>PowerShell Set-ExecutionPolicy RemoteSigned
Gulpのインストール
Gulpをインストールします。
> npm install --global gulp-cli
バージョン確認をします。
> gulp -v
Sassコンパイル実行
Sassのコンパイルは、ワーキングディレクトリでgulp watch を実行することで完了します。
> gulp watch
これで、SCSSファイルの変更時点でCSSへコンパイルが実行されます。
