背景

项目中总是遇到class取名难，样式到处定义，重复颜色到处写，代码切换烦得一批

一.dart-sass，node-sass

使用dart-sass，废弃node-sass

二.Vue项目中色板的使用

在全局css文件中，新建一个文件，放置各种scss变量

例如：

src/styles/variables.scss

$moedu-background-color: #F5F7FA;

配置vue.config.js,将整个变量文件注入

//vue.config.js
module.exports = {
  // …………省略其他配置
  css: {
    loaderOptions: {
      scss:{
        additionalData: '@import "@/styles/variables.scss";'
      }
    }
  },
}

在任意vue文件中，可直接使用$moedu-background-color变量，无需引入

<template>
  <div class="main">
    <p>123<p>
    <p>456<p>
  </div>
</template>

<style lang="scss" scoped>
.main{
  background-color: $moedu-background-color;
}
</style>

三.定义布局class

有的时候，页面只是为了写一些布局，需要专门定义一个class名，非常费事

例如

<template>
  <div class="main">
    <p>123<p>
    <p>456<p>
  </div>
</template>

<style lang="scss" scoped>
.main{
  display:flex;
  flex:1;
  flex-direction: column;
}
</style>

如果写好一些共用的

.flex {
  display: flex;
}
.flex1 {
  flex: 1;
}
.row {
  flex-direction: row;
}
.column {
  flex-direction: column;
}
.justify-content-center {
  justify-content: center;
}
.justify-content-flex-end {
  justify-content: flex-end;
}
.justify-content-flex-start {
  justify-content: flex-start;
}
.justify-content-space-between {
  justify-content: space-between;
}
.align-items-center {
  align-items: center;
}
.align-items-baseline {
  align-items: baseline;
}
.align-items-flex-start {
  align-items: flex-start;
}
.align-items-flex-end {
  align-items: flex-end;
}

则可以改成

<template>
  <div class="flex flex1 flex-direction-column">
    <p>123<p>
    <p>456<p>
  </div>
</template>

<style lang="scss" scoped>

</style>

四.烦人的margin与padding

同上述，marigin与padding经常性要定义class去写，烦得一批，相同的要定义很多次

例如：

<template>
  <div class="flex flex1 flex-direction-column">
    <p class="p1">123<p>
    <p class="p2">456<p>
  </div>
</template>

<style lang="scss" scoped>
.p1{
  margin-top:20px;
}
.p2{
  margin-top:30px;
}
</style>

我们通过一些函数，生成这些东西

// 填写需要的边距
$margins: (4,8,10,16,24);

@for $i from 1 through length($margins) {
  $item: nth($margins, $i);
  // .w#{$item}px {
  //   width: #{$item}px;
  // }
  .margin-#{$item}{
    margin: #{$item}px;
  }

  .margin-left-#{$item} {
    margin-left: #{$item}px;
  }

  .margin-top-#{$item} {
    margin-top: #{$item}px;
  }

  .margin-bottom-#{$item} {
    margin-bottom: #{$item}px;
  }

  .margin-right-#{$item} {
    margin-right: #{$item}px;
  }

  .padding-#{$item}{
    padding: #{$item}px;
  }

  .padding-left-#{$item} {
    padding-left: #{$item}px;
  }

  .padding-top-#{$item} {
    padding-top: #{$item}px;
  }

  .padding-bottom-#{$item} {
    padding-bottom: #{$item}px;
  }

  .padding-right-#{$item} {
    padding-right: #{$item}px;
  }
  
}

则可以修改为

<template>
  <div class="flex flex1 flex-direction-column">
    <p class="margin-top-20">123<p>
    <p class="margin-top-30">456<p>
  </div>
</template>

有点tailwindcss的味道