特殊関数

CSSは多くの関数を定義しており、そのほとんどはSassの通常の関数構文で問題なく動作します。これらは関数呼び出しとして解析され、プレーンCSS関数に解決され、そのままCSSにコンパイルされます。ただし、いくつかの例外があり、SassScript式として解析できない特殊な構文があります。すべての特殊関数呼び出しは、引用符なし文字列を返します。

url()url() パーマリンク

url() 関数はCSSでよく使用されますが、その構文は他の関数とは異なり、引用符付きまたは引用符なしのURLを取ることができます。引用符なしのURLは有効なSassScript式ではないため、Sassはそれを解析するために特別なロジックを必要とします。

url()の引数が有効な引用符なしURLの場合、Sassはそれをそのまま解析しますが、展開を使用してSassScript値を挿入することもできます。有効な引用符なしURLでない場合（たとえば、変数または関数呼び出しが含まれている場合）、通常のプレーンCSS関数呼び出しとして解析されます。

プレイグラウンド

SCSS構文

$roboto-font-path: "../fonts/roboto";

@font-face {
    // This is parsed as a normal function call that takes a quoted string.
    src: url("#{$roboto-font-path}/Roboto-Thin.woff2") format("woff2");

    font-family: "Roboto";
    font-weight: 100;
}

@font-face {
    // This is parsed as a normal function call that takes an arithmetic
    // expression.
    src: url($roboto-font-path + "/Roboto-Light.woff2") format("woff2");

    font-family: "Roboto";
    font-weight: 300;
}

@font-face {
    // This is parsed as an interpolated special function.
    src: url(#{$roboto-font-path}/Roboto-Regular.woff2) format("woff2");

    font-family: "Roboto";
    font-weight: 400;
}
プレイグラウンド

Sass構文

$roboto-font-path: "../fonts/roboto"

@font-face
    // This is parsed as a normal function call that takes a quoted string.
    src: url("#{$roboto-font-path}/Roboto-Thin.woff2") format("woff2")

    font-family: "Roboto"
    font-weight: 100


@font-face
    // This is parsed as a normal function call that takes an arithmetic
    // expression.
    src: url($roboto-font-path + "/Roboto-Light.woff2") format("woff2")

    font-family: "Roboto"
    font-weight: 300


@font-face
    // This is parsed as an interpolated special function.
    src: url(#{$roboto-font-path}/Roboto-Regular.woff2) format("woff2")

    font-family: "Roboto"
    font-weight: 400

CSS出力

@font-face {
  src: url("../fonts/roboto/Roboto-Thin.woff2") format("woff2");
  font-family: "Roboto";
  font-weight: 100;
}
@font-face {
  src: url("../fonts/roboto/Roboto-Light.woff2") format("woff2");
  font-family: "Roboto";
  font-weight: 300;
}
@font-face {
  src: url(../fonts/roboto/Roboto-Regular.woff2) format("woff2");
  font-family: "Roboto";
  font-weight: 400;
}

element()、progid:...()、および expression()element()、progid:…()、および expression() パーマリンク

互換性 (calc())
Dart Sass
バージョン <1.40.0 から
LibSass
✗
Ruby Sass
✗

LibSass、Ruby Sass、および1.40.0より前のバージョンのDart Sassは、calc()をelement()のような特殊な構文関数として解析します。

Dart Sassバージョン1.40.0以降は、calc()を計算として解析します。

互換性 (clamp())
Dart Sass
バージョン >=1.31.0 <1.40.0 から
LibSass
✗
Ruby Sass
✗

LibSass、Ruby Sass、および1.31.0より前のバージョンのDart Sassは、clamp()をプレーンCSS関数として解析し、その中で特殊な構文をサポートしません。

1.31.0から1.40.0までのDart Sassバージョンは、clamp()をelement()のような特殊な構文関数として解析します。

Dart Sassバージョン1.40.0以降は、clamp()を計算として解析します。

element()関数はCSS仕様で定義されており、そのIDは色として解析される可能性があるため、特別な解析が必要です。

expression()とprogid:で始まる関数は、非標準構文を使用するレガシーInternet Explorer機能です。最近のブラウザではサポートされていませんが、Sassは下位互換性のためにこれらを解析し続けます。

Sassでは、これらの関数呼び出しにネストされた括弧を含む*任意のテキスト*を使用できます。展開を使用して動的な値を挿入できることを除いて、何もSassScript式として解釈されません。

プレイグラウンド

SCSS構文

$logo-element: logo-bg;

.logo {
  background: element(##{$logo-element});
}
プレイグラウンド

Sass構文

$logo-element: logo-bg

.logo
  background: element(##{$logo-element})

CSS出力

.logo {
  background: element(#logo-bg);
}