すでにメンバーの場合は

無料会員登録

GitHubアカウントで登録 Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

登録がまだの方はこちらから

Pikawakaにログイン

GitHubアカウントでログイン Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

HTML5・CSS3

【HTML5・CSS3】Sassを攻略してコーディングを効率良く書こう!

ぴっかちゃん
ぴっかちゃん

Sassとは、Syntactically Awesome Style Sheetsの略語で、CSSを拡張したメタ言語のことを指します。

メタ言語とは、言語を定義する為の言語のことです。つまり、SassはCSSのスタイルシート言語の機能を拡張した言語のことです。

CSS | CSSの書き方
1
2
3
4
5
6
7
8
ul {
  margin: 1em;
}

li {
    padding-left: 1em;
    color: red;
}

Sassの一種であるSCSS記法の場合は、下記のように記述します。

SCSS | SCSSの書き方
1
2
3
4
5
6
7
8
ul {
  margin: 1em;

  li {
  padding-left: 1em;
  color: red;
  }
}

Sassを使うことで、コードの記述量が減って保守性が高まるので、人為的なミスも減らす事が出来ます。

Sassの基礎情報

この章では、Sassの基礎情報について解説します。

Sassを使った方が良い理由とは?

CSSでもコーディングを行うことが出来ますが、Sassを使った方が良い理由は主に下記の3つあります。

  1. コードを減らすことが出来る
  2. 変数や関数を使うことが出来るので、効率的にコードが書ける
  3. 余計なコードを減らす事で、ミスを減らすことが出来る

Sassを利用するとコードをシンプルにする事が出来るので、保守性が高まり人為的なミスを減らすことが出来ます。CSSと比較しながら、Sassの書き方を解説していきます。

Sassの種類とは?

Sassには「SASS記法」と「SCSS記法」の2種類あります。
それぞれコーディングのルールが違うので、書き方も変わってきます。

下記のCSSの書き方を例にして、SASS記法とSCSS記法で比較していきます。

CSS
1
2
3
4
5
6
7
8
9
/* CSSの書き方 */
ul {
  margin: 1em;
}

li {
    padding-left: 1em;
    color: red;
}

SASS記法

SASS記法は、元々SCSS記法が導入される以前にSassで書かれていた記法です。
SCSS記法やCSSで書くよりもコードが簡潔になるので記述量を更に減らすことが出来ます。

CSS
1
2
3
4
5
6
7
8
9
/* CSSの書き方 */
ul {
  margin: 1em;
}

li {
    padding-left: 1em;
    color: red;
}

SASS記法の場合は、下記のように記述します。

SASS記法 / ファイル名.sass
1
2
3
4
5
6
/* SASSの書き方 */
ul
  margin: 1em
  li
    padding-left: 1em
    color: red

CSSと比べると波括弧{}がなくなるのでシンプルなコードにする事が出来ました。書き方のポイントは、下記の3つあります。

ポイント
  1. 拡張子は.sassのファイル形式です
  2. スタイルブロックを区切る波括弧{}が無くなる代わりに入れ子はインデントを使用する
  3. 通常の値の終わりにあるセミコロンは省略することが出来る

SCSS記法

SCSS記法は、スタイルの書き方がCSSと変わらないので、元々CSSを書いていた方はSASS記法よりも入りやすいかと思います。Sass3.0から導入された記法です。

CSS
1
2
3
4
5
6
7
8
9
/* CSSの書き方 */
ul {
  margin: 1em;
}

li {
    padding-left: 1em;
    color: red;
}

SCSS記法の場合は、下記のように記述します。

SCSS記法 / ファイル名.scss
1
2
3
4
5
6
7
8
9
/* SCSSの書き方 */
ul {
  margin: 1em;

  li {
  padding-left: 1em;
  color: red;
  }
}

