Sass syntax

Summarizes the train of thought

1. Define theme color variables
2. A theme library that defines theme colors
3. using@mixinMixer and@eachLoop theme library, set the parent class name, then loop corresponding color corresponding style, usemap-mergeAnd merge.
4. usingmap-getGets the corresponding value value of key
5. Enter the class name style you want to define and call the two methods encapsulated above.

Variable declarations

• Declare the Sass variable with the $plus variable name, for example

  $hight-light: red;
  Copy the code

  • Note: If a variable is defined in any {}(brackets), it can only be used in this {}(brackets)

@mixinDefine list functions, methods

 @mixin mycolor($color: blue) {
     background: $color@content// similar to slot}Copy the code

@content(placeholder)

• Used in@mixinInside, when set@contentAfter use@includeWhen called, the following {} contents are inserted (replaced) (similar to slots)

@includecall@mixinDefine list functions or methods

.home {
    @include mycolor {
        color: red}} // Compiled.home{
    background:blue;
    color:red
}
Copy the code

map-merge($map1,$map2)will$map1and$map2Merge into a new list function

@mixin flex-ui {
    dispaly: flex
};
@mixin justify-content {
    justify-content: center
};
$map:map-merge(flex-ui, context-content) // A new list function is compiled$map
$map:(
    display: flex;
    justify-content: center
)
Copy the code

map-get($map1,$key)To obtain$map1In the list function$keyThe value of the attribute name

$value:map-get($map.'display');

/ / the compiled
$value:flex
Copy the code

@function name (){} Defines the function

@function themed($key) {
    @return map-get($themes.$key)}Copy the code

Sass skin changer

HTML part

<template>
<div class="father" :class="'theme-' + color">
  <div class="home">
    <header>
      <i class="icon-menu"></i>
      <span>Sass avi</span>
      <i class="icon-more"></i>
    </header>
    <div class="sel-box">
      <select v-model="color">
        <option class="cell" value="default">Click on the</option>
        <option class="cell" value="red">red</option>
        <option class="cell" value="green">green</option>
        <option class="cell" value="purple">purple</option>
        <option class="cell" value="orange">orange</option>
      </select>
    </div>
  </div>
</div>
</template>

<script>
export default {
name: "Home".data() {
  return {
    color: "red"}; }};</script>
Copy the code

SCSS part

<style lang="scss" scoped>
* {
margin: 0;
padding: 0;
}
html {
font-size: 13.333 vw;
}

// Write reusable common styles in general
@mixin flex-ui {
display: flex;
}
@mixin justify-content {
justify-content: space-between;
}
@mixin align-items {
align-items: center;
}
// The main library corresponds to minxin
$black: black;
$red: red;
$green: green;
$blue: blue;
$orange: orange;
$purple: purple;
// Custom theme library, list function, list function put attribute name and attribute value
$thems-color: (
black: (
  color: $black,
  border: 1px solid $black,
  background: $black,
),
red: (
  color: $red,
  fontSize: 0.8 rem,
  border: 1px solid $red,
  background: $red,
),
green: (
  color: $green,
  fontSize: 0.3 rem,
  border: 1px solid $green,
),
blue: (
  color: $blue,
  border: 1px solid $blue,
  background: $blue,
),
orange: (
  color: $orange,
  border: 1px solid $orange,
  background: $orange,
),
purple: (
  color: $purple,
  border: 1px solid $purple,
  background: $purple,),);$themesCol: ();
@mixin themesColor() {
// iterate through each loop,

@each $name.$map in $thems-color {
  .theme-# {$name} and {@each $key.$value in $map {
      $themesCol: map-merge(
        $themesCol,
        (
          $key: $value,))! global; }@content; }}}@function themed($keys) {
@return map-get($themesCol.$keys);
}
[class*="icon-"] {
width: 0.5 rem;
height: 0.5 rem;
display: block;
@include themesColor {
  background-color: themed("background"); }}.home {
header {
  @include flex-ui;
  @include justify-content;
  @include align-items;
  font-size: 0.36 rem;
  background: #ccc;
  height: 0.8 rem;
  @include themesColor {
    color: themed("color");
    border: themed("border");
    font-size: themed("fontSize");
  }
}
}
</style>
Copy the code