16

【CSS】コーディングにSassを使うメリットと使い方


見ているだけでも楽しいリッチなデザインのサイトには、複雑で膨大な量のCSSが欠かせません。サイトのページ数が多い場合は、チームで仕事をすることも多いですよね。そこに集まってくるのは、個性的なコードたち。

 

ほかの人が書いたCSSをさわるのは、初めから自分でコードを書くよりもストレスを感じることはありませんか?また、大量のコードをメンテナンスするのも大変ですよね。

 

そんなとき、より便利に、効率的にコードを書くのを助けてくれるのが、Sassです。
今回は、Sassの代表的な機能をご紹介しながら、Sassを使ってコードを書くメリットを見ていきましょう!

 

Sassってなに?

プログラムコードを書いているパソコンの写真まずはSassの簡単な説明から。

 

Sassとは、簡単に言うとCSSにプログラミング言語の考え方を取り入れた言語のことで、複雑なコードを効率的に書いたり管理したりすることができます。

 

「いくら便利だからと言って、プログラミングがわからない!」と思った方でも大丈夫。Sassでコードを書くことに慣れてしまえばそれほど難しくありませんし、「プログラミングっぽくCSSを書く」と思えば、楽しくなってきませんか?

 

では早速、Sassの機能とそのメリットについて見ていきましょう。

 

 ネスト

まずは、Sassの代表的な機能、ネスト(=入れ子)から。
Sassでは、HTMLの階層に合わせてスタイルをネストして書くことができます。

例えば、こんなHTMLのとき。

HTML

 

次のようにCSSを書いたとしましょう。

CSS

同じidやクラスを何度も書くのはめんどくさい…。
でもSassなら、idやクラスは一度書くだけでいいんです!

 

同じコードを、Sassで書いたものを見てみましょう。

Sass

ネストを使うメリット

親子関係にあるセレクタをネストできるので、同じセレクタを何度も書く必要がありません。記述を簡略化することで、コーディング時間を短縮することができますね。
また、CSSをネストすることで、HTMLの構造と照らし合わせやすくなることもメリット。どのようなスタイルがあたっているのかが感覚的にわかれば、ページのイメージもしやすくなりませんか?
さらに、メンテナンスだってラクチン。同じidやクラスを何度も書いていないので、修正する箇所が少なくてすみます。また、修正や変更のし忘れで、「レ、レイアウトが…なんで!?」というミスも防げますよ。

 

変数

Sassで使える便利な機能に、「変数」があります。変数とは、よく使う値に名前を付けて、その名前を呼び出すだけで、そこで定義した値をひっぱってくることができるもの。
変数の書き方は、「$好きな変数名: 値;」でOK。「$変数名;」と記述すれば、定義した値を使うことができます。変数名をつけるときは、なにを定義しているのかがわかりやすい名前をつけるのがいいですよ。

例えば、こんなCSSのとき。

CSS

「 #f5f5f5」に「$color」という変数名をつけてSassで書くと、次のようになります。

 

Sass

 

変数を使うメリット

共通の値を色々な場所で使いたいことって、多いですよね。変数が使えるSassの場合、はじめに変数と値を設定しておけば、一括でスタイルを適応させることができます。
また、変数のすごさがわかるのは、メンテナンスのとき。
Sassの場合、修正や変更のある変数の値だけを変えればおしまい!
CSSのように、該当する全ての箇所を書き直す必要はありません。
変数を使えば、フォントや背景の色や、フォントのサイズ、共通のマージンやパディングなどが一度に設定、変更できて効率的です。

 

演算

Sassでは、CSS上で計算をすることができます。
計算には、足し算(+)引き算(-)割り算(/)かけ算(*)余りを求める(%)を使います。
変数と組み合わせて使うと、もう電卓はいらないかも?
では、具体例を見てみましょう。

 

Sass

 

四則演算を使うメリット

基本となるフォントサイズを変数で定義すると、その大きさを基準にスタイルを適応できます。
基本のサイズとどれくらい差をつけているかがわかれば、ページレイアウトのバランスもとりやすいですよね。

 

継承

同じスタイルを何度も繰り返し使いたいときに便利なのが、「@extend」です。
「@extend セレクタ;」と書けば、定義したセレクタのスタイルを、別のセレクタの中で呼び出すことができます。

例えば、「.box」で使ったスタイルを「.frame」でも使いたいとき。

Sass

と書けば大丈夫です。

 

@extendを使うメリット

同じスタイルを使い回すことができる@extendは、ウェブハックをするときに便利です。
一度定義してしまえば、コピペの繰り返しは必要ありません!
また、一つのスタイルをベースに、様々なパターンを作ることができます。
例えば、つぎのようなSassのとき。

 

Sass

CSSはこのようになります。

 

CSS

 

 

 ミックスイン

「@mixin 名前;」で定義したスタイルを「@include 名前;」で呼び出せます。@extendとの違いは、「@mixin 名前;」で定義したスタイルを「@include 名前;」で呼び出すまでは何も起こらないということ。
そして、ミックスインの最大の特徴である、引数の指定ができる事。「@mixin 名前($引数)」と記述し、呼び出す場所で反映したい値を引数に入れます。引数を使えば、部分的に値を変えるといった処理をする事だってできちゃいます。

 

Sass

CSSを見ると、「$value」に引数の「#ff00d8」と「#00a0e9」が入ったことがわかります。

 

CSS

また、複数の引数を指定することもできます。
引数を使えるようになると、すっきりとしたCSSがかけそうです

 

CSSファイルをまとめる

これは、記述に関する機能ではありませんが、Sassの「パーシャル」という機能を使うと、複数のCSSファイルを1つにまとめることができます。

CSSのファイルは、単一のほうがサーバーへの負荷が減り、読み込みが速くなることをご存じですか?
共通項目やそれぞれのページごとに分けて書いたCSSが、最終的に1枚のスタイルシートで生成されるのは、制作、メンテナンス、処理、すべての点において嬉しいですね!

 

まとめ

勉強会のイラスト

いかがでしたか?Sassについて簡単にご紹介しましたが、Sassでの記述をあやつれるようになれば、コーディング時間、ミスの原因を探す時間、修正をする時間などを短縮することができそうですね。

サイトの規模が大きくなるほど、Sassの効率的な記述法がたまらなくなってくるはずです。ちょっとSassを試してみたい方には、ウェブ上でリアルタイムにSassをコンパイルしてくれる「Sass Meister」というサイトもありますよ。

これを機会に、Sassの勉強をはじめてみませんか?

 

 

 

 

 

 

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article細部にもこだわりたい人向けオシャレなカタカナフォントまとめ