文字列

文字列は文字（具体的にはUnicodeコードポイント）のシーケンスです。Sassは、内部構造は同じだがレンダリングが異なる2種類の文字列をサポートしています。引用符付き文字列（例："Helvetica Neue"）と引用符なし文字列（別名*識別子*、例：bold）。これらにより、CSSに表示されるさまざまな種類のテキストが網羅されます。

💡豆知識

string.unquote()関数を使用して、引用符付き文字列を引用符なし文字列に変換できます。また、string.quote()関数を使用して、引用符なし文字列を引用符付き文字列に変換できます。

SCSS

Sass

     PlaygroundSCSS構文@use "sass:string";

@debug string.unquote(".widget:hover"); // .widget:hover
@debug string.quote(bold); // "bold"

     PlaygroundSass構文@use "sass:string"

@debug string.unquote(".widget:hover")  // .widget:hover
@debug string.quote(bold)  // "bold"

エスケープエスケープパーマリンク

すべてのSass文字列は、標準のCSS エスケープコードをサポートしています。

A～Fの文字または0～9の数値以外の文字（改行文字も！）は、その前に\を付けることで文字列の一部として含めることができます。
Unicodeコードポイント番号を16進数で記述することで、文字列の一部に任意の文字を含めることができます。Unicode番号の終わりを示すために、コードポイント番号の後にスペースを含めることもできます。

  SCSS

  Sass

       PlaygroundSCSS構文@debug "\""; // '"'
@debug \.widget; // \.widget
@debug "\a"; // "\a" (a string containing only a newline)
@debug "line1\a line2"; // "line1\a line2"
@debug "Nat + Liz \1F46D"; // "Nat + Liz 👭"

       PlaygroundSass構文@debug "\""  // '"'
@debug \.widget  // \.widget
@debug "\a"  // "\a" (a string containing only a newline)
@debug "line1\a line2"  // "line1\a line2" (foo and bar are separated by a newline)
@debug "Nat + Liz \1F46D"  // "Nat + Liz 👭"

💡豆知識

文字列に表示できる文字の場合、Unicodeエスケープを記述しても、文字自体を記述した場合とまったく同じ文字列になります。

引用符付き引用符付きパーマリンク

引用符付き文字列は、"Helvetica Neue"のように、シングルまたはダブルクォーテーションで囲んで記述します。それらには補間を含めることができ、次のもの以外のエスケープされていない文字を含めることができます。

\は\\としてエスケープできます。
'または"（その文字列の定義に使用されたもの）は、\'または\"としてエスケープできます。
改行文字は\a （末尾のスペースを含む）としてエスケープできます。

引用符付き文字列は、元のSass文字列と同じ内容を持つCSS文字列に確実にコンパイルされます。正確な形式は、実装または構成によって異なる場合があります。ダブルクォーテーションを含む文字列は、"\""または'"'にコンパイルされ、非ASCII文字はエスケープされる場合とされない場合があります。ただし、すべてのブラウザを含む、すべての標準に準拠したCSS実装で同じように解析される必要があります。

  SCSS

  Sass

       PlaygroundSCSS構文@debug "Helvetica Neue"; // "Helvetica Neue"
@debug "C:\\Program Files"; // "C:\\Program Files"
@debug "\"Don't Fear the Reaper\""; // "\"Don't Fear the Reaper\""
@debug "line1\a line2"; // "line1\a line2"

$roboto-variant: "Mono";
@debug "Roboto #{$roboto-variant}"; // "Roboto Mono"

       PlaygroundSass構文@debug "Helvetica Neue"  // "Helvetica Neue"
@debug "C:\\Program Files"  // "C:\\Program Files"
@debug "\"Don't Fear the Reaper\""  // "\"Don't Fear the Reaper\""
@debug "line1\a line2"  // "line1\a line2"

$roboto-variant: "Mono"
@debug "Roboto #{$roboto-variant}"  // "Roboto Mono"

💡豆知識

補間によって引用符付き文字列が別の値に挿入されると、引用符は削除されます！これにより、クォーテーションを追加せずにスタイルルールに挿入できるセレクターを含む文字列を簡単に記述できます。

