みんなが使う理由がわかる!Sass(SCSS)の基本機能、まとめました。

仕事でHTMLコーディングをする人の約7割が、Sassを使用しているという調査結果があるように、コーディングをする上でSassはかかせないものとなってきています。
なぜ、こんなにも多くの人がSassを使用しているのか、今回の記事ではSassの基本機能をまとめてみました。

Sassとは?

まず、Sassを使ったことがない方に向けて、簡単にSassの説明をします。
Sassとは「Syntactically Awesome Stylesheets」の略で、訳すとすれば「構造的にとても凄い(最高な・素晴らしい)スタイルシート」という意味になります。

SassにはSASS記法・SCSS記法という2種類の記法があり、元々はSASS記法が採用されていましたが、CSSとの互換性に乏しいなどの理由から、CSSとの互換性を高めたSCSS記法が作られました。SCSSはCSSと記法が近いため、CSSを理解している人であれば、SCSSに慣れるのにそんなに時間はかからないと思います。

参考程度に、2種類の記法の例を上げておきます。

Sassの基本機能

ネスト

SCCの場合、親セレクタを何度も何度も記述しないといけなくて、長ったらしくなってしまうのを、簡潔にまとめることができるのがSassのネスト(入れ子)機能です。

このようにまとめることが出来るのです。

その他に、疑似要素や擬似クラスを使う場合は、&(アンパサンド)を使って

複数のセレクタに同じスタイルを指定したいときは、

 

CSSの半分の記述で済みます。

変数

変数とは、そのスタイルシート内で繰り返し出てくる数値やカラーコードに名前をつけて定義し、その付けた名前を書くことで使いまわすことができるようになる機能です。

書き方は「$変数名: 値;」です。

例えば、サイト内の青色を#0000FF(濃い青)にしていたけど、サイトが完成した後に#6495ED(薄い青)に変えたくなってしまった場合、変数で青色を定義しておけば一括で変更することが出来ます。

mixin

Mixinとは小さなテンプレートのようなもので、上手に活用すれば大幅に記述量を減らすことが出来ます。
感覚としては、変数の強化版のような感じかと思います。

mixinを使用するには
1.@mixinの後に名前をつけ
2.@includeの後ろにmixin名を書い呼び出します。
また、以下の例のように、mixinに引数を用いる事もできます。

例)

上記のように自分オリジナルでmixinを作っても良いのですが、「Compass」には豊富なMixinスニペットが用意されているので、時短を求める人にはぜひCompassを利用していただきたいです。

Compassについてはこちら

Compassのmixinで特によく使うものを幾つか上げておきます。

 

@import

1つのSCSSファイルで全てのスタイルを書いていくと記述量が膨大になるので、任意のルールでSCSSファイルを分けて作業すると変更・修正が容易になります。
複数のファイルに分けることをpartial(パーシャル)と言い、パーシャルするSCSSファイルの名前の頭に_(アンダーバー)を付けます。

例)_default.scss

_は、SCSSからCSSにコンパイル(変換)する時に、個別のCSSファイルとして出力させない働きを持っています。
複数のCSSファイルが出来てしまうと、サイトの読み込み速度が遅くなるので、_をつける必要があります。
仕事などでサイトの納期が迫っているときなど複数人で分担してコーディングをしなければいけない場合、
パーシャルして進めれば、誤って上書きしてしまったり、なんてこともなくなりそうですね。

そして、パーシャルしたSCSSファイルを@importで読み込みます。
書き方は、

まとめ

今回、ご紹介した機能はsassの機能のほんの一部です。
すべての機能を使いこなすのは難しいですが、今回ご紹介したいくつかの機能を使いこなすだけでも、CSSで書いていた時と比べてうんと効率的に作業ができるようになります。
SCSSフォルダ内にCSSを書いても何の問題も無いので、とりあえず導入してみて少しずつ、Sassに慣れていけば良いのではないかなと思います。

このエントリーをはてなブックマークに追加

筆者

S.Yamaguchi

Bigmac制作部で、主にWebデザイン兼コーディングを担当しています。 シンプルでフラットなデザインが得意です。 好きな飲み物はカフェオレで、夢はクラゲを飼うことです。
 座右の銘は、「ケセラセラ(なるようになるから流れるままにいこう)」 休日は、海外ドラマかアニメを見ています。 最近、髪をばっさり切って小さいきのこになりました。 どうぞ宜しくお願いします。

筆者が最近執筆した記事