Sassとは何か

Sassとは成熟していて多機能で安定していて強力なCSSの拡張言語です。一言で言うと「CSSをモジュール化して楽に書ける言語」です。

具体的に言うと、変数を設定できたり、共通の設定項目を1つにまとめて簡単に呼び出すように設定できたり、関数が作れたりと、プログラミングっぽく書くことができてかつCSSよりもスマートに記述できるものです。

Sassを使うとCSSだけで書いていたあの頃に戻れなくなります。CSSだけで書けと言われるともう苦痛で夜も眠れなくなります。それくらい便利なものなんです。

Sassのインストール方法

Sassをインストールする前に、rubyがインストールされているかどうかを確認をします。

ruby -v  // rubyのバージョンの確認

Macであれば標準で入ってるはずなので問題ないと思います。Windowsは入ってないと思うのでrubyのサイトからインストールしてください。

続いてsassのインストールです。

gem install sass  //Macは先頭にsudoをつける

これでsassのインストールが終わりました。簡単ですね。

Sassの基本的な記述方法

続いては基本的な記述方法です。

基本的にSassは入れ子（ネスト）した状態で記述してきます。

// HTMLの記述例
<div class="txtarea”>
     <p class=“txt”>エンジニア募集中</p>
</div>

// Sassの記述例
.txtarea{
    margin: 20px 0 0;
    .txt{
        font-size: 16px;
    }
}

// コンパイルされたCSS
.txtarea{
    margin: 20px 0 0;
}
.txtarea .txt{
     font-size: 16px;
}

とても簡単ですね。親要素の中に子要素のスタイルを書いていくだけです。ちなみに同じタグに設定した別々のクラスにスタイルを設定するときは以下のような記述になります。

// HTMLの記述例
<div class="txtarea”>
     <p class=“txt td-lt”>エンジニア募集中</p>
     <p class=“txt”>デザイナー募集中</p>
</div>

// Sassの記述例
.txtarea{
    margin: 20px 0 0;
    .txt{
        font-size: 16px;
        &.td-lt{
            text-decoration: line-through;
        }
    }
}

// コンパイルされたCSS
.txtarea{
    margin: 20px 0 0;
}
.txtarea .txt{
     font-size: 16px;
}
.txtarea .txt.td-lt{
     text-decoration: line-through;
}

「&」を使うことでクラスなどを連結させられます。クラスだけでなくn番目の要素を指定するときにも使います。

// HTMLの記述例
<div class="txtarea”>
     <p class=“txt”>エンジニア募集中</p>
     <p class=“txt”>デザイナー募集中</p>
</div>

// Sassの記述例
.txtarea{
    margin: 20px 0 0;
    .txt{
        font-size: 16px;
        &:nth-child(2){
            text-decoration: line-through;
        }
    }
}

// コンパイルされたCSS
.txtarea{
    margin: 20px 0 0;
}
.txtarea .txt{
     font-size: 16px;
}
.txtarea .txt:nth-child(2){
     text-decoration: line-through;
}

こんな感じで「&」を使っていきます。「&」 を使って読み込み速度を上げる書き方もご紹介します。以下です。

// HTMLの記述例
<div class="txtarea”>
     <p class=“txtarea--item”>エンジニア募集中</p>
     <p class=“txtarea--item”>デザイナー募集中</p>
</div>

// Sassの記述例
.txtarea{
    margin: 20px 0 0;
    &--item{
        font-size: 16px;
    }
}

// コンパイルされたCSS
.txtarea{
    margin: 20px 0 0;
}
.txtarea--item{
     font-size: 16px;
}

上記は子要素を&–itemと書くことで親要素のクラス名であるtxtareaを参照してコンパイルすると.txtarea–itemになる記述法です。

このように書くと読み込み時にブラウザが.txtarea .txtと記述するよりも.txtarea–itemの方が速度は上がります。ブラウザはCSSの右のクラス名から探していくのでCSSで設定する場合はユニークなクラス名がいいと思います。

「&」以外にも「+」と「>」を使ってSassを書くことができます。「+」は隣接セレクタと言って隣接するタグをセレクタとして指定できます。

