前回はネストや変数などSassの基本機能をご紹介しましたが、今回はもっと便利にスタイルシートを記述するためのSassの機能をご紹介したいと思います。

前回の記事はこちら↓

【初心者向け】ここから始める「Sass」の使い方まとめ

CSSの記述を効率化し、メンテナンス性も向上するSassの導入から基本的な使い方までまとめました。 対象の方は下記のとおりです。 Sassで書きたいけどコンパイルがよく分からない Sassをコンパイル...

Web Design Trends

インポート（@import）

Sassは、外部のファイルをインポートすることができます。例えば、スタイルガイドによって定義されたカラーやフォントファミリーの定義などを外部ファイルに変数として用意しておき、それを読み込むことによって、後でスタイルガイドに変更があった時もそのファイルだけを変更すれば対応することができます。

インポートする場合は、@import 'xxxxx';という形でコードを記述します。


// _common.scss
$main-color: red;
$accent-color: green;
$font-family: "Noto Sans JP", sans-serif;


// style.scss
@import './common';

.box {
  font-family: $font-family;
  border: 3px solid $main-color;
}

コンパイルしたCSSファイルは下記のようになります。ちゃんと_common.scssで定義した変数が適用されていることが分かりますね。

/* style.css */
.box {
  font-family: "Noto Sans JP", sans-serif;
  border: 3px solid red;
}

上記の例では変数を別ファイルで定義していますが、下記のようにそのファイルの中で変数を定義して使用することも可能です。

/* style.scss */

$main-color: red;

.box {
  background: $main-color;
}

色の定義やフォントファミリーなど、サイト全体のデザインに影響する変数は専用のファイルを作り、それぞれのscssファイルでインポートすると管理しやすくなります。

Sassファイルのアンダースコア

上記のインポートを行う時に、「_common.scss」というファイルをインポートしました。このようにアンダースコア(_)を付けることによって、Sassをコンパイルした時にファイルとして出力されなくなります。

HTMLから直接読み込みを行わないSassのファイルは、「_filename.scss」のようにファイル名の頭にアンダースコアを付けておきましょう。

また、インポートするときは@import './filename'のようにアンダースコア と拡張子を付ける必要はありませんので注意してください。

エクステンド(@extend)

エクステンドとは、スタイルを継承することができる機能です。

例えば、下記のように.item1のスタイルを継承して.item2というクラスのスタイルを定義するコードは下記のようになります。

.item1 {
  color: red;
  font-size: 20px;
  margin: 20px auto;
}

.item2 {
  @include .item1;
  background: #e8e8e8;
}

.item1, .item2 {
  color: red;
  font-size: 20px;
  margin: 20px auto;
}

.item2 {
  background: #e8e8e8;
}

.item1のスタイルが.item2に継承され、同様のスタイルが定義されています。ここで注目すべきなのが、.item1と.item2のスタイル定義がそれぞれ作られるわけではなく、一箇所でまとまって定義されているという点です。

この点が次にご紹介する@mixinとは少し異なります。

ミックスイン(@mixin)

ミックスインとは、任意のスタイルを事前に定義しておき、必要な場面でスタイルを呼び出すことができる機能です。

@mixin button {
  border-radius: 3px;
  background: #ccc;
}

.button-normal {
  @include button;
}

.button-submit {
  @include button;
  background: red;
  color: #fff;
}

コンパイルしたCSSは下記のようになります。

.button-normal {
  border-radius: 3px;
  background: #ccc;
}

.button-submit {
  border-radius: 3px;
  background: #ccc;
  background: red;
  color: #fff;
}

標準的なボタンデザインを@mixinで定義しておき、ボタンのタイプごとに個別のスタイルを定義するようにすれば、コードの記述量を減らすことができ、後でボタンデザインを変更したい時も@mixin buttonを修正するだけで済ませることができます。

@extend と @mixinの違い

@extendと@mixinは似た機能なので混同してしまう場合が多いかもしれませんが、考え方が違うということを理解しておきましょう。

@extend
特定のスタイルを拡張して新たなスタイルを定義する。
@mixin
使い回しを行う前提で標準のスタイルを定義する。

@extendはすでに特定のデザインがあり、それを拡張して新たなスタイルを定義する時に使用するのに対し、@mixinは標準のスタイルを定義する

  • @extendはスタイルがグループ化される
  • @mixinは引数が使える

どちらも似たような機能ではありますが、Sassの書き方や出力されるCSSファイルのコードの形式が少し異なるという違いがあります。

少し考え方が異なるものの、色々とコードを書いているうちにそれぞれの細かなメリットやデメリットが見えてくると思います。

