人気記事

  1. JSでiOSにも配慮した背景固定なスクロール対応のモーダルウィンドウ

  2. CSSで游ゴシックやメイリオなどのfont-familyを指定するときのベストプラクティス

  3. CSSで簡単に縁取りされたアウトライン文字を作る

  4. IE8〜11/Edge12〜の各バージョンに対応したCSSハックまとめ

  5. JSでtouchstartとclickイベントを2回発生させないようにしつつ同時に指定する

  6. CSSでスクロールバー非表示とJSでスクロールバーのデザインをカスタマイズする

  7. SVGでtext要素を上下左右中央寄せする

  8. 22個のサンプルから学ぶCSSのnth-child()を使った番目を指定するテクニック

  9. ドラッグ＆ドロップで要素を並び替えることができるSortable.js

  10. ネストや親セレクタの参照など基本的な拡張機能について学ぼう

#4 ｢SCSS入門講座｣ データ型と演算

SCSSを理解するためには データ型 を適切に理解しておく必要があります。また、演算は少し注意する点があるので、詳しく解説していきます。

データ型

SCSSには全部で 8種類 のデータ型があります。詳しい使い方等は後ほど説明するので、まずはこんな風に種類を分けることができるものと思っておいてください。

Number型（数値）


1.2, 13, 10px

数に関するものは 単位 があるものも含め、すべて Number型 になります。

String型（文字列）


"foo", 'bar', baz

ダブルクォーテーションやシングルクォーテーションで囲まれているものも囲まれていないものも String型 になります。

Color型（色）


blue, #04a3f9, rgba(255, 0, 0, 0.5)

色に関するものはすべて Color型 になります。

Boolean型（真偽）


true, false

true または false のときは Boolean型 になります。

Null型（値なし）


null

値がないときを表す null のときは Null型 になります。

List型（配列）


1.5em 1em 0 2em
Helvetica, Arial, sans-serif
(1.5em 1em 0 2em)
(1.5em, 1em, 0 2em)
[1.5em 1em 0 2em]

カンマ か スペース で区切られたものは List型 になります。他にも配列全体を () （丸括弧） や [] （角括弧） で囲むこともできます。

Map型（連想配列）


(key1: value1, key2: value2)

配列全体を () （丸括弧） で囲み、key （キー）と value （値）をセットで指定します。

演算

SCSSでは計算式を記述するとコンパイル時に 計算後の結果 に変換してくれる便利な機能があります。

加算


.main {
  font-size: 16px + 5px;
}


.main {
  font-size: 21px;
}

加算の結果に変換されていることが確認できます。


.main {
  &::before {
    content: '文字列の' + '連結';
  }
}


.main::before {
  content: "文字列の連結";
}

また、 + 演算子はこのように 文字列の連結 に使うこともできます。

減算


.main {
  font-size: 16px - 5px;
}


.main {
  font-size: 11px;
}

減算を使う際には　- の前後には スペース を入れる必要があります。他の演算子のときはその必要はありませんが、混乱のないように統一しておくといいと思います。

乗算


.main {
  font-size: 16px * 5;
}


.main {
  font-size: 80px;
}

乗算のときは、 16px * 5px のように 単位を複数記述 しないように注意してください。 16px * 5px はコンパイル時に、 80px * px という風に解釈されてしまいます。もちろん px * px という単位はCSSには存在しないのでエラーとなります。

除算


.main {
  font-size: (16px / 5);
}


.main {
  font-size: 3.2px;
}

除算だけ他と違って () で囲まれています。


.main {
  border-radius: 100px 25px 50px 50px / 50px 25px 50px 25px;
}


.main {
  /* こうなると困る */
  border-radius: 100px 25px 50px 1px 25px 50px 25px;
}

このようにCSSでは 区切り として スラッシュ を用います。 50px / 50px の部分が 除算 と判定されてしまうと計算されなくてもいいところまで計算されてしまう恐れがあります。そこで、SCSSでは次の3つの条件のどれかに該当した場合、除算を行うようになっています。

  • 値（またはその一部）に、変数が使われているか関数の返り値の場合
  • 値が () で囲まれている場合（ただし、 List型 の () は除く）
  • 値が他の演算子と一緒に使われている場合

.main {
  font: 10px / 8px;         // これはCSSのスラッシュ
  $width: 1000px;
  width: $width / 2;        // 値（またはその一部）に変数が使われている
  width: round(1.5) / 2;    // 値（またはその一部）に関数の返り値が使われている
  width: (500px / 2);       // 値が()で囲まれている
  width: 100px + 500px / 2; // 値が他の演算子と一緒に使われている
}


.main {
  font: 10px / 8px;
  width: 500px;
  width: 1;
  width: 250px;
  width: 350px;
}

3条件ありますが、基本的には () で囲めば大丈夫です。

剰余算


.main {
  width: 10px % 3;  // 10　÷ 3 = 3...1
}


.main {
  width: 1px;
}

あまり使う機会はないかもしれませんが、 余り を算出してくれます。

演算は同じ単位にする


.main {
  font-size: 1em + 15px; // エラー
}

単位が違うとエラーになります。


.main {
  font-size: calc(1em + 15px);
}

単位が違うものどうし計算したい場合は、CSSの calc() 関数を使うと実現することができます。

色の演算


.main {
  color: #010203 + #040506;
}


.main {
  color: #050709;
}

01 + 04 = 05、 02 + 05 = 07、 03 + 06 = 09 という風に計算してくれます。


.main {
  color: #010203 * 2;
}


.main {
  color: #020406;
}

また、 乗算 も行うことができます。


.main {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}


.main {
  color: rgba(255, 255, 0, 0.75);
}

RGBA どうしも加算することができますが、 アルファ値（ここでは 0.75 ）は同じである必要があります。

このように、色の計算もできますがSCSSには 色に関する便利な関数 が用意されているので、後ほどそれについても紹介します。

CSS本執筆しました！！！