4

皆さんこんにちは！線形グラデーションの背景に Vaadin 7.1.0 プロジェクトで Sass 変数を使用したいのですが、何らかの理由で機能しません。コード：

$topBarDarkBlue: #5F7FB7;
$topBarLightBlue: #8EABE1;

.title {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $topBarDarkBlue),
    color-stop(100%, $topBarLightBlue));
    background-image: -moz-linear-gradient(bottom, $topBarLightBlue 0%, $topBarDarkBlue 100%);
    width: 100%;
    height: 70px;
}

正しいように見えますが、なぜ機能しないのでしょうか。

4

6 に答える 6

6

実際、勾配セレクター構文のように、SASS 変数を括弧で囲むことができます。あなたがしなければならないのは、次のように、前のハッシュマークと括弧で変数を囲むことだけです:

#{$myVar}

それでおしまい！

于 2014-06-25T17:47:57.610 に答える
0

コードを JSFiddle にコピーすると、グラデーションが機能します。変数を css クラスに入れることも可能です:

.title {
    $topBarDarkBlue: #5F7FB7;
    $topBarLightBlue: #8EABE1;

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $topBarDarkBlue),
    color-stop(100%, $topBarLightBlue));
    background-image: -moz-linear-gradient(bottom, $topBarLightBlue 0%, $topBarDarkBlue 100%);
    width: 100%;
    height: 70px;
}
于 2013-07-05T08:16:54.727 に答える
0

.sass/.scss でグローバルにグラデーションを使用する最良の方法は、ミックスインを使用することです。

グラデーションのミックスインを作成できます：

$topBarDarkBlue: #5F7FB7;
$topBarLightBlue: #8EABE1;

@mixin bg-gradient(){
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $topBarDarkBlue);
background: -moz-gradient(linear, left top, left bottom, color-stop(0%, $topBarDarkBlue);
background: -ms-gradient(linear, left top, left bottom, color-stop(0%, $topBarDarkBlue);
}

あとは、メインの .sass/.scss ファイルで呼び出すだけです。

.title{
@include bg-gradient();
}

最近のプロジェクトの 1 つでこれを行ったことがありますが、Vaadin に基づいていませんでした。これがvaadinで動作するかどうかを確認してください。私はSassの男なので、scssコードの構文を一度チェックしてください。

それがあなたを助けることを願っています

于 2016-05-11T06:37:21.187 に答える
0

誰かがまだ興味を持っているかどうかはわかりませんが、線形勾配宣言で大文字の 16 進数値をコンパイルする sass に問題があるようです。たとえば、これは機能しません。

$colorTop: #EEEEEE;
$colorBottom: #222CCC;

.element { 
  background: linear-gradient($colorTop,$colorBottom); 
}

一方、これは機能します：

$colorTop: #eeeeee;
$colorBottom: #222ccc;

.element { 
  background: linear-gradient($colorTop,$colorBottom); 
}

したがって、この問題が発生している場合は、変数宣言で小文字の 16 進数値を使用してみてください。

于 2019-10-23T15:23:07.773 に答える
0

Vaadin 7.1 の SCSS コンパイラは変数を正しく置換できないように見えるため、変数の代わりに色の値を使用する必要があります。変化する

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $topBarDarkBlue)

に

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5F7FB7)

等...

于 2013-07-05T15:11:30.317 に答える