基于类在Sass中定义变量

我想知道是否可以根据是否设置了类在Sass中定义变量。我需要做一些字体类型测试，并希望根据body类动态更改字体变量

$basicFont

例如：

---

是否有可能在Sass中处理此问题？

否。您要求的是Sass必须了解DOM。Sass仅直接编译为CSS，从不发送到浏览器

对于示例代码，每次只需覆盖

$basicFont

。在3.4版或更高版本中，变量将仅存在于设置它的块的范围内

因此，您唯一的实际选择是使用mixin或extends

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

%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;
}

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

混合 如果您想要更细粒度地控制在何处使用哪些变量，我建议您使用这种方法

$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');
        }
    }
}

输出：

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

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