保持对代码的热爱并保持怀疑态度
什么是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";