A Little Each Day

note to self

Sassのインストールと簡単な使い方

こんにちは。本日はSassの導入と簡単な使い方についてです。

Sassは現在Webの開発現場でも人気で、導入している企業も増えてきています。

WebエンジニアならSassに触れておいても損はないでしょう。

Sassとは

Sassとは「Syntactically Awesome StyleSheet」の略です。直訳すると「構文的に素晴らしいスタイルシート」となり、要は「パないスタイルシート」という認識で問題なさそうです。

Sassはcssを拡張したメタ言語で、SassとScssの二種類があります。

現在主流なのは後者の「Scss」のほうで、こちらの方がcssチックで、普段cssに書き慣れているフロントエンドエンジニアやデザイナーはscssのほうが書きやすいと思います。


Rubyのインストール

Sassを使うにはRubyが必要です。

MacにはデフォルトでRubyがインストールされています。

もしrbenvでRubyをインストールしたい場合は、過去記事にインストール方法が書いてあるので参照してください。

blog.otsukasatoshi.com


ターミナルでRubyのバージョンを確認してみましょう。

$ ruby -v


バージョンが表示されたらRubyのインストールは成功です。


Sassのインストール

Rubyがインストールできたので、いよいよSassをインストールしていきましょう。(※Macの場合はsudoをつける場合があります。)

$ (sudo) gem install sass


Sassがインストールされたか確認しましょう。

$ sass -v


バージョンが表示されたらSassのインストールは成功です。


Sassファイルの作成とコンパイル

では実際にSassファイルを作ってみましょう。

「style.scss」という拡張子が「.scss」のファイルをつくりましょう。

.box{
  height: 100px;
  width: 100%;
  h1{
    font-size: 20px;
  }
}


コードが入れ子になっていて、従来のcssよりコードが短く可読性も上がっているのがわかると思います。直感的ですね。


Sassがかけたので、次にコンパイルしていきましょう。

作成したSassファイルがあるディレクトリに移動します。

$ cd Sassファイルがある場所


コンパイルします。

$ sass --style expanded style.scss:style.css


するとscssからcssを出力してくれます。

.box {
  height: 100px;
  width: 100%; }
  .box h1 {
    font-size: 20px; }


これでもOKですが、毎回コマンドを打つのはめんどくさいですよね?

Sassは自動でコンパイルしてくれる設定ができます。

$ sass --watch sass/style.scss:css/style.css


これで拡張子が「.scss」のファイルが保存されたら、自動でコンパイルしてれます。



今回はSassの導入と簡単な使い方をみてきました。

Sassの実践的な使い方は後々書こうと思います。



本日は以上です。