なんとなくぼんやりとわかっているけども実際にやってみないとわからないことは多いので、手を動かす!
基本的なこと
コメントの書き方
/* ... */
と//
を使うことが出来ます。
ただし、//
はコンパイル後、作成されたCSSではコメントとして表示されません。
データ型
名称 | 概要 |
---|---|
数値 | 単位がついているものも含む |
文字列 | 引用符の有無は問わない |
色 | 色名、HEX、rgb、hslなど |
真偽値 | 真=true 偽=false |
リスト | 値をスペースやカンマで区切って並べたもの |
コンパイルする
メタ言語なのでコンパイルしなくちゃいけません。
作成する
- 好きなところ(
C:\Users\(UserName)
直下に今回は作成しました。)にSassDirというディレクトリを作成し、sassフォルダとcssフォルダを作成します。 - sassフォルダ内に
style.scss
ファイルを作成しエディタで開き、作業開始です。
style.scssには、このような感じで書いてみました。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$width: 960px; header, #main, footer { width:$width; } header, footer{ margin:0 auto; } #main { margin:20px auto; } |
コマンド
1. 移動
style.scss ファイルが完成したら、いよいよstyle.scssをコンパイルしてstyle.cssファイルを作ります。
ファイルの指定はコマンドラインのルートからのパスになるので、まずディレクトリの移動をします。
Windowsの場合、コマンドラインを起動するとC:\Users\(UserName)>
になっていると思うので、これをC:\Users\(UserName)\SassDir>
としたいと思います。
1 2 3 4 5 |
// Windowsの場合 cd SassDir // Macの場合 $ cd SassDir |
2. コンパイル
出来上がったファイルをコンパイルします。
1 |
sass sass/style.scss:css/style.css |
CSSフォルダにstyle.cssファイルが作成されていると思います。
出来上がりのCSSの中身はこのようになります。
1 2 3 4 5 6 7 8 9 10 11 |
header, #main, footer { width: 960px; } header, footer { margin: 0 auto; } #main { margin: 20px auto; } |
補足
圧縮されるオプションを指定したコマンド
1 |
sass -t compressed sass/style.scss css/style-min.css |
Watch
SCSSファイルの変更がある度に、コマンドを実行するのは面倒です。
そこでSassではファイルの更新を監視して、変更があった時に自動でコンパイルしてくれるコマンドWatchを使います。
1 |
sass --watch sass/style.scss:css/style.css |
既に同名のファイルが存在する場合は上書きになります。
監視を終了する場合はWindowsもMacもCtrl+C
です。
アプリを使えばこういった手間がなくなるのでとてもいいのですが、いざアプリがない場合の環境で使うことになったときを考えると、きちんと覚えておこうと思います。
最後に
ドットインストール
全15回あります。本当に無料でいいんですか?と毎回ここへ来るたび思い、感謝しているドットインストールのSassレッスンを受けました。
