2

scss で、コントラストの変更 (本体に変更コントラスト クラスを追加) をクリックして色を変更しようとしています。

私の静的な色は次のようになります:

$primary-color-blue: #2aace2 ;

$mid-blue-color: #2695d2 ;

$ダークブルーカラー: #124b62 ;

コントラストの変更時:

$primary-color-blue: #177eab ;

$mid-blue-color: #1c6f9b ;

$ダークブルーカラー: #124b62 ;

sassのようなものでなければなりません

if(change-contrast) {
//  console.log (get High Constrast Colors)
}
else {
//  console.log (Static Colors)
}

以下のようにしようとしていますが、以下のようにする場合は、すべてのクラスに追加する必要があります。

@mixin branding {
  @each $brand in $brand_clr {
    &.#{nth($brand,1)} {
      $primary-color-blue: #177eab;
      @content;
    }
  }
}

test {
    background: $primary-color-blue;
    @include branding {
      background: $primary-color-blue;
    }
}

これについてあなたの助けに感謝します!!

ありがとう

4

1 に答える 1

4

解決策は、よく構造化されたカラーマップに出くわすと思います。タイプごとに色をグループ化する必要があります (例: スタティック、コントラスト)。次に、重複を避けるために mixin を使用します。

$colors:(
  standard: (
    primary-color-blue: #2aace2,
    mid-blue-color:#2695d2,
    dark-blue-color:#124b62
  ),
  contrasted: (
    primary-color-blue: #177eab,
    mid-blue-color:#1c6f9b,
    dark-blue-color:#124b62
  )
);


@function get-color($key, $type: 'standard'){
  @each $name, $color in map-get($colors, $type){
    @if($key == $name){
      @return $color
    }
  }
}

@mixin get-color($property,$color){
  #{$property}: get-color($color);
  @at-root body.contrasted & {
    #{$property}: get-color($color, contrasted);
  }
}


.className{
  @include get-color(background-color, primary-color-blue)
}

これは出力されます：

.className {
  background-color: #2aace2;
}
body.contrasted .className {
  background-color: #177eab;
}
于 2018-04-13T14:16:06.367 に答える