今回はSassで使えるメソッドについてまとめていきたいと思います。Sassではオリジナルでいろんな処理を作成することもできますが、組み込みモジュールとしてデフォルトで用意されているものがいくつかあります。その中でも比較的利用頻度が高そうなものをいくつかピックアップしてみました。カテゴリ別に順番でまとめていますので、早速見ていきましょう。  

色を扱うメソッド

明度や彩度、色味などを自由に調整できるメソッドが揃っています。引数に指定した値をもとに自動的に計算されるので、本来は複雑な計算処理が必要となるのですが、Sassのモジュールで自動的に行なってくれるのでとても便利ですね。   lighten() 特定の色を指定した度合いに明るくするメソッドです。第一引数にベースの色を、第二引数に明るくする度合いを%で指定します。

$default: #ff0000;
color: lighten($default, 30%)

// Compiled
color: #ff9999;

  darken() 特定の色を指定した度合いに明るくするメソッドです。第一引数にベースの色を、第二引数に暗くする度合いを%で指定します。

$default: #ff0000;
color: darken($default, 30%)

// Compiled
color: #660000;

  saturate() 特定の色を指定した度合いに鮮やかにするメソッドです。第一引数にベースの色を、第二引数に鮮やかにする度合いを%で指定します。

$default: #8a2d2d;
color: saturate($default, 90%)

// Compiled
color: #b70000;

  desaturate() 特定の色を指定した度合いにくすませるメソッドです。第一引数にベースの色を、第二引数にくすませる度合いを%で指定します。

$default: #8a2d2d;
color: desaturate($default, 90%)

// Compiled
color: #5c5c5c;

  adjust-hue() 特定の色を色相環上で指定した位置の色に変更するメソッドです。第一引数にベースの色を、第二引数に色相環上での位置を角度で指定します。

$default: #ff000;
color: adjust-hue($default, 120deg)

// Compiled
color: #00ff00;

  complement() 特定の色の補色を出力するメソッドです。引数に入れた色の色相環上での反対色が出力されます。

$default: #ff000;
color: complement($default)

// Compiled
color: #00ffff;

  mix() 2色間で指定した度合いでの中間色を出力するメソッドです。第一引数と第二引数に基準となる色を指定し、第三引数で双方の色の割合を%で指定します。

$color_1: #f00;
$color_2: #00f;
color: mix($color_1, $color_2, 50%)

// Compiled
color: #800080;

  これらはSassの組み込みモジュールとなるので、下記のように@useを使うことで決められたネームスペースを与えて記述することができます。

@use "sass:color";

color.lighten($color, $amount);
color.darken($color, $amount);
color.saturate($color, $amount);
color.desaturate($color, $amount);
color.adjust($color, $hue, $amount);
color.complement($color);
color.mix($color, $color, $amount);

   

リスト（配列）データを扱うメソッド

一般的なプログラミングでいう配列に当たる値となるリストデータを扱います。複数の値をまとめて指定する場合などに便利です。また、@for構文などのループ処理と組み合わせることで、動的に値を変化させることができます。実際の使用例を過去記事「Sassで多重階層の入れ子リストのナンバリングした行頭記号を動的に作成する」でも紹介していますのでご参考にどうぞ。   join() 複数のリスト型の値を結合するメソッドです。第一引数と第二引数にそれぞれ結合させるリスト型の値を指定すると、結合された1つのリスト型の値を返します。

$topCorner: 8px 8px;
$bottomCorner: 4px 4px;
border-radius: list.join($topCorner, $bottomCorner);

// Compiled
border-radius: 8px 8px 4px 4px;

  append() リストの末尾に新しい値を追加するメソッドです。第一引数にベースとなるリスト型の値を、第二引数に末尾へ追加する値を指定します。ベースのリスト型の値の末尾に対象の値が追加された新しいリスト型の値を返します。

background: append(
  (
    #dedede,
    url(./bg_layer_1st.jpg) repeat center center
  ),
  url(./bg_layer_2nd.png) no-repeat left top/contain
);