引用符なし引用符なしパーマリンク

引用符なし文字列は、CSS 識別子として記述され、以下の構文図に従います。それらには補間をどこにでも含めることができます。

鉄道図は、2018年W3C®（MIT、ERCIM、慶應義塾大学、北航）の著作権です。W3Cの責任、商標、および許容的なドキュメントライセンスのルールが適用されます。

  SCSS

  Sass

       PlaygroundSCSS構文@debug bold; // bold
@debug -webkit-flex; // -webkit-flex
@debug --123; // --123

$prefix: ms;
@debug -#{$prefix}-flex; // -ms-flex

       PlaygroundSass構文@debug bold  // bold
@debug -webkit-flex  // -webkit-flex
@debug --123  // --123

$prefix: ms
@debug -#{$prefix}-flex  // -ms-flex

⚠️ご注意ください！

すべての識別子が引用符なし文字列として解析されるわけではありません。

CSSの色名は色として解析されます。
nullはSassのnull値として解析されます。
trueとfalseはブール値として解析されます。
not、and、orはブール演算子として解析されます。

このため、特に引用符なし文字列を使用するCSSプロパティの値を記述する場合を除き、引用符付き文字列を記述することをお勧めします。

引用符なし文字列のエスケープ引用符なし文字列のエスケープパーマリンク

Dart Sass: 1.11.0以降
LibSass: ✗
Ruby Sass: ✗

LibSass、Ruby Sass、および古いバージョンのDart Sassは、識別子のエスケープを正規化しません。代わりに、引用符なし文字列のテキストは、ユーザーが記述したテキストとまったく同じになります。たとえば、\1F46Dと👭は同等とは見なされません。

引用符なし文字列が解析されると、エスケープのリテラルテキストが文字列の一部として解析されます。たとえば、\a は文字\、a、およびスペースとして解析されます。ただし、CSSで意味が同じ引用符なし文字列が同じ方法で解析されるようにするために、これらのエスケープは*正規化*されます。各コードポイントについて、エスケープされているかどうかにかかわらず

有効な識別子文字の場合は、エスケープせずに引用符なし文字列に含まれます。たとえば、\1F46Dは引用符なし文字列👭を返します。
改行文字またはタブ以外の印刷可能な文字の場合は、\の後に含まれます。たとえば、\21 は引用符なし文字列\!を返します。
それ以外の場合は、末尾にスペースが付いた小文字のUnicodeエスケープが含まれます。たとえば、\7Fxは引用符なし文字列\7f xを返します。

  SCSS

  Sass

       PlaygroundSCSS構文@use "sass:string";

@debug \1F46D; // 👭
@debug \21; // \!
@debug \7Fx; // \7f x
@debug string.length(\7Fx); // 5

       PlaygroundSass構文@use "sass:string"

@debug \1F46D  // 👭
@debug \21  // \!
@debug \7Fx  // \7f x
@debug string.length(\7Fx)  // 5

文字列インデックス文字列インデックスパーマリンク

Sassには、数値（*インデックス*と呼ばれる）を受け取ったり返したりする多くの文字列関数があり、文字列の文字を参照します。インデックス1は文字列の最初の文字を示します。これは、インデックスが0から始まる多くのプログラミング言語とは異なります！Sassでは、文字列の終わりを参照することも簡単です。インデックス-1は文字列の最後の文字を、-2は最後から2番目の文字を指し、以下同様です。

  SCSS

  Sass

       PlaygroundSCSS構文@use "sass:string";

@debug string.index("Helvetica Neue", "Helvetica"); // 1
@debug string.index("Helvetica Neue", "Neue"); // 11
@debug string.slice("Roboto Mono", -4); // "Mono"

       PlaygroundSass構文@use "sass:string"

@debug string.index("Helvetica Neue", "Helvetica")  // 1
@debug string.index("Helvetica Neue", "Neue")  // 11
@debug string.slice("Roboto Mono", -4)  // "Mono"

現在のリリース
Dart Sass 1.79.4
LibSass 3.6.6
Ruby Sass ⚰
実装ガイド