// HTMLの記述例
<div class="checkarea">
        <input type="checkbox" name="" id="check" class="checkbox">
        <label for="check" class="label">エンジニア募集中！</label>
 </div>

// Sassの記述例
.checkarea{
  .checkbox{
    display: none;
    &:checked{
      + .label{
        &:before{
          background-color: #000;
        }
      }
    }
  }
  .label{
    display: block;
    position: relative;
    padding-left: 20px;
    font-size: 1.4rem;
    &:before{
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      transform: translate(0,-50%);
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 1px solid #ddd;
    }
  }
}

// コンパイルされたCSS
.checkarea .checkbox{
    display: none;
}
.checkarea .checkbox:checked + .label:before{
    background-color: #000;
}
.checkarea .label{
    display: block;
    position: relative;
    padding-left: 20px;
    font-size: 1.4rem;
}
.checkarea .label:before{
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      transform: translate(0,-50%);
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 1px solid #ddd;
}

こちらはinputのcheckbox（radioでも可）で、チェックがされると背景が変わる実装になっています。checkboxにchecked属性が付与されたinputタグと隣接している.labelの擬似要素の背景色を黒に変えています。

今回のコードは背景を変えるだけの比較的簡単なものなのでデフォルトでも実装可能ですが、チェックマークを入れたりカスタマイズする時にはこの方法が多いかなと思うので知っておいて損はないと思います。

Sassの便利な記述方法

SassにはCSSではできない記述法があります。関数やfor文やミックスインなどを使うことができればコーダーとしてワンランクアップできますし、より簡単にCSSを構築することもできます。

@mixin

任意の名前を設定して、共通するスタイルを設定して、@include 任意の名前で呼び出すことができます。

// ミックスインを定義
@mixin 任意の名前 {
	// 定義するスタイル
}

// 定義したミックスインを呼び出し
クラス名 または　　ID名 {
	@include 任意の名前;
}

頻繁に使うであろう見出しのスタイルをまとめたり、レスポンシブでは必須の「メディアクエリ」をまとめたりするのに最適です。

// ブレークポイントの設定
$breakpoints: (
  'sp': 'screen and (max-width: 896px)',
  'pc': 'screen and (min-width: 897px)',
) !default;
@mixin bkp($breakpoint: sp) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

@for

連番で設定する際などに最適です。数字の何から何までと指定する場合、throughとtoで番号が変わります。

@for $value from 1 through 3 {
	セレクタ名_#{$value} {
		margin-bottom: 1px * $value;
	}
}
@for $value from 1 to 3 {
	セレクタ名_#{$value} {
		margin-bottom: 1px * $value;
	}
}

// through 1-3
セレクタ名_1 {
	margin-bottom: 1px;
}
セレクタ名_2 {
	margin-bottom: 2px;
}
セレクタ名_3 {
	margin-bottom: 3px;
}

// to 1-2
セレクタ名_1 {
	margin-bottom: 1px;
}
セレクタ名_2 {
	margin-bottom: 2px;
}

@each

@forと同じく繰り返しの処理になりますが、配列を設定して処理を実行するのでより柔軟に設定できます。メニューのアイコンにそれぞれ違うものを設定する時などは特に使えるかなと思います。

$iconList: home, about, company, contact;
@each $name in $iconList {
	.icon-#{$name} {
		background-image: url(../img/icon_#{$name}.png);
	}
}

.icon-home {
	background-image: url(../img/icon_top.png);
}
.icon-about {
	background-image: url(../img/icon_about.png);
}
.icon-company {
	background-image: url(../img/icon_company.png);
}
.icon-contact {
	background-image: url(../img/icon_contact.png);
}

まとめ

Sassいかがだったでしょうか？

CSS自体奥が深く、さらにSassまで覚えようとすると混乱して沼にハマりそうですが、1つずつ覚えていけば記述量も減って効率化にも繋がっていくので便利なものはどんどん覚えましょう。

Sassについてはまた違う視点から書こうかなと思います。しっかり立ち止まって勉強したことなかったのでこういう機会もいいものだなあと感じています。