上村 光星

Sass 3.3で追加された「関数」や「変更点」のまとめ解説

sass-2 前二回の記事では、Sass 3.3で追加された「&」の新機能と@at-root新しいデータタイプ「マップ」について解説しました。

最後となる今回は、新しく追加された関数やいくつかの変更点を解説します。少し長くなりましたので目次を作りました。気になるところからお読みください。

新しく追加された関数

変更点

※Source Mapについては、丁寧に解説しているブログ記事が既にいくつかありますので、ここでは省略させていただきます。

文字列用の関数

新たに追加された文字列用の関数は6つあります。

  • str-length($string)
  • str-insert($string, $insert, $index)
  • str-index($string, $substring)
  • str-slice($string, $start-at, [$end-at])
  • to-upper-case($string)
  • to-lower-case($string)

str-length()

str-length()は、文字列の長さを取得する関数です。

次のように使います。

str-insert()

str-insert()は、文字列の中の指定した位置に別の文字列を挿入する関数です。

次のように使います。

第3引数には負の値を指定することができます。その場合、文字列の末尾からの位置になります。

また、第3引数に文字数を超える値を指定した場合は次のようになります。

str-index()

str-index()は、文字列の中に指定された文字列が含まれているかどうかを調べる関数です。含まれている場合は開始位置を、含まれていない場合は0を返します。

次のように使います。

大文字小文字は区別されます。

str-slice()

str-slice()は、文字列から指定した範囲を取り出す関数です。

次のように使います。

第2、3引数には負の値を指定することもできます。負の値を指定した場合、末尾からの位置になります。

第2引数より第3引数の値が小さい場合や同じ値の場合は「””」が返されます。 また、第2、第3引数が同じ位置を示す場合は、第2引数の位置の文字が返されます。

to-upper-case()、to-lower-case()

to-upper-case()は文字列を大文字に、to-lower-case()は文字列を小文字にする関数です。

次のように使います。

リスト用の関数

新たに追加されたリスト用の関数は2つあります。

  • list-separator($list)
  • set-nth(($list, $n, $value)

list-separator()

list-separator()は、リストのセパレーターを返す関数です。

次のように使います。

list-separator()の引数は1つなので、カンマ区切りのリストを上記のように直接指定する場合は、括弧(())で囲む必要があるので注意してください。

リストの要素が2つよりも少なく、セパレーターもない場合はspaceを返します。

set-nth()

set-nth()は、n番目の要素を指定した値に置き換えた新しいリストを返す関数です。

次のように使います。

call()

call()は、動的に関数を呼ぶことができる関数です。 呼べるのは、Sassに組み込まれている関数とユーザーが定義した関数とCSSの関数です。

次のコードは、2つの引数を足した値を返すというサンプル用の関数です。

通常では次のように利用します。

call()を使うと、次のようにしてsum()を利用することができます。

また、キーワード引数を指定した場合、それはそのまま第1引数で指定した関数に渡されるため、次のようにすることもできます。

call()の使い方次第では、より汎用性をもったミックスインや関数をつくることができそうです。

unique-id()

一度にコンパイルされたファイル内でユニークな、「u」から始まる9桁の文字列を返す関数です。文字列はコンパイルするたびに変わります。

変数、ミックスイン、関数の存在を調べる関数

  • variable-exists($name)
  • global-variable-exists($name)
  • function-exists($name)
  • mixin-exists($name)

variable-exists()

variable-exists()は、現在のスコープとグローバルスコープに指定された変数があるかどうかを調べる関数です。指定された変数がある場合はtrueを、ない場合はfalseを返します。

次のように使います。

global-variable-exists()

global-variable-exists()は、指定されたグローバル変数があるかどうか調べる関数です。指定された変数がある場合はtrueを、ない場合はfalseを返します。

次のように使います。

function-exists()

function-exists()は、関数があるかどうか調べる関数です。

次のように使います。

mixin-exists()

mixin-exists()は、ミックスインがあるかどうか調べる関数です。

次のように使います。

inspect()

inspect()は、デバッグ用の関数です。

CSSとして有効な値でなければコンパイルエラーになったり、変数に入れたnullやネストしたリストの括弧(())が出力されなかったりと、デバッグが簡単にはできませんでした。inspect()を使うことでこれらの問題を解決できます。

また、@debugにも同じ問題がありましたが、inspect()と同様に値を正しく表示するようになりました。

リスト関連

nth()

nth($list, $n)の$nに負の値を指定できるようになりました。負の値を指定するとリストの末尾からの位置になります。

これにより、リストの最後の値の取得が今までよりも簡単になりました。

リストの最後のカンマ

カンマ区切りのリストで、最後にカンマを記述してもコンパイルエラーにならなくなりました。出力時には最後のカンマは取り除かれます。

また、マップも同じように最後にカンマを記述することができます。

要素が1つしかないリストの生成

これまでは要素が1つしかないリストを作るのはかなり手間でした。

これからは次のようにするだけでリストとして扱われます。

ただし、カンマ区切りのリストになるので、スペース区切りのリストにしたい場合は次のようにします。

@each

前回の記事でも少し触れていますが、複数の変数を利用することができるようになりました。

これをコンパイルすると次のようになります。

if()

if()は三項演算子みたいな感じのものですが、これまではなぜかtrue/falseの両方の戻り値を評価していたため少し使い勝手が悪いものでした。これからは、条件の結果がtrueならtrueの戻り値だけ評価するようになります。

@extend

@media内で外にあるセレクタを@extendすると、警告ではなくコンパイルエラーとなるように変更されました。

また、存在しないセレクタを@extendした場合も、警告ではなくコンパイルエラーとなります。!optionalフラグを記述するとコンパイルエラーを回避することができます。

!globalフラグ

ローカル(ネスト内)でグローバル変数と同名の変数に代入する場合、グローバル変数の値が変更されていましたが、それがデフォルトの挙動ではなくなります。そのような場合、将来的には、新しいローカル変数が作られて処理されることになり、グローバル変数を上書きする場合には「!global」フラグをつけて明示することが必要になるようです。Sass 3.3.0.rc.2でも「!global」フラグをつけないと警告が表示されてしまいます。

おわりに

師走だからというわけではありませんが、いろいろと駆け足で解説しました。筆者としてはライブラリに使えるものが増えたので嬉しいのですが、普通の制作には不要なものも少なくないと思います。無理に使ってみるのではなく、必要に応じて取り入れることをお勧めします。

よいお年を。

Powered byNTT Communications

tag list

アクセシビリティ イベント エンタープライズ デザイン ハイブリッド パフォーマンス ブラウザ プログラミング マークアップ モバイル 海外 高速化 Angular2 AngularJS Canvas Chrome Cordova CSS de:code ECMAScript Edge Firefox Google Google I/O Google I/O 2014 HTML5 Conference 2013 html5j IoT JavaScript Microsoft Node.js PhoneGap Polymer SkyWay spdy TypeScript UI UX W3C W3C仕様 Webアプリ Web Components WebGL WebRTC WebSocket