// Compiled
background: #dedede, url(./bg_layer_1st.jpg) repeat center center, url(./bg_layer_2nd.png) no-repeat left top/contain;

  これらはSassの組み込みモジュールとなるので、下記のように@useを使うことで決められたネームスペースを与えて記述することができます。

@use "sass:list";

list.join($list, $list);
list.append($list, $value);

   

マップデータを扱うメソッド

先ほどのリスト型とよく似ていますが、値にキーがついたオブジェクト型のようなデータであるマップ型の値を扱います。配色やブレークポイントといった複数の変数をまとめて扱う場合によく使われます。Sassではmixinと併用して、キーを指定して値を使い分けるなどのケースがよく見られますね。実際の使用例を過去記事「Sassで@functionとmap-get()を使ったカラーマネジメントを試してみる」などでも紹介していますのでご参考にどうぞ。   map-get() マップ型データに含まれるキーを指定して値を取得するメソッドです。第一引数に対象となるマップ型データを、第二引数に取得したい値のキーを指定すると、そのキーに対応した値を返します。

$colors: (
  "primary": #006DFA,
  "secondary": #616A71,
  "error": #DB2E3D,
  "warning": #FFBA2A
);
background: map-get($colors, "primary");

// Compiled
background: #006DFA;

  map-keys() マップ型データのすべてのキーを取得するメソッドです。引数に指定したマップ型データに含まれるすべてのキーがリスト型の値として返ってきます。単独で使うことはあまり無いようで、マップ型からリスト型にデータを抽出するような形で使われるのではないでしょうか。

$breakpoints: (
  "desktop": 980px,
  "tablet": 768px,
  "mobile": 540px
);
$devices: map-keys($breakpoints);

// Output
$devices; "desktop", "tablet", "mobile";

  map-values() マップ型データのすべてのキーを取得するメソッドです。引数に指定したマップ型データに含まれるすべての値がリスト型の値として返ってきます。こちらも単独で使うことはあまり無いようで、マップ型からリスト型にデータを抽出するような形で使われるのではないでしょうか。

$breakpoints: (
  "desktop": 980px,
  "tablet": 768px,
  "mobile": 540px
);
$widthValues: map-values($breakpoints);

// Output
$widthValues; 980px, 768px, 540px;

  これらはSassの組み込みモジュールとなるので、下記のように@useを使うことで決められたネームスペースを与えて記述することができます。

@use "sass:map";

map.get($map, $key);
map.keys($map);
map.values($map);

   

文字列を扱うメソッド

CSSではあまり登場することのない文字列のデータも専用のメソッドがいくつか用意されています。比較的使用頻度は少ないかもしれませんが、覚えておくと意外なところで活用できそうなので是非覚えておきたいですね。   quote() 引数に入れた値をクオーテーションマークで囲むメソッドです。引数に入れた文字列の値にクオーテーションマークで囲った形で返します。

$typeface: Helvetica;
font-family: quote($typeface);

// Compiled
font-family: "Helvetica";

  str-slice() 文字列を切り取るメソッドです。切り取って残す部分は文字のインデックスで開始と終了の文字を指定します。切り取られた文字列が返ってきます。

$text: "Hello World!!";
content: str-slice($text, 1, 5);

// Compiled
content: "Hello";

  これらはSassの組み込みモジュールとなるので、下記のように@useを使うことで決められたネームスペースを与えて記述することができます。

@use "sass:string";

string.quote($string)
string.slice($string, $startIndex, $endIndex)

  上記で紹介している以外にも組み込みモジュールで用意されているメソッドは色々とあるので、是非調べてみることをお勧めします。その他にも、小数点処理などができる数値を扱うメソッドや、セレクタの内容を調査できるメソッドといった複雑な処理ができるものもたくさん用意されています。詳しくは公式のリファレンスをご参照くださいね。  

---

  今回は、Sassの組み込みモジュールで使える便利な独自メソッドについてまとめてみました。Sassではmixinやfunctionなどを使ってオリジナルの処理を作成できますが、このようにデフォルトでいろんなメソッドが用意されているのでこれを活用するのもいいかもしれませんね。特に色を調整するものは比較的利用度合いも高いのではないでしょうか。   （参考にさせて頂いたサイト） Sass: Built-In Modules