Chapter03 継承と定義と関数

概要と目標 Sassの高度な機能を覚えて、
さらに効率よくSassを書けるようになろう。

ExtendやMixinといった、Sassの高度な機能を使えば、得られるメリットが大きい。
これらの使い方を習得し使えるようになろう。

スタイルの継承 スタイルのルールを、
別のセレクタでも使える。

同じスタイルを何度も使うときは、
「@extend」という機能で、スタイルを継承できる。

@extendの使い方
セレクタ {
  @extend 継承するセレクタ;
}

スタイルを継承してみよう。

以下の「.button-praimary」と「「.button-secondary」は、
全て「.button」と同じプロパティが含まれている。
こういう時は@extendを使うと便利。

作りたいCSS
.button {
  display: block;
  padding: 1em;
  font-size: 1em;
  cursor: pointer;
}

.button-primary {
  display: block;
  padding: 1em;
  font-size: 1em;
  cursor: pointer;
  border: 3px solid #9DBF4A;
}

.button-secondary {
  display: block;
  padding: 1em;
  font-size: 1em;
  cursor: pointer;
  border: 3px solid #2C2C31;
}
  1. 「chapter03」 › 「extend」 › 「_sass」フォルダ内にある「common.scss」ファイルを開く
  2. 下記のsassのコードを記述する
chapter03/extend/_sass/common.scss
// 継承元のスタイル
.button {
  display: block;
  padding: 1em;
  font-size: 1em;
  cursor: pointer;
}

.button-primary {
  @extend .button;
  border: 3px solid #9DBF4A;
}

.button-secondary {
  @extend .button;
  border: 3px solid #2C2C31;
}
  1. 上書き保存
  2. 「chapter03」 › 「extend」 › 「css」フォルダ内に下記の「common.css」ファイルが出来上がっていることを確認
コンパイル結果（chapter03/extend/css/common.css）
.button, .button-primary, .button-secondary {
  display: block;
  padding: 1em;
  font-size: 1em;
  cursor: pointer;
}

.button-primary {
  border: 3px solid #9DBF4A;
}

.button-secondary {
  border: 3px solid #2C2C31;
}
継承できないセレクタ
基本的なタイプセレクタや、classセレクタ、IDセレクタなどは問題無く継承できるが、
以下のような結合子を使ったセレクタなどは継承できない。
  • 子孫セレクタ （Ex. #header h1）
  • 子セレクタ （Ex. .list > li）
  • 隣接セレクタ （Ex. .section + .section）
  • 間接セレクタ （Ex. h3 ~ h3）
など

プレースホルダー 継承元のスタイルを、
生成しなようにできる。

「@extend」はスタイルを継承する便利な起動だが、必ず継承元のスタイルも生成される。
継承元のセレクタの先頭に「%」という@extendのプレースホルダーを利用すると、
継承元のスタイルを生成されない。

プレースホルダーを使ってみよう。

  1. 「chapter03」 › 「extend」 › 「_sass」フォルダ内にある「common.scss」ファイルを開く
  2. 下記のsassのコードを変更する
chapter03/extend/_sass/common.scss
// 継承元のスタイル
%button {
  display: block;
  padding: 1em;
  font-size: 1em;
  cursor: pointer;
}

.button-primary {
  @extend %button;
  border: 3px solid #9DBF4A;
}

.button-secondary {
  @extend %button;
  border: 3px solid #2C2C31;
}
  1. 上書き保存
  2. 「chapter03」 › 「extend」 › 「css」フォルダ内に下記の「common.css」ファイルが出来上がっていることを確認
コンパイル結果（chapter03/extend/css/common.css）
.button-primary, .button-secondary {
  display: block;
  padding: 1em;
  font-size: 1em;
  cursor: pointer;
}

.button-primary {
  border: 3px solid #9DBF4A;
}

.button-secondary {
  border: 3px solid #2C2C31;
}
@extendの注意
「@extend」は便利な機能だが、使いすぎると、cssを継承しすぎて、継承元を探すことや、継承元を編集した際にどこまで影響するのかが見えにくなるので、「@extend」を使うときは、「異なるオブジェクトでは使わない」などルールを決めるとよい。

スタイルの定義 スタイルの集まりを定義できる。

「@mixin」を使えば、スタイルの集まりを登録しておき、
いつでも使えるようにすることができる。

