いろいろあるスタイルシート言語
- LESS
- Sass
- SCSS
- SASS
Sass は SCSS と SASS の両方の概念を含んでいるので注意が必要です（ややこしい）。SCSS と SASS は別のスタイルシート言語なのではなく、Sass が SCSS と SASS という二種類の構文を持っています。つまり、SCSS と SASS は同じものであり、ただ記述方法が違うだけです。この記事では、Sass、SCSS、SASS は、それぞれ意味を区別しています。
特徴
- LESS: 構文は SCSS とよく似ていいますが、機能的には SCSS の方が多機能です。LESS の最大の特徴は、Javascript を使用してブラウザ上で動的にコンパイルできることです。Sass では静的にコンパイルする機能しかありません。ただし、動的にコンパイルするメリットどう見出すかが問題ですが。
- SCSS: 構文は LESS と似ており、さらに純粋な CSS とも互換性があります。これは、SCSS に CSS をそのまま記述しても問題ないことを意味しています。
- SASS: SASS と SCSS に機能的な違いはありません。SCSS が CSS に寄せた構文なのに対して、SASS は独自の構文で記述します。したがって、SASS には純粋な CSS を記述することは出来ません。
どれを選択するかは悩ましいところですが、私は SCSS がもっとも勢いがある印象を持っています。
SCSS の開発環境を作る
Sass はもともとも、ruby による実装がありましたが、今では、node.js 環境における Javascript の実装（中身はC++）もあります。フロントエンドの開発では node.js 環境は必須になりつつあるので、node.js 環境の npm パッケージである node-sass を使用します。
まず、npm init で package.json を作成します。
npm init
次に、node-sass をインストールします。
npm install -D node-sass
さて、ときどき -D ではなく -g を使って、グローバルにインストールする記事をインターネット上で見かけることがありますが、node-sass の場合、-D が最適です。-g は開発者が個人的に依存するモジュールや、公式に -g でインストールすることが推奨されているモジュールだけに使用しましょう。
node-sass
複雑なことをしたい場合、タスクランナーや、モジュールバンドラなどが必要になる場合もあるかもしれませんが、node-sass だけでも十分な機能があります。
Sass を CSS にコンパイルするには、以下のコマンドを実行します。
node-sass [options] <input> [output]
ちなみに、SASS と SCSS の違いは、拡張子の違いを読み取って自動で判別してくれます。
良く使うオプションは、
--include-path: import するファイルのパスを指定します--watch: Sass のファイルを監視して修正されたら自動的にコンパイルします--output-style: CSS を圧縮するかどうかを指定します。
詳細は公式サイトをご覧ください。
