Sass 主题 - 是否可以创建带有变量的样式？

Question

I'm quite new coming over to sass and I'm trying to build my own framework, but I wondered if it's possible to create eg a theme. I know its possible but I'm unsure if its a variable that I need to use or possibly a @mixin or @extend?

I've tried adding this but it doesn't work.

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

It probably seems useless but if I could do this, then it would sure be handy to target all of these main elements if it came to changing the entire font for the theme instead of targeting them all apart from using (body) generally.

I have tried looking up online but doesn't really cover much on creating my own framework in sass.

Any information would be greatly appreciated!

Kindest Regards, B

Answer 1

you can use your class name as variable like:

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

but if you want to custom some style base on your theme you can use condition like following code:

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

}

for more information you can visit following links:

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

Answer 2

Here is a basic idea shown on the example of a dark/light theme.

$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";
}