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

HTML5・CSS3

Sassとは

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

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

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

階層構造をネストする
リンクをコピーしました

下記の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記法では、擬似要素も「&」を使ってネストで記述する事が出来ます。

擬似要素を復習したい方は、「擬似要素とは?」を参考にして下さい。

HTML
1
2
3
4
5
6
<ul>
  <li><a href="#">テキスト1</a></li>
  <li>テキスト2</li>
  <li>テキスト3</li>
</ul>

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

SCSSで書くと、下記の様にネストで書く事が出来ます。

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

  &:hover {
    color: green;
  }

  &::before {
    content: "★";
  }
}

擬似要素の動画

HTMLとSCSSのコードをsassmeisterに貼り付けると、テキスト1をカーソルで通過した時に文字の色が変化します。また、SCSSのコードが真ん中のCSSエディタに変換された事が確認出来ます。

変数の定義
リンクをコピーしました

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. @extendディレクティブ - 定義済みのスタイルを継承する
  3. @mixinディレクティブ - スタイル定義を再利用する
  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. @extendディレクティブ
リンクをコピーしました

@extendディレクティブは、定義済みのスタイルを継承して新たなスタイルを定義することが出来ます。

「@extend セレクタ名」で指定したセレクタのスタイルを継承することが出来ます。

SCSS
1
2
3
4
5
6
7
8
9
10
.min-content {
    background-color: #222;
    color: #eee;
    font-size: 12px;
}

/* .min-contentで既に定義してあるスタイルを継承 */
.sub-content {
    @extend .min-content;
}

基本的な継承は上記の様なコードになりますが、.sub-contentのfont-sizeだけ8px;に変えたい場合は下記の様にコードを追加してあげます。

SCSS
1
2
3
4
5
6
7
8
9
10
11
.min-content {
    background-color: #222;
    color: #eee;
    font-size: 12px;
}

/* .min-contentで既に定義してあるスタイルを継承 */
.sub-content {
    @extend .min-content;
    font-size: 8px; /* 追加 */
}

CSSにコンパイルされると、下記の様にextendした要素と .sub-contentが同じプロパティを持つclassとしてグルーピングされます。
そして、.sub-contentで定義した新しいスタイルのみが書かれた定義が新たに生成されます。

CSSへコンパイル
1
2
3
4
5
6
7
8
9
.min-content, .sub-content {
  background-color: #222;
  color: #eee;
  font-size: 12px;
}

.sub-content {
  font-size: 8px;
}

@extendディレクティブの既存のスタイルを継承し、一部を変えて新たなスタイルを定義する事を示しています。

3. @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でコンパイルすると下記の様になります。@extendディレクティブの時とは違い、includeした要素が.menuとして挿入されていることが分かります。

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

@extendディレクティブは、既存のスタイルを継承して一部を変えて新たなスタイルを定義していたのに対して、@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;
}

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には「SASS記法」と「SCSS記法」の2種類あります。
  • Sassを使うことで、保守性が高まり人為的なミスを減らすことが出来ます。