CSS 预处理器—sass

一、sass环境的安装：https://blog.csdn.net/Ed7zgeE9X/article/details/123058868

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

Ruby Sass：是最初的Sass实现，但是2019年3月26日被停止了，以后也不会再支持，使用者需要迁移到别的实现上。
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 编译网站：

计算功能（操作符）：使用计算功能的好处就是，直接把计算过程写在这里了。后面要调整只要调整算式的关键部分，而且不用我们直接计算出结果。
说明：
- 原生css也有计算功能cacl()，但过多地使用calc()函数可能会导致CSS文件的体积增加，从而增加页面的加载时间。预处理的计算编译成css就是确定的值。
  所以原生cacl()函数，只用在相对单位的计算上，如百分比。预处理器的计算可以随意使用，不会对css有任何影响。
- 有些计算结果可能是无限小数的，sass也提供了内置的函数处理的。再不济也可以自定义函数实现的。

变量：

属性值变量：

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

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

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

插值变量：实现 选择器变量、属性名变量、url变量（可以变量插值）等

sass中用 #{}插值；less中用 @{} 插值。
```
$name: foo;
p.#{$name} {
  border-color: blue;
}
```

嵌套：

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

嵌套属性：less 没有这个

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

父选择器&：

.container {
    a {
        color: #333;
        &:hover {
             text-decoration: underline;
             color: #f00;
        }
    }
}

换个思路，也可以使用&进行选择器名称拼接。

.main {
    color: black;
    &-sidebar { border: 1px solid; }
}

混合：复用一组样式

无参数：

/*  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;
}

总结：继承和混入功能上差不多。一组样式本身有用那就是继承它；本身没有（不编译）就是混入。（在less中就没有把继承单独列出来合在混入介绍的）

复杂选择器样式的继承：

占位符选择器（%foo）：不仅继承了css属性，可以说，连选择器都继承了。
占位符选择器%所属的样式未使用时，不会被编译到css文件中，算是一个小优化吧。

.button %base {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    user-select: none;
}
        
.btn-default {
    @extend %base;
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

模块化：基本和less一样

sass的导入和原生的语法一样，它不会和原生css冲突。因为，文件后缀名是.css的话，就会把它当css语句。如果sass文件就会以sass导入的语句执行。
```
/*  sass  */
@import "foo.scss";  
```
函数：一般直接使用内置函数就够了
- 颜色函数：
- 数字函数：
sass 额外提供其它一些功能

posted @ 2024-07-10 16:30 吴飞ff 阅读(18) 评论(0) 编辑收藏举报

刷新页面返回顶部

实践出真知

不会总结的前端不是好前端

CSS 预处理器—sass

一、sass环境的安装：https://blog.csdn.net/Ed7zgeE9X/article/details/123058868

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

公告