Sass

関数

1 つ前の記事でpadding: ...だけを返す Mixin を作りましたが、もしかしたらそういう関数を使用したほうが適任かもしれません。関数を使うと値を加工することができます。

関数は@functionを使って定義できます。また@returnを使って何かしら値を返すようにする必要があります。(JavaScript などに似てます)

@function gutter($type) {
  // 他で使わないなら入れちゃっても
  $gutters: (
    sp: 0 0.3em,
    pc: 0 1em
  );

  // not + $gutters に @type (spかpc) が定義されているか
  // -> $type が sp と pc 以外の値の時
  @if not map-has-key($gutters, $type) {
    @error "#{map-keys($gutters)}を指定してください";
  }

  @return map-get($gutters, $type);
}

div {
  padding: gutter('sp');
}

@media screen and (min-width: 768px) {
  div {
    padding: gutter('pc');
  }
}

制御構文

@if

状態には真偽値(boolean)を返すようにします。また、@else if@elseは両略できます。

@if 状態 {
  // ...
} @else if 状態 {
  // ...
} @else {
  // ...
}

@each

連想配列などを回したりできます。汎用セレクタを量産する時とか。

$colors: (
  success: #018952,
  danger: #ed5e6b
);

@each $key, $color in $colors {
  .button-#{$key} {
    background: $color;
  }
}
/* 結果 */
.button-success {
  background: #018952;
}

.button-danger {
  background: #ed5e6b;
}

@for

同じように色々返す時。

@for $i from 1 through 3 {
  .mt-${i} {
    margin-top: $ipx
  }
}
/* 結果 */
.mt-1 {
  margin-top: 1px;
}

.mt-2 {
  margin-top: 2px;
}

.mt-3 {
  margin-top: 3px;
}

値を決めたいようなものは@function化すると Mixin の巨大化も防げるかもしれません。

役に立つカラー関数

Sass ではいくつか便利な関数が最初から定義されているので、それらを簡単に使うことができます。
むしろ関数の為に Sass を使っているようなものなのでぜひ使いましょう。

mix($color1, $color2, [$weight])

2つの色を混ぜます

color: mix(#fff, #000); // #888

lighten($color, $amount)darken($color, $amount)

それぞれ白か黒と混ぜる関数です。ホバー時に色を白く(黒く)したい時に手っ取り早く使えます。

color: lighten(#000, 30%); // #4d4d4d;
color: darken(#fff, 20%); // #ccc;

adjust_hue($color, $degrees)

色相を回転させます。

color: adjust_hue(#f00, 90%); // #80ff00

complement($color)

補色を取得。

color: complement(blue); // yellow

saturate($color, $amount)desaturate($color, $amount)

鮮やかにするか、鈍くするか。

color: saturate(blue, 30%); // #0d0df3;
color: desaturate(blue, 100%); // #888;

// `grayscale` と同じ
color: grayscale(blue); // #888;

この辺に色々定義してあります。