#千锋逆战班，打卡第二天#

sass是css的预编译语言，比css更高更快更强

将sass语言写在后缀为 .sass 或者 .scss 的文件里面。

.sass文件 和 .scss 文件的区别

在.scss文件里面和写css语法基本一致
在.sass文件里面就没有大括号和分号，全部依靠缩进来维持关系
这两个文件被编译成css文件以后是一样的

sass工具编译 .sass 和 .scss文件

1.sass单文件编译
+ 先写好一个.scss 或者 .sass后缀的文件
+ 打开命令行，切换到文件的目录
+ 输入指令
-> sass 要编译的文件 编译后的文件名
+ 每次修改scss文件都需要从新编译一下
2. sass 单文件实时编译
=> 你先写好一个 .sass 或者 .scss 后缀的文件
=> 打开命令行, 切换到文件的目录
=> 输入指令
-> sass --watch 要编译的文件:编译后的文件名
=> 一个终端只能监控一个文件, 你要是想监控多个文件, 需要开启很多终端
3. sass 文件夹实时编译
=> 把一个文件夹里面的 sass 文件全部编译到另一个文件夹里面
=> 先准备好一个文件夹, 这个文件夹是专门来写 sass 文件的
=> 代开命令行, 切换到这个文件夹的目录
=> 输入指令
-> sass --watch 要编译的文件夹:生成的文件夹
=> 实时编译的时候黑窗口要一致开着
4. 生成的 map 文件的作用
映射生成代码的位置到源文件代码位置
=> 我在写代码的时候, 调试出现问题了
=> 我要修改 sass 文件的代码, 让他重新编译出 css 文件来
=> 再浏览器控制台的时候, 直接把样式后面的信息给你映射到 sass 文件的指定行

sass 的变量

/* 在 sass 里面定义一个变量 ，一次定义多次使用
=> 语法: $名字: 值;
注意:你的变量名是 $名字   ,值不需要引号
使用: 直接使用变量名就可以了
只要变量的值修改了,那么所有使用这个变量的位置就都修改了*/

$color: green;// 定义了一个叫做 $color 的变量, 值是 green
$fs: 30px;
$border: 10px solid #333;
p {background-color: $color;font-size: $fs;border: $border;}//使用变量
a {color: $color;font-size: $fs;}

sass 的注释

//     1. 单行注释, 再编译的时候不进行编译
/**/   2. 多行注释
=> 再编译的时候会保留
=> 再使用 gulp 打包的时候不会保留
/*! */ 3. 强力注释
=> 再编译的时候会保留
=> 再使用 gulp 打包的时候也会保留

sass 的条件分支语句

依赖于变量使用
=> if 语句
-> 语法: @if 变量 == 值 { 样式 }
=> if else 语句
-> 语法: @if 变量 == 值 { 样式 } @else { 样式 }
=> if else if 语句
-> 语法: @if 变量 == 值 { 样式 } @else if 变量 == 值 { 样式 }

$type: c;// 准备一个变量
h1 {
width: 100px;  height: 100px;
@if $type == a {
color: red;
} @else if $type == b {
color: green;
}
}

sass 的循环语句

for 循环
=> 依赖变量使用
=> 语法: 有两种
1. @for 变量 from 数字 to 数字 { 代码 }
-> 包含开始数字, 不包含结束数字
-> 在循环里面使用变量
=> 再选择器中使用 #{变量}
=> 再样式里面使用 变量
2. @for 变量 from 数字 through 数字 { 代码 }
-> 包含结束数字
-> 在循环里面使用变量
=> 再选择器中使用 #{变量}
=> 再样式里面使用 变量
each 循环
=> 依赖一个 sass 数组使用
=> 写一个 sass 数组
-> 语法: 变量: (), (), (), (), ...
=> each 的使用
-> 语法: @each 变量1, 变量2, ... in 数组

/* for 循环 */
//这个循环的数字变化是 1 2, 不包含 3
@for $i from 1 to 3 {  li:nth-child(#{$i}) {
width: 10px*$i;  }}

$colorArr: (1, red), (2, green), (3, skyblue), (4, purple), (5, orange), (6, yellow);//定义一个数组
//each循环
@each $index, $color in $colorArr {
li:nth-child(#{$index}) {
background-color: $color;
}
}

sass 的选择器嵌套

/*  和 html 一样让选择器也有一个上下级的关系
1. 后代选择器嵌套
=> 语法: 父级 { 子级 {} }
2. 子代选择器嵌套
=> 语法: 父级 { > 子级 {} }
3. 连字符选择器嵌套
=> 伪类选择器和伪元素选择器嵌套
=> 当你需要的伪类和伪元素和选择器连接再一起的时候
=> 使用 & 连接符操作
=> 语法: 选择器 { &:hover {} }
4. 群组选择器的嵌套(使用太少)
=> 语法: 群组选择器 { 子级 {} }
=> 语法: 选择器 { 群组选择器 {} }
=> 语法: 群组选择器 { 群组选择器 {} }*/

sass 属性的嵌套

属性嵌套
+ 前提: 可以嵌套的属性才能使用
+  => 就是属性中带有中划线的属性
+  => 如 border-left  ，margin-left
p {  border: 10px solid #333{
left: 10px dashed pink;
};
}

## sass 的混入(混合器/函数) mixin

/*  混合器, 就是类似于 js 里面的函数
+ js 的函数 function 函数名(形参) {}
+ + sass 的混合器
+   => 语法: @mixin 混合器名称 {}
+   => 语法: @mixin 混合器名称(形参) {}
+   => 语法: @mixin 混合器名称(形参默认值) {}
+ + sass 的混合器的使用
+   => 语法: @include 混合器名称;
+   => 语法: @include 混合器名称(实参);*/

//   再定义混合器的时候可以传递一个参数默认值
//   你如果传递了实参, 就用你传递的
//   如果你没有传递实参, 那么就是用默认值
@mixin transition($t: 1s, $p: all, $d: 0s, $tf: linear) {
-webkit-transition: $p $t $d $tf;
-moz-transition: $p $t $d $tf;
-ms-transition: $p $t $d $tf;
-o-transition: $p $t $d $tf;
transition: $p $t $d $tf;}
//将参数去掉就是不传参，也可以将参数默认值去掉，此函数不使用的时候是不会被编译的
h1 {  width: 100px;height: 100px;// 使用这个带有参数默认值的混合器
@include   transition(3s, height);// 传递两个参数, 剩余的使用默认值}
}

sass的继承

sass里面的继承语法：@extend 另一个选择器；

div {width: 100px;height: 100px;padding: 10px;margin: 20px；}
p {  @extend div; // 继承了 div 里面的所有样式
padding: 20px; border: 10px solid #333;//p自己的样式
}

sass 的导入

导入的语法: => 语法: @import “你要导入的文件名称”;

努力到无能为力，拼搏到感动自己，武汉加油！中国加油！

• 点赞
• 收藏
• 分享
• 文章举报

angle小菠萝 发布了9 篇原创文章 · 获赞 7 · 访问量 234 私信 关注