preface

Use scenario: Dark mode, skin change

Why CHOOSE SASS:

  • Be developer friendly
  • extensible

use

Step 1: Create a theme

Writing style

$common: (
// Plain mode style
),
$dark: (
// Dark mode style
)
Copy the code

Step 2: Write mixins

That function

@mixin themeMake($component){ .theme-normal .#{$component} { @content($normal); } .theme-dark .#{$component} { @content($dark); }}Copy the code

@mixin, @include: www.runoob.com/sass/sass-m…

Step 3: Use in style sheets

Using the function

@include themeMake(yourStyle) using ($theme) {
    color: map-deep-get($theme, "common"."note-font");
}
Copy the code