sass的简介,转换及语法

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

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

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

什么是sass?

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

sass的转换

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

  1. 首先需要下载node安装一个环境 点击查看node的安装
  2. node安装完成后,将node作为集成环境,下载第三方模块包,点击查看gulp的安装
  3. 接下来就是安装gulp插件 gulp-sass
  4. 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";


评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

划水的乌贼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值