css - より少ないcss：変数の定義

Question

同じHTMLと異なるCSSに基づいてプロジェクトを作成する必要があります。これら2つのプロジェクトのCSS定義を、違いを定義する変数とともに1つのLessファイルにまとめたいと思います。

プロジェクト1：

.userbar {
    background: #fff;
}

プロジェクト2：

.userbar {
    background:url(../images/bg-userbar.png) no-repeat 100% 100%;
}

マージされたLessCodeは次のようになります。

userbar {background: @bg_userbar}

次に、プロジェクト1の色を次のように定義できます。

@bg_userbar: #fff;

しかし、プロジェクト2の場合、これは有効な少ないコードですか？

@bg_userbar: background:url(../images/bg-userbar.png) no-repeat 100% 100%;

助けてくれて本当にありがとうございます！サシャ。

score 4 · Accepted Answer

最初の変数定義はもちろん有効です。2番目の変数定義では、それをエスケープする必要があります。

@bg_userbar: #fff;
@bg_userbar: ~"url(../images/bg-userbar.png) no-repeat 100% 100%";

.userbar {background: @bg_userbar}

score 1 · Accepted Answer

私はこの問題にもう一度時間を費やしました。

@bg_userbar: url(../images/bg-userbar.png) no-repeat 100% 100%;
.userbar {
    background:@bg_userbar;
}

有効なコードが少なく、コンパイルされます

.userbar {
  background: url(../images/bg-userbar.png) no-repeat 100% 100%;
}

しかし、エスケープのヒントに感謝します。必須ではありませんが。

2 に答える 2