在Sass中根据类定义variables

我想知道是否可以在Sass中定义一个variables，取决于是否设置了类。 我需要做一些字体typestesting，并希望基于主体类dynamic地改变字体variables$basicFont 。

例如：

 $basicFont: Arial, Helvetica, sans-serif; body { &.verdana { $basicFont: Verdana, sans-serif; } &.tahoma { $basicFont: Tahoma, sans-serif; } } 

有没有可能在Sass中处理这个问题？

Answer 1

不，你要求的东西需要Sass知道DOM。 Sass只能直接编译到CSS，它永远不会被发送到浏览器。

用你的示例代码，你所做的每次都会覆盖$basicFont 。 在版本3.4或更高版本中，您的variables将只存在于其设置的块的范围内。

所以，你唯一真正的select是使用mixins或扩展。

延伸

这是有效的，但只适用于非常简单的情况。

 %font-family { &.one { font-family: Verdana, sans-serif; } &.two { font-family: Tahoma, sans-serif; } } .foo { @extend %font-family; } 

输出：

 .one.foo { font-family: Verdana, sans-serif; } .two.foo { font-family: Tahoma, sans-serif; } 

混入

这是我会build议，如果你想要一个更细粒度的控制哪些variables在哪里使用的方法。

 $global-themes: ( '.one': ('font-family': (Verdana, sans-serif), 'color': red) , '.two': ('font-family': (Tahoma, sans-serif), 'color': blue) ); $current-theme: null; // don't touch, this is only used by the themer mixin @mixin themer($themes: $global-themes) { @each $selector, $theme in $themes { $current-theme: $theme !global; &#{$selector} { @content; } } } @function theme-value($property, $theme: $current-theme) { @return map-get($theme, $property); } .foo { @include themer { font-family: theme-value('font-family'); a { color: theme-value('color'); } } } 

输出：

 .foo.one { font-family: Verdana, sans-serif; } .foo.one a { color: red; } .foo.two { font-family: Tahoma, sans-serif; } .foo.two a { color: blue; }