Question

我正致力于基于主题的本地化。为此，我正在为每个本地化获取正文标签。我需要根据该类更改所有变量值了解更多

$a: #000;
$b= Arial;

if body has class Australia then
$a: #ff0000;
$b: 'Roboto';

请仅使用scss

进行js代码

Answer 1

使用@import和！默认变量

// –––––––––––––––––––––––––––––––––––––– 
// _style.scss 
// underscore added to prevent compilation 
// ––––––––––––––––––––––––––––––––––––––

$color      : red   !default;
$font-family: Arial !default; 

.foo { color: $color; }
.bar { font-family: $font-family; }



// ––––––––––––––––––––––––––––––––––––––
// style.scss (compile file) 
// ––––––––––––––––––––––––––––––––––––––
// redefine variables
$color: blue;
$font-family: Roboto;

// add wrapper if needed (will be added to all selectors)
.australia {
    @import '_style.scss';
}

Answer 2

以下示例使用地图定义不同的主题值。 mixin将每个选择器包装在一个类（map键）中，并创建要在每个选择器中使用的全局变量。

$theme-map:(
  '.australia': (color: blue, font-family: Roboto),
  '.denmark'  : (color: red,  font-family: Arial)    
);


@mixin theme {
  @each $class, $map in $theme-map {
    #{$class} & { 
      $color:       map-get($map, color)       !global;
      $font-family: map-get($map, font-family) !global;
      @content;
    }
  }
}



.foo {
  @include theme {
    color: $color;
    font-family: $font-family;
  }
}


.bar{
  @include theme {
    background-color: $color;
  }
}

输出：

.australia .foo {
  color: blue;
  font-family: Roboto;
}
.denmark .foo {
  color: red;
  font-family: Arial;
}

.australia .bar {
  background-color: blue;
}
.denmark .bar {
  background-color: red;
}

PS。在不久的将来，CSS变量将使用变量继承来简化此类工作。

.australia {
   --color: red;
   --font-family : Arial;
}

.denmark {
   --color: blue;
   --font-family : Roboto;
}



.foo {
   color: var(--color);
   font-family: var(--font-family);
}

.bar {
   backgound-color: var(--color);
}

根据身体类

2 个答案: