sass經常使用語法以及sass換膚案例

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>
複製代碼