Sass Themes - 是否可以使用变量创建样式？答案

【问题标题】：Sass Themes - Is it possible to create a style with a variable?Sass Themes - 是否可以使用变量创建样式？
【发布时间】：2020-12-19 14:13:27
【问题描述】：

我是 sass 的新手，我正在尝试构建自己的框架，但我想知道是否可以创建例如主题。我知道它可能，但我不确定它是我需要使用的变量还是@mixin 或@extend？

我试过添加这个，但它不起作用。

$theme1: h1,h2,h3,h4,h5 {font-family:Arial, Helvetica, sans-serif} 
$theme2: h2,h3,h4,h5 {font-family:Arial, Roboto, sans-serif}

这可能看起来没用，但如果我能做到这一点，那么如果要更改主题的整个字体而不是除了一般使用 (body) 之外，将所有这些主要元素作为目标，那肯定会很方便.

我曾尝试在网上查找，但并没有真正涵盖在 sass 中创建自己的框架。

任何信息将不胜感激！

最诚挚的问候，乙

【问题讨论】：

如果我没听错的话，您想根据选择的主题为元素分配样式规则？

标签： css sass

【解决方案1】：

以下是暗/亮主题示例中显示的基本概念。


$theme: light;

@if($theme == light) {
  body {
    color: #000;
    background-color: #fff;
  }
}

@if($theme == dark) {
  body {
    color: #fff;
    background-color: #000;
  }
}

@if($theme != light) and ($theme != dark){
  @error "theme is either null or invalid value";
}

【讨论】：

【解决方案2】：

你可以使用你的类名作为变量，比如：

   .#{$theme1} {
   h1,h2,h3,h4,h5 {font-family:Arial, Helvetica, sans-serif} 
}

但是如果你想根据你的主题自定义一些样式，你可以使用如下代码的条件：

    body {
    

    @if $theme1 {
        // Manually use the if/else instead of the mixin
        h1,h2,h3,h4,h5 {font-family:Arial, Helvetica, sans-serif} 
    }
    @else {
        // Otherwise 
        h2,h3,h4,h5 {font-family:Arial, Roboto, sans-serif}
    }

}

有关更多信息，您可以访问以下链接：

SCSS variable class name , https://css-tricks.com/snippets/sass/use-sass-variable-selector/

【讨论】：