はじめに
cssをより見やすい文法で記述する方法にscss/sassがあります。
scss/sassに必要なもの
- rubyのgemパッケージ(ライブラリのようなもの)のscss/sassのインストール
- 1. を利用するためのruby自体のインストール
インストール手順については、こちらのサイト様が分かりやすくなっています。
scss/sassをcssに変換する。
scssファイルをコンパイルしてcssファイルに変換します。
windowsのコマンドプロンプトで以下のコマンドを実行します。
記法
sass 【scssファイル名】:【cssファイル名】
例
sass source.scss:dest.css
変換時の注意点
『:』の前後にスペースを入れると以下のようなエラーが発生します。
Errno::EINVAL: Invalid argument @ rb_sysopen - : Use --trace for backtrace.
生成されるファイル
一度の変換(コンパイル)で生成されるファイルは以下の3ファイル
1.dest.css
2.dest.css.map
ブラウザの検証ツールでscssの行数などを知ることができデバッグ作業に役立てることができます。
またこの変換情報は変換後のcssにも記載されています。
{
"version": 3,
"mappings": "AAEA,OAAQ;EACJ,OAAO,EAAE,GAAW;EACpB,MAAM,EAAE,GAAW;EACnB,YAAY,EALT,OAAO",
"sources": ["source.scss"],
"names": [],
"file": "dest.css"
}
/*# sourceMappingURL=dest.css.map */
mappingファイルの出力が不要な場合は、以下のパラメータを追加します。
--sourcemap=none
3.sass-cache
コンパイルの時間短縮に役立ちます。ファイル出力が不要な場合は、以下のパラメータを追加します。
--watch test --no-cache
コンパイルの自動化
sassファイルを修正するたびに、コンパイルのコマンドを実行するのは面倒ですよね。
そんな場合は以下のパラメータを追加しましょう。コードを修正しファイルが保存されると同時に、コンパイルを自動的に実行してくれます。
ファイル単位
sass --watch source.scss:dest.css
source.scssが修正されると同時に、dest.cssへ自動変換されます。
フォルダ単位
sass --watch sourceFolder:destFolder
指定したフォルダ内のファイルが修正されると同時に、出力フォルダへcssファイルが自動変換されます。
コマンドプロンプト上での表示
C:\>sass --watch sourceFolder:destFolder >>> Sass is watching for changes. Press Ctrl-C to stop. write destFolder/source1.css write destFolder/source1.css.map write destFolder/source2.css write destFolder/source2.css.map write destFolder/source3.css write destFolder/source3.css.map >>> Change detected to: sourceFolder/source1.scss write destFolder/source1.css write destFolder/source1.css.map >>> Change detected to: sourceFolder/source2.scss write destFolder/source2.css write destFolder/source2.css.map >>> Change detected to: sourceFolder/source3.scss write destFolder/source3.css write destFolder/source3.css.map
自動化を終了する
自動化を終了するにはコマンドプロンプト上でCtrl + Cを押下します。
SCSSコマンドの使い方
scssにはこれ以外にも様々なコマンドの書き方があります。
コマンドの書き方については、こちらのサイト様にまとめられています。