sass - Sass - 複数値ルールでの変数の使用

Question

Sass 変数は次のように使用できます。

!blue = #3bbfce

.content_navigation
  border-color = !blue
  color = !blue - #111

これは、「単一値」変数で非常にうまく機能します。バックグラウンドなどの「複数値」の CSS ルールでは使用できません。

!blue = #3bbfce

//this doesn't work
.content_navigation
  background =!blue url(/path/to/image) 0 0 no-repeat

どうすればいいですか？

Answer 1

受け入れられた答えは、古い非推奨の構文です。Sass 3 の新しい構文を見てみましょう。

http://nex-3.com/posts/94-haml-sass-3-beta-released

これは、インデントされた構文を使用した Sass 3 の方法です。

$blue: #3bbfce

.content_navigation
  background: $blue url(/path/to/image) 0 0 no-repeat

Answer 2

正しいシンタックスは次のようになります。

!blue = #3bbfce

.content_navigation
   background= !blue "url(/path/to/image) 0 0 no-repeat"

SASを楽しもう！