深度体验Sass的魅力

小酌

我们在开发项目时,尤其是多人协同开发时会遇到一段css样式可能多次定义,然后就会导致各用各的没有相应的规范,当然你可以使用tailwindCss或者是Unocss来使用一套样式来进行开发,但是我相信大部分对于css的嵌套语句接受度还是更好一点,就我个人而言不是太能接受一个元素中一坨类名堆叠,当然你也可以使用@apply来有效简化类名,这里我们就不过多延伸

Sass简单使用

我们在vite项目中使用sass时,一般npm i sass就可以进行sass语法开发项目了

npm install sass -D //添加开发依赖

//注意这里是lang="scss"
<style lang="scss" scoped></style>  

然后我们就可以在标签中写css嵌套语法,截止到此,我们的使用和普通css的区别还是不大

这里我们在项目的assets文件夹下创建css文件夹,并且创建 index.scss,global.scss,base.scss 三个文件,方便我们定义不同用处的样式.

在index.scss中作为入口文件,统一导出scss样式

在base.scss中主要放置通用样式

猛灌

这里主要讲解一些scss的全局样式的编写,让我们看以下代码

.header{
    display: flex;
    width: 100%;
    text-align: center;
    // background-color: #ccc;
}

@media (min-width: 320px) and (max-width: 480px){
    .header {
        height: 50px;
        line-height: 50px;
    }
}
@media (min-width: 481px) and (max-width: 760px){
    .header {
        height: 60px;
        line-height: 60px;
    }
}
@media (min-width: 769px) and (max-width: 1020px){
    .header {
        height: 70px;
        line-height: 70px;
    }
}
@media (min-width: 1025px) and (max-width: 1200px){
    .header {
        height: 80px;
        line-height: 80px;
    }
}
@media (min-width: 1201px) {
    .header {
        height: 100px;
        line-height: 100px;
    }
}

这里我们思考两点:

• 样式管理
• 代码复用

显然这样的代码我们如果是多人开发,你的同事看见一个.header的媒体查询这样写还好,假如你还有很多元素也许这样写,你觉得你的同事还能看下去,我就遇到4000多行的scss文件真的是无从下手

让我们看看scss解决后

$breakpoints:(
    'phone': (320px,480px),
    'pad': (481px,760px),
    'notebook': (769px,1020px),
    'desktop': (1025px,1200px),
    'tv': 1201px,
);

@mixin respond-to($breakName){
    $bp: map-get($breakpoints, $breakName);
    @if type-of($bp) == 'list' {
        $min: nth($bp, 1);
        $max: nth($bp, 2);
        @media (min-width: $min) and (max-width: $max){
            @content;
        }
    }
    @else {
        @media (min-width: $bp) {
            @content;
        }
    }
}

.header{
    display: flex;
    width: 100%;
    text-align: center;
    // background-color: #ccc;
    

    @include respond-to('phone'){
        height: 50px;
        line-height: 50px;
        color: red;
    }
    @include respond-to('pad'){
        height: 60px;
        line-height: 60px;
        color: aquamarine;
    }
    @include respond-to('notebook'){
        height: 70px;
        line-height: 70px;
        color: green;
    }
    @include respond-to('desktop'){
        height: 80px;
        line-height: 80px;
        color: yellow;
    }
    @include respond-to('tv'){
        height: 90px;
        line-height: 90px;
        color: purple;
    }
}

是不是清晰很多,后面其他元素使用完全可以复用这段代码

.自定义类{
 @include respond-to('phone'){
       ...
    }
    @include respond-to('pad'){
     ...
    }
    @include respond-to('notebook'){
      ...
    }
    @include respond-to('desktop'){
       ...
    }
    @include respond-to('tv'){
      ...
    }
}

一目了然,不用再去媒体查询里面叠buff了

此外我们在项目中还会定义一些自定义类就比如:

.xl {
    font-size: 34rpx;
}

.lg {
    font-size: 32rpx;
}

.md {
    font-size: 30rpx;
}
.nr {
  font-size: 28rpx;
}
.sm {
    font-size: 26rpx;
}

.xs {
    font-size: 24rpx;
}

.xxs {
    font-size: 22rpx;
}

.x-10{
  padding: 0 10px
}
.x-20{
  padding: 0 20px
}
.x-30{
  padding: 0 30px
}
.x-40{
  padding: 0 40px
}
.x-50{
  padding: 0 50px
}

这还是只是截取部分,当有的同事像贪吃蛇一样写了几千行时,你是否还有心情看下去 -_-......留给大家自行脑补你的怨种同事

此时我们使用scss的循环就可以完美解决这个痛点

//定义字体大小从12px到50px  用法 `text-12 | text-30 | text-50`这样去添加类名
@for $i from 12 through 50{
   .text-#{$i}{
         font-size: $i + px;
   }
} 

//map类型
$bgColor:(
    'color_blue': #646cff,
    'color_yellow': #f0e14a,
    'color_green': #4caf50,
    'color_red': #f44336,
);
//colorName为map的键 ,colorValue为map的值 这里的#{}你可以理解为模版字符串里面的变量使用
@each $colorName, $colorValue in $bgColor {
    .body-#{$colorName} {
      background-color: map-get($bgColor, $colorName);
    //   background-color: $colorValue;
      color: #fff; // 假设对于所有这些背景颜色，文本颜色都是白色
      padding: 10px; // 为了示例，为每个类添加了padding
    }
  }

感谢!!!