CSSと見た目は似ていますが、波括弧{}を入れ子にしている箇所が違います。ulの波括弧{}の中にliの子要素を入れ子構造にする事で、ulを親要素として認識します。

ポイント
  1. 拡張子は.scssのファイル形式です。
  2. SCSS記法は入れ子を主とした記法になる
  3. スタイルの書き方はCSSとほぼ変わらない
  4. 波括弧{}を使い入れ子構造にして、CSSの依存関係を示す

また、現在はSCSS記法の書き方が主流になっているので、ここからはSassの書き方はSCSS記法で説明します。

Sassを導入

Sassを使うには、Ruby本体とSass本体を導入する必要があります。また、導入後にはSassをCSSにコンパイルしなければ、スタイルを反映することが出来ません。

Sassの導入手順とコンパイルについては別記事で解説させて頂いて、今回は「 sassmeisterオンラインエディタ」を使ってSassのコードをCSSに変換された結果を確認していきます。

sassmeisterの使い方

sassmeisterは、リアルタイムでSass,ScssをCSSに変換してくれるサービスです。

これから解説するコードをsassmeisterに貼り付けてもらうとコードの実行結果をリアルタイムで確認する事が出来ます。

下記のリンクよりsassmeisterにアクセスして下さい。

sassmeister.com

アクセスしたら下記の様な画面が表示されます。

sassmeister初期画面

今回はHTMLも使うので、ViewのプルダウンからHTMLを選択します。

sassmeister設定

左のsassのエディタにコードを書くと、真ん中のエディタにCSSが変換されます。また、HTMLとSassのコードの結果は、下のviewに表示されます。

sassmeister構造

これから解説されるSassのコードをHTMLと共にsassmeisterで確認してみて下さい。整理しながらコードを理解する事が出来るのでおすすめです。

SCSS記法の様々な使い方

この章では、SCSSの様々な使い方について解説します。

ネストの色々な書き方

SCSS記法の特徴としてネスト構造がありますが、基本的な書き方に加えて他にも覚えておくと便利な書き方があるので解説していきます。

階層構造をネストする

下記のHTMLのコードでは、ulタグを親要素、liタグを小要素の階層になっています。
HTMLの要素やタグを復習したい方は、「HTMLタグと要素」を参考にして下さい。

HTML
1
2
3
4
5
<ul class="parent">
  <li class="child">テキスト1</li>
  <li>テキスト2</li>
  <li>テキスト3</li>
</ul>

この様な階層構造は、CSSで書くと下記の様に記述します。

CSS
1
2
3
4
5
6
7
.parent {
  color: red;
}

.parent .child {
  color: blue;
}

これをSCSS記法で書くと、小要素をネストして記述する事が出来ます。

SCSS
1
2
3
4
5
6
7
.parent {
  color: red;

  .child {
    color: blue;    
  }
}

プロパティをネストする

階層構造だけではなく、プレフィックスが同じプロパティもネストする事が出来ます。

HTML
1
<div class="content">中身</div>
CSS
1
2
3
4
5
.content {
  background-color: red;
  padding-top: 1em;
  padding-left: 2em;
}

SCSSで書くと下記の様な構造になります。

SCSS
1
2
3
4
5
6
7
.content {
  background-color: red;
  padding: {
    top: 1em;
    left: 2em;
  }
}

paddingの後のコロンの付け忘れに注意しましょう。

アンパサンド(&)を使ってネストする

SCSS記法では、アンパサンドと呼ばれる&を使ってネストすると、親セレクタを参照する事が出来ます。

例えば、通常CSSでリンクのホバー時に文字の色を変更する場合は、擬似要素を使って以下のコードのように記述します。

HTML
1
2
3
4
5
<ul>
  <li><a href="#">テキスト1</a></li>
  <li>テキスト2</li>
  <li>テキスト3</li>
</ul>
CSS
1
2
3
4
5
6
a {
  text-decoration: none;
}
a:hover { /* ホバー時に色を変更する */
  color: green;
}

