SASS(scss)の入門

2016-09-01 16:04 - m.tanaka

こんにちは。デザイン担当の田中です。
今回、SASS(scss)のついて簡単に紹介をしたいと思います

SASSとは

SASSとはcssを生成するための技術です。
SASSの機能を使うことで、効率よくcssを用意することができます。
SASSには「sass」と「scss」の2つの記述の仕方があります。
今回は「scss」です。

まず、コンパイルできる環境を準備

私は「Prepros」という無料で使えるソフトを使っています。
scssファイルが入っているフォルダをドラッグで登録して
scssファイルを編集・保存すると、自動で同じ階層にcssファイルが生成されます。
これだけです。
細かいPreprosの設定・使い方は省略させていただきます。
私の場合、Preprosインストールするだけでコンパイルできる環境が整うはずがうまくいかず、
Ruby・gemのインストールというステップを踏みました。
うまくいかなかったらこの辺を疑ってみてください。

scssの基本的な使い方

scssの場合、基本的にはcssと同じ記述をしますので導入をしやすいと思います。
scssの機能について少し紹介したいと思います。

■ネスト(入れ子)
構造が深くなってくると便利です。構造の変更、class名の変更等があっても一部を修正するだけで済みます。

scss

css

■変数を使う
下記のように「$」の後に名前を付けて値を入れるだけです。色やマージンなど、サイト内で使いまわすものは変数にしておけば管理が楽になります。

scss

css

■mixinを使う
mixinとは値を渡して(渡さなくても使えます)スタイルを返してもらうものです。
ベンダープレフィックスなど、スタイルをまとめたいときに便利です。
「@mixin 」の後に名前を付けて、引数を使う場合は「$」の後に名前を付けます。
呼び出すときは「@include 」の後にmixin名で呼び出せます。引数を使う場合、値を渡してあげます。下記の場合「45deg」を渡しています。

scss


css

■インポートを使う
変数・mixinの使い方を紹介いたしましたが、
これらは別ファイルにしてインポートしたほうが管理がしやすいです。
例えば、「top.css」「about.css」のように
ページ単位でcssを持たせる場合、共通で使いまわすことができます。
変数・mixinは呼び出される前に定義してある必要があるので、インポートする場合は最初にインポートさせておくと間違いないです。また、他の人が触るときにも分かりやすいです。

scss

最後に

今回紹介したのはSASSのほんの一部です。
配列を定義してeachで回すこともできたりします。
まだまだ便利な機能がありますのでチェックしてみてください。
最後に注意ですが、SASSを導入したらcssファイルを直接編集するのは厳禁です。
コンパイルしたら上書きされて消えてしまいます。
これだけ注意すれば間違いなくコーディングのスピードがアップしますので是非導入してみてください。
SASS(scss)の紹介でした。