@mixinの登録方法
@mixin Mixin名(引数) {
  // Mixinとして登録するスタイル
}

引数は「,（半角カンマ）」区切りで複数指定可能（必要ない場合は省略も可能）
@mixinの呼び出し方法
セレクタ{
  @include 呼び出すMixin名(引数);
}

スタイルを定義してみよう。

例えば、以下のCSSのように「マウスが乗った時、その要素が半透明になる」というスタイルを、ボタンやバナーなど、様々な要素で使いたいとする。
ただ、要素によっては不透明度を変えたり、アニメーションのスピードを変えたりしたいこともある。こういう時、@mixinを使うと便利。

作りたいCSS
.banner {
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.banner:hover {
  opacity: 0.5;
}

.button {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.button:hover {
  opacity: 0.7;
}

.link {
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.link:hover {
  opacity: 0.7;
}
  1. 「chapter03」 › 「mixin」 › 「_sass」フォルダ内にある「common.scss」ファイルを開く
  2. 下記のsassのコードを記述する
chapter03/mixin/_sass/common.scss
// Mixinの登録
@mixin fadeLink ($speed, $opacity) {
 transition: all $speed ease-in-out;

  &:hover {
    opacity: $opacity;
  }
}

// Mixinの呼び出し
.banner {
  @include fadeLink(.2s, .5);
}

.button {
  @include fadeLink(.3s, .7);
}

.link {
  @include fadeLink(.2s, .7);
}
  1. 上書き保存
  2. 「chapter03」 › 「mixin」 › 「css」フォルダ内に下記の「common.css」ファイルが出来上がっていることを確認
コンパイル結果（chapter03/mixin/css/common.css）
.banner {
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.banner:hover {
  opacity: 0.5;
}

.button {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.button:hover {
  opacity: 0.7;
}

.link {
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.link:hover {
  opacity: 0.7;
}

引数に初期値を設定してみよう。

例えばアニメーションのスピードや、不透明度が多くの箇所で同じ場合は、引数に初期値を決めておくと便利。

@mixinの引数に初期値を設定
@mixin Mixin名(引数: 初期値) {
  // Mixinとして登録するスタイル
}

引数は「,（半角カンマ）」区切りで複数指定可能（必要ない場合は省略も可能）
  1. 「chapter03」 › 「mixin」 › 「_sass」フォルダ内にある「common.scss」ファイルを開く
  2. 下記のsassのコードを変更する
chapter03/mixin/_sass/common.scss
// Mixinの登録
@mixin fadeLink ($speed: .3s, $opacity: .7) {
 transition: all $speed ease-in-out;

  &:hover {
    opacity: $opacity;
  }
}

// Mixinの呼び出し
.banner {
  @include fadeLink(.2s, .5);
}

.button {
  @include fadeLink();
}

.link {
  @include fadeLink(.2s);
}
  1. 上書き保存
  2. 「chapter03」 › 「mixin」 › 「css」フォルダ内に下記の「common.css」ファイルが出来上がっていることを確認
コンパイル結果（chapter03/mixin/css/common.css）
.banner {
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.banner:hover {
  opacity: 0.5;
}

.button {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.button:hover {
  opacity: 0.7;
}

.link {
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.link:hover {
  opacity: 0.7;
}
カンマを含むプロパティは、
可変長引数を使う。
CSSには「transform」など、値に「,（カンマ）」を含むプロパティがある。
ただし、カンマを含む値をそのまま引数に使うとエラーになる。
サンプル
@mixin translate($val) {
  transform: translate($val);
}

.translate {
  @include translate(50%, 0);
}
これは、@mixinで用意されている引数はひとつなのに対して、呼び出してる時は「2つ」引数を渡しているからです。
こういう場合は、mixinを登録する際に、引数の後ろに「...」記述することで、可変長引数にできます。
サンプル
@mixin translate($val...) {
  transform: translate($val);
}

.translate {
  @include translate(50%, 0);
}

@mixinにスタイルセットを渡す ルールセットを
@mixinに渡すことができる。

@mixinはスタイルを登録し、それを呼び出すことが機能だが、
「@content」を使うと、ルールのブロックをMixinに渡すことができる。

スタイルセットを渡してみよう。

  1. 「chapter03」 › 「mixin」 › 「_sass」フォルダ内にある「common.scss」ファイルを開く
  2. 下記のsassのコードを追加する
chapter03/mixin/_sass/common.scss
// Mixinの登録
@mixin fadeLink ($speed: .3s, $opacity: .7) {
 transition: all $speed ease-in-out;

  &:hover {
    opacity: $opacity;
  }
}

@mixin mq($breakpoint) {
  @media screen and (min-width: $breakpoint)  {
    @content;
  }
}

//  ブレークポイントの設定
$tab: 768px;
$lap: 960px;

// Mixinの呼び出し
.banner {
  @include fadeLink(.2s, .5);
}

.button {
  @include fadeLink();
}

.link {
  @include fadeLink(.2s);
}

@include mq($tab) {
  .link {
    font-size: 1.25em;
  }
}

@include mq($lap) {
  .link {
    font-size: 2em;
  }
}
  1. 上書き保存
  2. 「chapter03」 › 「mixin」 › 「css」フォルダ内に下記の「common.css」ファイルが出来上がっていることを確認
コンパイル結果（chapter03/mixin/css/common.css）
.banner {
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.banner:hover {
  opacity: 0.5;
}

.button {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.button:hover {
  opacity: 0.7;
}

.link {
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.link:hover {
  opacity: 0.7;
}

@media screen and (min-width: 768px) {
  .link {
    font-size: 1.25em;
  }
}

@media screen and (min-width: 960px) {
  .link {
    font-size: 2em;
  }
}

便利な関数Sassにはあらかじめ、
便利な関数がある。

Sassには数値に関する関数や、色に関する関数、文字に関する関数など、様々な便利な関数が用意されている。
ここではそのいくつかを紹介する。

数値に関する関数を使ってみよう。

percentage() ・・・ パーセントに変換
percentage(小数点)
  1. 「chapter03」 › 「function」 › 「_sass」フォルダ内にある「common.scss」ファイルを開く
  2. 下記のsassのコードを追加する
chapter03/function/_sass/common.scss
$content-width: 960px;

// 数値に関する関数
.l-main  {
  // パーセントに計算
  width: percentage( 690px/$content-width );
}

.l-sidebar  {
  width: percentage( 240px/$content-width );
}
  1. 上書き保存
  2. 「chapter03」 › 「function」 › 「css」フォルダ内に下記の「common.css」ファイルが出来上がっていることを確認
コンパイル結果（chapter03/function/css/common.css）
.l-main {
  width: 71.875%;
}

.l-sidebar {
  width: 25%;
}

色に関する関数を使ってみよう。

lighten() ・・・ 指定した色コードを明るくする
lighten(色, 明るくする割合)
darken() ・・・ 指定した色コードを暗くする
darken(色, 暗くする割合)
  1. 「chapter03」 › 「function」 › 「_sass」フォルダ内にある「common.scss」ファイルを開く
  2. 下記のsassのコードを追加する
chapter03/function/_sass/common.scss
$content-width: 960px;
$main-color: #9DBF4A;

// 数値に関する関数
.l-main  {
  // パーセントに計算
  width: percentage( 690px/$content-width );
}

.l-sidebar  {
  width: percentage( 240px/$content-width );
}

// 色に関する関数
.button {
  background-color: $main-color;

  &:hover {
    // 指定した色の明度を上げる
    background-color: lighten($main-color, 10%);
  }

  // 指定した色の明度を下げる
  &:active {
    background-color: darken($main-color, 10%);
  }
}
  1. 上書き保存
  2. 「chapter03」 › 「function」 › 「css」フォルダ内に下記の「common.css」ファイルが出来上がっていることを確認
コンパイル結果（chapter03/function/css/common.css）
.l-main {
  width: 71.875%;
}

.l-sidebar {
  width: 25%;
}

.button {
  background-color: #9DBF4A;
}

.button:hover {
  background-color: #b1cc70;
}

.button:active {
  background-color: #809e38;
}

まとめ@extendや@mixinなど、
使えれば超便利。

Sassには、スタイルの継承する@extendや、
スタイルを定義する@mixinなどが使える。

  • スタイルを継承する時は@extendを使う
  • スタイルを定義する時は@mixinを使う
  • 数値や色に関する便利な関数がたくさんある。