之前的css预处理,因为业务场景不复杂,一直使用的是less,突然在公众号上面看到各种语言、框架的排行榜,其中css的sass预处理,碾压其它的:

经过比较,sass确实更加强大、好用。

1、嵌套:和less一样,嵌套写法

.test{
  width: 100%;

  .child{
    width: 100%;
  }
  
}

2、全局变量:假如当前页面有一个主题色 #eeeeee,那么当前页面的其它样式都可以使用,就像变量一样

$mainColor: #eeeeee;

.test1{
  width: 100%;
  color: $mainColor;
}

.test2{
  width: 80%;
  color: $mainColor;
}

3、计算:在sass中可以直接进行简单计算

$globalWidth: 100px;

.test{
  position: absolute;
  top: 90px + $globalWidth;
  left: 10px + 50px;
}

4、继承:一个选择器可以继承另一个选择器

.test1{
  color: red;
  font-size: 24px;
}

.test2{
  @extend .test1;
  width: 100%;
}

5、Mixin(sass的亮点):

  • include
@mixin globalStyle{
  width: 100%;
  color: red;
  font-size: 24px;
  background-color: #eee;
}

.test{
  @include globalStyle;
}
  • 指定参数和默认值,相当于js中封装的方法,include调用,括号内传参使用:
@mixin flex($direction: row, $alignItems: center, $justifyContent: flex-start) {
  display: flex;
  flex-direction: $direction;
  align-items: $alignItems;
  justify-content: $justifyContent;
  flex-wrap: wrap;
}


.test{
  width: 100%;
  @include flex(row, center, space-around);
}
  • if和else判断:
@mixin showStyle($status: true) {
  @if $status {
    display: block;
    background-color: red;
  }

  @else {
    display: none;
  }
}


.blockStyle {
  @include showStyle;
}

.hiddenStyle {
  @include showStyle(false);
}

输出:

.blockStyle{display:block;background-color:red}.hiddenStyle{display:none}

6、自定义函数:

@function pxToRpx($px) {
  @return ($px * 2)rpx;
}

.test{
  width: pxToRpx(100);
}

扩展:vscode中sass插件推荐,小程序中如何生成.wxss文件

vscode中直接安装Easy Sass插件

安装完成后,在需要使用sass预处理的项目根目录,新建一个文件夹 .vscode,在 .vscode文件夹下,新建一个 settings.json文件,进行配置即可:

{
    "easysass.compileAfterSave": true,  //保存sass文件后是否自动编译
    "easysass.excludeRegex": "",    //文件名正则表达式,匹配的文件不会被编译,默认为空
    "easysass.formats": [
        {
            "format": "compressed", //使用压缩
            "extension": ".wxss"  //输出格式为.wxss
        }
    ],
    "easysass.targetDir": ""    //编译后文件的路径
}

配置完成后,在目录中测试一下:

目录中新建一个 test.scss文件,编写一些内容:

$vi: #eee;

$globalWidth: 100px;

.test{
  color: $vi;
  width: 50px + $globalWidth;
}

保存,发现目录中自动生成一个 test.wxss文件,打开看看:

已经编译为正确的css样式,变量,计算都没有问题,推荐大家使用sass作为css预处理工具。

知易行难,共勉。