弥生研究所

人は誰しもが生きることの専門家である

Sass の開発環境を作成する

いろいろあるスタイルシート言語

  • 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 を圧縮するかどうかを指定します。

詳細は公式サイトをご覧ください。

github.com