背景

項目中總是遇到class取名難推励，樣式到處定義，重復(fù)顏色到處寫夸溶，代碼切換煩得一批

一.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名见坑，非常費(fèi)事

例如

<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經(jīng)常性要定義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>

我們通過一些函數(shù)，生成這些東西

// 填寫需要的邊距
$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>

有點(diǎn)tailwindcss的味道