CSSやHTMLの勉強をしている時にたまたま "Sass"(サース) に出会い、
「これは便利！」と感動したので備忘録がてらにSassについての記事を書きます。

Sassとは？

Sass :　Syntactically Awesome Style Sheets

の略で日本語に訳すと「構分的にすばらしいスタイルシート」なのですが簡単に言うと、
「CSSをより効率よく記述することの出来る言語」です。
間違いなく普通にcssを記述するよりも、効率よく記述することが出来ます！

記法について

Sassには記法が２種類あります。

・拡張子が.sassの「SASS記法」

.sass

.hoge
  margin: 0 auto
  .huga
    color: #000

元々Sassは名前の通りこちらの記述方法だったようです。
インデントで依存関係を示します。rubyっぽいですね。

・拡張子が.scssの「SCSS記法」

.scss

.hoge{
  margin: 0 auto;
  .huga{
    color: #000;
  }
}

よりcssと記法が近く、括弧{}を入れ子にすることで依存関係を示します。
個人的には入れ子に出来るだけでもコピペから解放されて嬉しいのですが
SCSS記法はCSSの完全な上位互換となっていて、
CSSの書き方もそのまま使うことが出来てさらに様々な便利機能が追加されています。
記事ではこちらの「SCSS記法」でSassの出来ることを纏めていきたいと思います。

.cssファイルにコンパイル

変換後の.css

.hoge{
  margin: 0 auto;
}
.hoge.huga{
    color: #000;
}

.cssファイルにコンパイルすると
上のsass,scssファイル両方ともに同じ結果が出力されます。

環境構築について

scssファイルはcssファイルにコンパイルする必要があります。
なのでその為の環境を構築する必要があります。
というとすごく面倒くさそうですが自分は10分位で終わりました。

環境は様々ありますが、
自分は「Atom」というテキストエディタに「sass-autocompile」というパッケージを入れて使用しています。

Atomのsass-autocompileでSassのコンパイルをしてみよう
上記の環境の構築についてすごく分かりやすく解説してくれています。

コンパイルといってもscssファイルを保存すると、
自動でcssファイルを生成してくれるので全く手間になりません。

リンク

Sassで出来ること【vol.1】Sassとは？
Sassで出来ること【vol.2】入れ子(ネスト)・変数
 Sassで出来ること【vol.3】関数
 Sassで出来ること【vol.4】継承
 Sassで出来ること【vol.5】mixin(ミックスイン)

Sassで出来ること【vol.1】Sassとは？