これをアンパサンド(&)を使うと、以下のコードのように記述する事が出来ます。

SCSS
1
2
3
4
5
6
7
a {
  text-decoration: none;

  &:hover { /* &は親セレクタのaを参照する */
    color: green;
  }
}

ネストしている&は、親セレクタのaを参照してるので、上記の&:hovera:hoverとなります。

擬似要素をアンパサンドを使った場合

また、アンパサンド&は、擬似要素以外にも以下のコードのようにBEMが取り入れられたclass名の場合に効率良く記述する事が出来ます。

HTML | BEMが取り入れられたclass名
1
2
3
4
<form class="form">
  <input type="text" class="form__text">
  <input type="submit" class="form__button">
</form>
SCSS | BEMで命名されたclass名を&を使って記述する
1
2
3
4
5
6
7
8
9
10
.form {
  &__text { /* &はformを参照するので form__textになる */
    font-size: 18px;
  }

  &__button { /* &はformを参照するので form__buttonになる */
    color: white;
    background-color: blue;
  }
}

CSSにコンパイル後は以下のコードのようになります。

CSS | CSSにコンパイル後のコード
1
2
3
4
5
6
7
.form__text {
  font-size: 18px;
}
.form__button {
  color: white;
  background-color: blue;
}

sassmeisterで確認すると、以下の動画のようになります。

sassmeisterでアンパサンドを確認する

このように、アンパサンド&を使うと親セレクタを参照する事が出来るので相性が良いと言われているBEMと合わせて利用すると更に効率良くコーディングする事が出来ます。

BEMについて詳細は、「BEMの使い方」を参考にしてください。

変数の定義

SCSSでは、変数を定義して利用する事が出来ます。

SCSSで変数を定義する
1
2
3
4
5
/* 変数の定義 */
$変数名: 

/* 変数を使う */
$変数名

変数の定義は、「$変数名: 値」で定義する事が出来きて、定義した変数は「$変数名」で利用出来ます。

メディアクエリのブレイクポイントのサイズやカラーなど共通する値を変数にすると使いまわす事が出来るので便利です。

SCSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 共通で使うカラーを定義 */
$color-main: #ff00ff;

a{
  text-decoration: none;

  &:hover {
    color: $color-main;
  }

  &::before {
    color: $color-main;
    content: "★";
  }
}

CSSにコンパイルされると下記の様なコードになります。

CSS
1
2
3
4
5
6
7
8
9
10
11
a {
  text-decoration: none;
}
a:hover {
  color: #ff00ff;
}
a::before {
  color: #ff00ff;
  content: "★";
}

変数で定義した「#ff00ff」の値がcolorに設定されているのが分かります。

演算

SCSSは、加算(+)、減算(-)、乗算(*)、除算(/)、剰余(%)を使って計算を行うと、コンパイル時に計算結果に変換してくれる便利な機能があります。

SCSS
1
2
3
4
.box {
    height:20px * 2;
    width:100px - 20px;
}

上記のSCSSのコードはCSSにコンパイルされると、計算結果がプロパティの値になっている事が分かります。

CSS
1
2
3
4
5
.box {
  /* プロパティ値が演算結果の値になる */
  height: 40px;
  width: 80px;
}

※除算だけは丸括弧()で囲むので注意してください。

SCSS
1
2
3
4
5
  /* 除算は丸括弧()で囲む */
.box {
    height:20px * 2;
    width:(1000px / 3);
}
CSS
1
2
3
4
.box {
  height: 40px;
  width: 333.3333333333px;
}

丸括弧()しなかった場合は「width:(1000px / 3);」がそのまま出力されます。

関数

SCSSでは、文字列や数値や色などを操作するための関数がたくさん用意されています。下記は、数ある中の関数の一部です。

