sass语法

总结思路

1. 定义主题颜色变量
2. 定义主题颜色的主题库
3. 利用@mixin混合器和@each循环主题库，设置父级类名，接着循环对应颜色对应的样式,利用map-merge并合并。
4. 利用map-get的key获取对应值value值
5. 进入需要定义的类名样式下调用封装好的以上两个方法。

变量声明

• 使用$加变量名声明sass变量，例如

  $hight-light: red;
  

  • 注意:如果变量定义在任何的{}（中括号里），则该变量只能在这个{}(中括号)里使用

@mixin定义列表函数、方法

 @mixin mycolor($color: blue) {
     background: $color
     @content//类似于插槽
 }

@content（占位符）

• 用在@mixin里面，当设置@content后用@include调用的时候，后面{}的内容就会插入(替换)里面（类似于插槽）

@include调用@mixin定义列表函数或方法

.home {
    @include mycolor {
        color: red
    }
}

//编译后
.home{
    background:blue;
    color:red
}

map-merge($map1,$map2)将$map1和$map2合并成新的列表函数

@mixin flex-ui {
    dispaly: flex
};
@mixin justify-content {
    justify-content: center
};
$map:map-merge(flex-ui,justify-content)

//编译后得到一个新的列表函数$map
$map:(
    display: flex;
    justify-content: center
)

map-get($map1,$key)获取$map1列表函数中$key属性名的值

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

//编译后
$value:flex

@function name (){}定义函数

@function themed($key) {
    @return map-get($themes,$key)
}

sass换肤实战

html 部分

<template>
<div class="father" :class="'theme-' + color">
  <div class="home">
    <header>
      <i class="icon-menu"></i>
      <span>sass换肤</span>
      <i class="icon-more"></i>
    </header>
    <div class="sel-box">
      <select v-model="color">
        <option class="cell" value="default">点击</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>

scss部分

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

//一般写可复用的公共样式
@mixin flex-ui {
display: flex;
}
@mixin justify-content {
justify-content: space-between;
}
@mixin align-items {
align-items: center;
}
//主体库对应的minxin
$black: black;
$red: red;
$green: green;
$blue: blue;
$orange: orange;
$purple: purple;
//自定义主题库,列表函数，列表函数里放的是属性名和属性值
$thems-color: (
black: (
  color: $black,
  border: 1px solid $black,
  background: $black,
),
red: (
  color: $red,
  fontSize: 0.8rem,
  border: 1px solid $red,
  background: $red,
),
green: (
  color: $green,
  fontSize: 0.3rem,
  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() {
//通过each循环遍历,

@each $name, $map in $thems-color {
  .theme-#{$name} & {
    @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.5rem;
height: 0.5rem;
display: block;
@include themesColor {
  background-color: themed("background");
}
}
.home {
header {
  @include flex-ui;
  @include justify-content;
  @include align-items;
  font-size: 0.36rem;
  background: #ccc;
  height: 0.8rem;
  @include themesColor {
    color: themed("color");
    border: themed("border");
    font-size: themed("fontSize");
  }
}
}
</style>