@extendは「特定のスタイルを拡張して新たなスタイルを定義する。」、@mixinは「使い回しを行う前提で標準のスタイルを定義する。」という大まかな考え方を覚えておき、状況によって適切な方を使用するようにしましょう。

Sassのコメントアウト

CSSでは、/* comment */にして/*と*/の間にコメントを記述することでコメントアウトしますが、Sassの場合は// commentのように//（スラッシュ2つ）でコメントアウトすることができます。

さらに、SassのコメントアウトはCSSにコメントアウトすると出力されなくなるので、公開されることがないというメリットがあります。

コンパイルしたCSSにコメントも出力したい場合は、通常のCSSと同様に/* comment */とすると出力されるようになります。

しかし、圧縮形式をcompressedにするとコメントが出力されなくなります。下記のように記述しておけば、圧縮形式をcompressedにしても表示されるようになります。　

/*!
  これはコメントです
*/

関数

Sassは様々な関数を使うことによって数値やデータの処理を行うことができます。

関数 説明
round() 小数点を四捨五入する
ceil() 小数点を切り上げる
floor() 小数点を切り捨てる
abs 数値の絶対値を返す

この他にも関数はたくさん用意されています。公式ドキュメントから一覧を見ることができるので、気になる方はぜひチェックしてみてください。

Sassで使える関数一覧

繰り返し(@for)

繰り返しは、プログラミングをやったことがある人ならよく分かると思いますが条件の範囲内で繰り返し処理を行うことができる関数です。

@for $i from 1 through 5 {
  .item-#{$i} {
    backgorund-image: url('image_#{$i}.png');
  }
}

.item-1 ~ .item-5 まで特定の背景画像を設定するためのコードですが、出力されるCSSは下記のようになります。

.item-1 {
  backgorund-image: url("image_1.png");
}

.item-2 {
  backgorund-image: url("image_2.png");
}

.item-3 {
  backgorund-image: url("image_3.png");
}

.item-4 {
  backgorund-image: url("image_4.png");
}

.item-5 {
  backgorund-image: url("image_5.png");
}

きちんとそれぞれのクラスに対してbackground-imageを指定するためのCSSが出力されていることが分かります。

このように、連番になっているセレクタに対してそれぞれスタイルを設定したい場合には@forを使うと簡単に記述することができます。

条件分岐(@if)

Sassでは、一般的なプログラミング言語と同様にif文による条件分岐を行うことができます。

下記の例は、$typeの値に応じて.button>クラスの背景色を変更するコードです。わざわざ下記のように記述する必要は無いかもしれませんが、@ifと@elseの使い方の参考例としてご覧ください。

$type: 'sub';

.button {
  @if $type == 'main' {
    background: red;
  } @else if $type == 'sub' {
    background: brue;
  } @else {
    background: gray;
  }
}

$typeがmainならred、subならblue、その他ならgrayを背景色に指定するコードとなっています。

コンパイルして出力されるCSSは下記のようになります。

.button {
  background: brue;
}

上記の例では、$typeにsubを指定しているので、正しくbackground: brue;が出力されていることが分かります。

これからSassを始める人へ

Sassで記述したスタイルはHTMLから直接呼び出すことができないため、CSSにコンパイルする必要があります。コンパイルする方法はいくつかありますが、Visual Studio Codeを使う方法が初心者の方には最もおすすめです。

下記の記事で手順を詳しくご紹介しているのでぜひ参考にしてみてください。

VS CodeでScssを書くための環境構築方法

Webのコーディングを行うテキストエディタの中でも、多くの人に使われている人気のエディタがMicrosoftが提供する「Visual Studio Code（VS Code）」です。 他にもAtomや...

Web Design Trends

また、今回ご紹介したSassの機能は応用編です。そもそものSassの書き方や、ネスト、変数など基礎部分はこちらの記事でご紹介しています。

【初心者向け】ここから始める「Sass」の使い方まとめ

CSSの記述を効率化し、メンテナンス性も向上するSassの導入から基本的な使い方までまとめました。 対象の方は下記のとおりです。 Sassで書きたいけどコンパイルがよく分からない Sassをコンパイル...

Web Design Trends

まとめ

Sassの関数など応用的な内容をご紹介しました。いきなり@importや@extend、@mixinなど色々なテクニックを活用することは難しいと思うので、Sassに慣れていない方はまずSassの基本から覚えるようにしましょう。

基本的な使い方は理解できても、実際にSassの機能をフル活用してスタイルを記述しようとしてもうまくいきません。しかし、繰り返しSassを使ってスタイルを書くようにしていると、少しずつコツを掴んできて効率よくコードを書くことができるようになるはずです。

慣れるまではCSSで記述するよりも時間がかかってしまうかもしれませんが、ぜひ少しずつSassを使いこなせるように練習してみてください。

おすすめの記事