CSS 预处理器—sass

实践出真知 / 2024-07-10 / 原文

一、sass环境的安装：

重点：sass是分了2个版本的，都是用来将sass编译成css的工具。一个是node-sass，另一个是dart-sass。

node-sass：以前是用这个的，但是这个在安装时有各种问题。偏偏以前有很多项目是用node-sass来处理scss的。【官方已经弃用】
- 需要安装一个二进制程序（放在github上），没有的话就需要用python进行编译。在linux系统编译时也是出现各种问题。
- node-sass 与 node.js 版本相关联，这就导致，一旦本地 node.js 升级，就会出现 node-sass 无法工作的情况。（很容易因为版本出现问题）
dart-sass：【官方使用的】
- dart-sass 是用 drat VM 来编译 sass。不依赖二进制文件就可以安装（drat VM 本身就是纯 JS实现的），直接npm包下载下来就可以了。
- 官方已经放弃 node-sass，使用dart-sass直接更名为sass了，在npm下载的包名就是sass。

node-sass 转换成 dart-sass：https://juejin.cn/post/7327094228350500914
　　说明：切换很简单不需要配置，只要把node-sass卸载，安装上sass就可以了。其它的就是一点语法的调整（sass官方也提供了调整的工具sass-migrator）。

卸载node-sass安装dart-sass：

# 卸载node-sass
npm uninstall node-sass
# 安装dart-sass
npm install sass

深度选择器 /deep/ 的修改：
- sass 只支持 ::v-deep 【sass就是dart-sass】

二、sass和less的比较 https://juejin.cn/post/6844904169313140749

　　在线 sass 编译网站：

变量：

/*  sass */
$nav-color: #F90;  /*  外部定义  */
nav {
  $width: 100px;  /*  内部定义  */
  width: $width;
  color: $nav-color;
}

/*  less  */
@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

嵌套：

嵌套选择器：sass 和 less 基本一样

嵌套属性：less 没有这个

nav {
  border: {
    style: solid;
    width: 1px;
    color: #ccc;
  }
}

模块化：基本和less一样

sass的导入和原生的语法一样，它不会和原生css冲突。因为，文件后缀名是.css的话，就会把它当css语句。如果sass文件就会以sass导入的语句执行。
```
/*  sass  */
@import "foo.scss";  
```

混合：

/*  sass  */
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

/*  less  【less混入非函数写法，混入对象也会存在编译后的代码中】*/
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

a {
  color: #111;
  .bordered();
}

继承：一个选择器下的所有样式继承给另一个选择器。
sass 有单独的继承关键字，less的继承和混入很像（无函数写法）。

/*  sass  */
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

/*  less   */
.borde_style {
     border-top: solid 1px #595959;
     border-bottom: solid 2px #595959;
}
#header span {
     height: 16px;
     .borde_style;
}