関数 概要
unit($number) 値から単位を取得する
mix($color1, $color2, $weight) 2つの色を混ぜる
invert($color) 色を反転させる
alpha($color) 色の透明度を取得する
lighten($color, $amount) 指定の色を指定した割合だけ明るくする



指定した2つの色を混ぜる関数mix()を使ってみましょう。

HTML
1
<div class="box"></div>

mix()の引数には、混ぜる色2つを指定します。第3引数に割合を指定する事が出来ます。

SCSS
1
2
3
4
5
.box{
  background-color: mix(#000, #fff, 50%);
  height: 100px;   
  width: 100px;
}


第3引数の割合を変える事で色に変化を付けることが出来ます。

mix()の実行結果

この様にSCSSには、便利な関数が沢山提供されています。

SCSS
1
2
3
4
5
6
7
8
/* 変数で定義 */
$base-color1: #000;
$base-color2: #fff;

.box{
  background-color: mix($base-color1, $base-color2, 50%);
  /* 中略 */
}

ディレクティブ

「@名前」で指定することの出来る命令をディレクティブと言います。SCSSでは、関数やmixinと呼ばれる様な様々な処理制御にディレクティブが対応します。

これからSCSSの代表的な4つのディレクティブを解説していきます。

  1. @functionディレクティブ - 自作で関数を定義する事が出来る
  2. @mixinディレクティブ - スタイル定義を再利用する
  3. @extendディレクティブ - 定義済みのスタイルを継承する
  4. @importディレクティブ - 外部のスタイルシートを読み込む

1.@functionディレクティブ

SCSSは、先ほど解説したmix関数の様に提供される関数もありますが、自作で関数を作成することも出来ます。

@functionディレクティブを使って定義します。また、@returnディレクティブを使った戻り値を返します。

SCSS
1
2
3
4
5
6
7
/* 関数を定義する */
@function 関数名(引数) {
    @return 戻り値;
}

/* 関数の呼び出し */
関数名(引数);

簡単な例を見ていきましょう。下記は「引数で指定した値($value) ÷ 2」の結果を返すsample関数を定義しています。

SCSS
1
2
3
4
5
6
7
@function sample($value) {
    @return $value / 2;
}

div {
    width: sample(100px);
}

上記のコードがコンパイルされると、下記のようになります。

CSSへコンパイル
1
2
3
div {
  width: 50px;
}

何度も利用する処理を関数で定義することによって、汎用性があるシンプルなコードになります。

2. @mixinディレクティブ

@mixinディレクティブは、ミックスインとも呼ばれており、スタイル定義を再利用するための仕組みです。@mixinディレクティブでスタイルを定義して、@includeディレクティブで使う場所に埋め込みます。

SCSS
1
2
3
4
5
6
7
8
9
10
11
/* 定義 */
@mixin common-box {
    background-color: #222;
    color: #eee;
}

.menu {
    /* 定義したミックスインを埋め込み */
    @include common-box;
    padding: 10px;
}

上記のコードをCSSでコンパイルすると下記の様になります。includeした要素が.menuとして挿入されていることが分かります。

CSS
1
2
3
4
5
6
.menu {
  background-color: #222;
  color: #eee;
  padding: 10px;
}

@mixinディレクティブは、あらかじめ定義しておいたミックスインを別の場所に再利用する目的で利用されます。

また、@mixinディレクティブは引数でプロパティ値を変えることが出来きます。

SCSS
1
2
3
4
5
6
7
8
9
10
@mixin box($background, $font) {
    background-color: $background;
    color: $font;
}

.menu {
    /* 引数に値を指定する */
    @include box(#222, #eee);
    padding: 10px;
}
ポイント
  1. @mixinディレクティブでスタイルを定義し、@includeディレクティブで使う場所に埋め込む
  2. @mixinディレクティブは、引数を渡すことが出来る
  3. プロパティ値だけ変更してスタイルを使いたい場合は、@mixinディレクティブを使う

3. @extendディレクティブ

@extendディレクティブは、定義済みのスタイルを他のクラスに継承することが出来ます。

以下のコードのように、@extendの後にセレクタ名(.sample)を引用符で囲まずに指定すると、そのクラスに.sampleのスタイルを継承する事が出来ます。

@extendディレクティブの定義方法
1
2
/* @extend セレクタ名; */
@extend .sample;

例えば定義済みの.base-contentのスタイルをcontent1に継承したい場合は、以下のコードのように記述します。

SCSS | .base-contentのスタイルを継承する場合
1
2
3
4
5
6
7
8
9
10
11
.base-content {
  border: 1px solid grey;
  font-size: 20px;
  padding: 20px;
  width: 200px;
}

.content1 {
  @extend .base-content; /* .base-contentを継承する */
  border-color: red; /* borderの色だけgreyからredに変更したい*/
}

CSSにコンパイルされると、以下のコードのように同じプロパティを持つスタイルはまとめられます。そして、content1に独自で定義したborder-color: redは、個別に出力されます。

CSS | コンパイル後
1
2
3
4
5
6
7
8
9
10
.base-content, .content1 { /*同じスタイルはまとめられる*/
  border: 1px solid grey;
  font-size: 20px;
  padding: 20px;
  width: 200px;
}

.content1 { /*独自で定義したスタイルは個別に記述される*/
  border-color: red;
}

このように、@extendディレクティブを使えば同じプロパティはまとめてくれるので、余計な重複コードを出力してしまうという心配がありませんね。

sassmeisterで上記の一連の挙動を確認すると、以下の動画のようになります。

extendディレクティブの使用例

ポイント
  1. @extendディレクティブは、他のスタイルを継承し独自に変更する事が出来る
  2. コンパイル後のCSSでは、共通するプロパティは全てまとめられて、独自に定義したスタイルは、個別に出力される
  3. コンパイル後のコード量を減らしたい場合に使う
プレースホルダーセレクタ

@extendディレクティブは、セレクタを継承することが出来るのでコンパイルされたCSSに継承元のセレクタも生成されます。

コンパイル後のCSSに出力される継承元のセレクタ

しかし、継承専用のセレクタとして扱いたいなど継承元のセレクタがコンパイル後に不要な場合は、プレースホルダーセレクタ(Placeholder selector)という専用のセレクタを使えば解決することが出来ます。

プレースホルダーセレクタは、以下のコードのようにid(#)やクラス(.)の代わりに%をつけて定義します。

プレースホルダーセレクタの定義
1
2
3
4
/* .sampleにプレースホルダーセレクタを使う場合 */
%sample {
  color: red;
}

例えば、先ほどの.content1.base-contentを継承したコードをプレースホルダーセレクタに変更すると、以下のコードのようになります。

SCSS | プレースホルダーセレクタに変更した場合
1
2
3
4
5
6
7
8
9
10
11
%base-content { /* .base-contentから%base-contentに変更 */
  border: 1px solid grey;
  font-size: 20px;
  padding: 20px;
  width: 200px;
}

.content1 {
  @extend %base-content; /* ここも%base-contentに変更 */
  border-color: red;
}

上記のコードがコンパイルされたCSSは、以下のように継承元のセレクタが生成されていない事が分かりますね。

プレースホルダーセレクタを使った場合のコンパイル

ポイント
  1. @extendディレクティブは、継承元のセレクタもコンパイル後のCSSで生成されてしまう
  2. コンパイル後に継承元のセレクタが不要な場合は、プレースホルダーセレクタ%でセレクタを指定する
@extendと@mixinの違いとは?

@extendディレクティブと似た機能には、@mixinディレクティブがありましたね。
2つの違いや使い分けは、以下の通りです。

  • @extendディレクティブは、関連性のあるルール同士に使う
  • @mixinディレクティブは、関連性のないルール同士に使える
  • プロパティ値だけ変えてスタイルを使う場合は、@mixinディレクティブを使う

まずは、@extendディレクティブを見ましょう。

以下のコードの.base-buttonは、全てのボタンのベースとなるスタイルを設定してます。.green-buttonの場合はボタンと関連性があるので、.base-buttonを@extendで継承する事が出来ます。

SCSS | @extendディレクティブの使いどころ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 /* 全てのボタンのベースのスタイルを設定 */
.base-button {
  border-style: solid;
  display: inline-block;
}

/* buttonに関連性があるので、@extendで.base-buttonを継承出来る*/
.green-button {
  @extend %base-button;
  background: green;
}

/* .base-buttonのスタイルを使いたいが、関連性がないので@extendで継承しない!*/
.footer {
  background: grey;
}

しかし、.footerの場合はボタンと全く関連性がないので、.base-buttonのスタイルを使いたくても@extendで継承することはありません。このように@extendディレクティブは、関連性のあるルール同士に使います。

次は、@mixinディレクティブを見ましょう。

以下のコードのように@mixinで定義するbase-fontは、フォントのベースとなるスタイルを設定しています。@mixinディレクティブは、@extendディレクティブと違ってフォントに関連性のない.nav.headerなど対してbase-fontを@includeして使う事が出来ます。

SCSS | @mixinディレクティブの使いどころ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* フォントのベースのスタイルを設定 */
@mixin base-font {
  color: #575f74;
  font-family: sans-serif;
}

.nav {
  @include base-font;
}

.header {
  @include base-font;
}

.footer {
  @include base-font 
}

このように@mixinディレクティブは、関連性のないルール同士に使う事が出来ます。

また、@mixinディレクティブは引数を渡す事も出来るので、以下のコードのようにプロパティ値だけ毎回変えて使いたい場合にも便利です。

SCSS | @mixinディレクティブの使いどころ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@mixin base-font($color) {
  color: $color;
  font-family: sans-serif;
}

.nav {
  @include base-font(#575f74);
}

.sidber {
  @include base-font(#4b505e); 
}

.footer {
  @include base-font(#474a52);
}
ポイント
  1. @extendディレクティブは、関連性のあるルール同士に使う
  2. @mixinディレクティブは、関連性のないルール同士に使える
  3. プロパティ値だけ変えてスタイルを使う場合は、@mixinディレクティブを使う

4. @importディレクティブ

@importディレクティブは、外部のスタイルシートである「.scssの拡張子のファイル」をインポートする機能です。指定したファイルは、CSSにコンパイルされると1つのファイルとして書き出されます。

SCSS
1
2
3
4
5
/*  ファイルをインポートする  */
@import "ファイル名.scss"; 

/* 拡張子は省略可能なので、下記でも良い*/
@import "ファイル名"; 

下記の様に、カラーをまとめたファイルをインポートした時の例を見てみます。

color.scss
1
2
3
/* 色をまとめたファイル */
$base-black: #383838;
$base-write: #fff;
SCSS
1
2
3
4
5
6
7
/* 拡張子は省略可能 */
@import "color.scss";

/* color.scssで定義したカラーを利用する */
main {
  color: $base-black;
}

上記のコードをCSSへコンパイルすると、下記の様になります。

CSSへコンパイル
1
2
3
main {
  color: #383838; 
}

変数でカラーコードを定義する事によって、使い回せるのはもちろんですが、1つ1つ何を意味しているのか分かりやすくなりコードの可読性も上がります。特にミックスインを外部ファイル化すると、必要な時に@importで呼び出す形にするとコードの保守性が上がり管理しやすくなります。

この記事のまとめ

  • Sassとは、CSSのスタイルシート言語の機能を拡張した言語のこと
  • 「SASS記法」と「SCSS記法」の2種類ある
  • Sassを使うことで、保守性が高まり人為的なミスを減らすことが出来る

12

わかった!