CSSをより便利に扱うためにSassというCSSを拡張したメタ言語があります。
Sassを使うことでCSSをプラグラムらしく記述することができます。それによってコーディングの効率が劇的にあがります。
今回はSassをbracketsのライブプレビューで見れるように導入する方法を紹介します。
手順1：Rubyをダウンロードする
Rubyを以下のサイトでダウンロードします。
https://www.ruby-lang.org/ja/downloads/
ダウンロード後、インストールできたらCommand promptを開いてruby -v と入力し、Enterでrubyがインストールされていることを確認します。
C:\Users >ruby -v
ruby 2.4.4p296 (2018-03-28 revision 63013)[x64-mingw32]
手順2：Sassをインストールする
Command promptでsudo gem install sassと入力してEnter
（Windowsの場合はgem install sass）
しばらく待って、インストールできたらsass -vを入力し、Enterでsassがインストールされていることを確認します。
C:\Users >sass -v
Ruby Sass 3.5.6
手順3：Sassをcssに変換するコンパイラをダウンロードする。
ブラウザはsassファイルを読み取ることができないため、cssに変換する必要があります。
コンパイルするためのGUIソフトは色々ありますが、ここではフリーの「Koala」を使用します。
以下のリンクからダウンロードできます。
http://koala-app.com/
Koalaをダウンロード、インストールできたら開きます。
変換したいscssファイルの入ったフォルダを、Koala画面中央にドラッグするとフォルダ内のscssファイルが読み込まれます。
表示されたscssファイルをクリックすると右にメニューが現れます。
Koalaの設定を整える
メニューに表示されている自動コンパイル、Source Map、Autoprefixの3箇所にチェックを入れておきましょう。
Autoprefixはベンダープレフィックスを自動でつけてくれる機能です。
自動コンパイルはエディターでsassファイルを編集して保存した際に、自動でcssファイルを作成してくれます。
Source Mapはグーグルのデベロッパーツールでサイトを検証したときにsassのファイルも表示してくれます。無くても良いですが、あるにこしたことはないでしょう。
メニュー下部にあるアウトプットスタイルは出力されるcssの記述形式です。個人的にはexpandedかcompressedが良いと感じています。
expandedは通常のcss方式の見た目で、ファイル容量は重くなりますが、scssのネストやインデントを取り除いた見やすいコードになります。
compressedはスペースを全て取り、コードを圧縮して記述します。見づらさはあるものの、読み込みスピードは非常に速いです。
また、sassファイルを右クリックで、アウトプットパス設定を開くことで作成されるcssファイルの出力先を決めることができます。
Bracketsの設定
最後にBracketsの設定です。
まず、「拡張機能マネージャー」→「入手可能」→「Brackets SASS Code Hints」を検索してインストールします。
「インストール済み」から有効化されているか確認しましょう。画像の様に「無効」ボタンが表示されていれば問題ありません。
以上がSassの導入になります。
試しにコードを書いてみましょう。
html
<main>
<section>
<h1>h1です</h1>
<p>pタグです</p>
</section>
</main>
scss
@charset "utf-8";
@mixin font($font-size,$color){
font-family:'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
font-size: $font-size;
font-weight: bold;
color: $color;
}
main{
width: 100%;
section{
background-color: #ccc;
height: 100px;
h1{
@include font(25px,#f00);
}
p{
@include font(16px,#00f);
}
}
}
保存をするとKoalaがcssファイルを自動で生成します。(Koalaは開いたままにしておくこと)
htmlのhead内に出力されたcssへのリンクを記述しましょう。
これで、ライブプレビューボタンを押すとブラウザ上できちんと反映されているはずです。
一度設定してしまうと非常に便利ですね。
Koalaでエラーが出てしまうという方は、よくある原因としては次のようなものがあります。
- パスの中に日本語のファイルがある
- Sassファイルの中に全角のスペースがある
- Sassファイルの中で@charset utf-8を設定していない。
- @charset utf-8より上の行に何らかの記述をしている（コメントアウト含め）
これらをきちんと守らないと、コンパイル時にInvalid（無効）のエラーが出てしまうので気をつけましょう。
