css - Sass：HSLaフォールバックテクニックの使用

Question

SASSでコンパイルされたスタイルシートでHSLaカラー宣言を有効にするための回避策を知っている人はいますか？

この記事でChrisCoyierが説明した理由で、HSLaを使用したいと思います。Modernizr Docsで推奨されているフォールバック手法は、ブラウザをサポートするために、最初に16進値を宣言し、次にHSLa値を宣言することです。

ただし、Sassが現在hsla（）インスタンスメソッドを実装している方法では、この手法を使用できません。すべてのHSLa値は16進数にコンパイルされます。つまり、16進数の色が繰り返されるだけです。

Sassカラー変数を文字列として定義しようとしましたが、スタイルシートで引用符で囲まれた文字列にコンパイルされます。

Sassを使用してHSLa出力を取得するためのハックを誰かが提案できますか？

score 3 · Accepted Answer

文字列にしてから引用符を外すことができます。これにより、Sass hsla（）関数が呼び出されなくなります。

.test {
    background-color: #e2ecf0; /* Fallback */
    background-color: unquote("hsla(190, 30%, 94%, 1)"); 
}

生成：

.test {
  background-color: #e2ecf0;
  /* Fallback */
  background-color: hsla(190, 30%, 94%, 1);
}

score 1 · Accepted Answer

#{}補間（）と引用符を使用することもできます。

.test {
    background-color: #e2ecf0; // Fallback
    background-color: #{"hsla(190, 30%, 94%, 1)"}; 
}

2 に答える 2