时间戳

首页 > 解决方案 > Sass Themes - 是否可以使用变量创建样式？

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

问题描述

我是 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 中创建自己的框架。

任何信息将不胜感激！

最诚挚的问候，B

标签： csssass

解决方案

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

   .#{$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 变量类名 ， https: //css-tricks.com/snippets/sass/use-sass-variable-selector/

推荐阅读