1

これが可能かどうか誰かが知っていますか：

ブランドカラーを$brand: #00cccc;

ただし、1ページだけで変更したいので、そのページは本体のクラスによって定義されます。

body class="purple"

今、私の心はこれが理想的だと考えています：

body.$class { 
    @if $class == 'purple'
    { 
        $brand = #ff0033;
    }
    @else 
    {
        $brand = #00cccc;
    }
}

しかし、それはまったく正しい構文ではありません。

これは同じようにできることですか？

4

2 に答える 2

3

このようなものをお探しですか？

@each $class in purple, none {
  $brand: #00cccc;
  $selector: 'body';
  @if $class == purple {
    $brand: #ff0033;
    $selector: 'body.' + $class;
  }
  #{$selector}{
    /* Use $brand */
  }
}
于 2013-02-21T11:34:06.277 に答える
0

そのために作成できる@ifステートメントがあるとは思いません。LESSでは、同じ変数を内部body.purpleで再宣言でき、そのブロック内でのみ適用されますが、Sass / Scssで再宣言すると、変数がグローバルに変更されます。これは理想的ではないかもしれませんが、変数を2回再宣言することができます。1回は紫色の場合は上部で、もう1回はデフォルト値に戻すために下部で行います。

scss

// Global Variables
$blue: #0cc;
$purple: #f03;
$brand: $blue;

body {
    color: $brand; // blue
}

.purple {
    $brand: $purple;

    color: $brand; // now purple
    // all other styles

    $brand: $blue;
}

.test {
    color: $brand; // back to blue
}

css出力

body {
  color: #00cccc;
}

.purple {
  color: #ff0033;
}

.test {
  color: #00cccc;
}

これは、LESSとSassの可変スコープの違いに関する記事です。http://blog.freeside.co/post/41774744757/less-vs-sass-variable-scopes

于 2013-02-19T06:17:17.427 に答える