sass的简介，转换及语法_sass的思想-优快云博客

本文链接：https://blog.youkuaiyun.com/dergfg/article/details/113789340

Sass是一种CSS预处理器，它扩展了CSS，允许使用变量、嵌套规则、混合、函数等特性。通过安装Node.js和Gulp，可以将.SCSS文件转换为CSS。本文详细介绍了Sass的安装步骤、基本语法，包括变量、列表、映射、嵌套选择器、混合、函数等，并展示了如何设置监听文件实时编译。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

保持对代码的热爱并保持怀疑态度

什么是sass？

sass是CSS预处理器，它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。说白了就是css的扩展。

sass的转换

sass的文件的后缀为scss，scss是不支持直接使用到网页的，所以需要转化
在这里插入图片描述

首先需要下载node安装一个环境点击查看node的安装
node安装完成后，将node作为集成环境,下载第三方模块包，点击查看gulp的安装
接下来就是安装gulp插件 gulp-sass
gulp-sass的格式

function sassTocssFn(){
    return src(["../sass/zc.scss"])   //sass所在的路径，替换成自己的路径
    .pipe(sass().on("error",sass.logError))  //打印出错误信息，而不停止程序
    .pipe(dest("../css"))  //要输出到的的文件夹名
}
exports.sTcc = sassTocssFn;

function watchSassFn(next){
    watch(["../sass/zc.scss"],sassTocssFn)   //监听路径，只要你修改数据便同步更新
    next()
}
exports.wss = watchSassFn;    //绑定到gulp

然后在当前的gulpfile.js直接调出集成终端，gulp wss 执行（gulp 这里有个空格wss ）

sass的语法

// 1. 单行注释不会被sass编译
/*
    多
    行
    注
    释，会被sass编译
*/

// 2. 单值变量
// $c:green;
// h1{
//     color: $c;
// }
// div{
//     background: $c
// }

// 3. 多值变量
// $c:red green yellow;
// h1{
//     color: nth($c, 1);
// }
// h2{
//     color: nth($c, 2);
// }
// h3{
//     color: nth($c, 3);
// }

// 4. list变量类似于js中的二维数组
// $abc:(top 100px 110px red)(left 200px 220px pink)(right 300px 330px blue);
// @each $s,$a,$b,$c in $abc {
//     .#{$s}{
//         width:$a;
//         height:$b;
//         color:$c;
//     }
// }

// 5. map变量类似于js中的对象数组
// $qwe:(h1:40px,h2:30px,h3:20px);
// @each $key,$val in $qwe {
//     #{$key}{
//         font-size: $val;
//     }
// }

// 6. 嵌套
// ul.list
//     li
//     li
//     li
//     li.last
// .list li{border:solid 1px black}
// .list .last{border:none}

.list {
  width: 100px;
  background: #ccc;
  li {
    border: {
      left: {
        width: 10px;
        color: red;
        style: solid;
      }
      right: solid 2px pink;
      top: solid 3px yellow;
      bottom: solid 4px black;
    }
    font: {
      size: 10px;
      weight: bold;
      style: normal;
    }
  }
  .last {
    border: none;
  }
}

// 7. 混合mixin，类似于函数，但没有返回值，只是代码段的封装
// @mixin transform ($deg){
//     -webkit-transform: $deg;
//     -moz-transform: $deg;
//     -ms-transform: $deg;
//     -o-transform: $deg;
//     transform: $deg;
// }
// .box1{
//     @include transform(rotate(90deg));
// }
// .box2{
//     @include transform(translate(200px));
// }
// .box3{
//     @include transform(scale(2));
// }

// 8. 函数 + 运算
// $fz:70px;
// html{
//     font-size: $fz;
// }
// @function pTr($px){
//     @return $px / $fz * 1rem
// }
// .box1{
//     width: pTr(456px);
//     height: pTr(765px);
// }
// .box2{
//     width: pTr(39px);
// }
// .box3{
//     width: pTr(100px);
// }

// 9. 运算
// 颜色的运算
// $color:#ff0000;
// .box1{
//     color: $color - 50;
// }
// .box2{
//     color: $color + 200;
// }

// 10. 继承
// .box1{
//     width:100px;height:100px;
//     background: red
// }
// .box2{
//     @extend .box1;
//     background: pink;
// }

// 11. 导入
// @import "style.scss";