sass简介
一、了解sass
sass官网：https://www.sass.hk/
Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能，扩展名是 .sass。
Scss 是 Sass 3 引入新的语法，是Sassy CSS的简写，是CSS3语法的超集，也就是说所有有效的CSS3样式也同样适合于Sass，扩展名是 .scss。
Scss就是Sass的升级版，贴近于CSS的写法。
二、sass的变量
可以在sass中定义一个变量，一次定义多次使用
语法：$名称:值;
注意：1. 变量名就是 $名称；2. 值不需要加引号。
$color:red;
$width:300px;
$bor:1px solid #0f0;
div{
background-color: $color;
width: $width;
height: $width;
border: $bor;
}
三、sass的注释
// 表示单行注释，在编译的时候不进行编译。
/* */ 表示多行注释，在编译时会保留，在打包压缩时不会保留
/*！ */ 表示强力注释，在编译和打包压缩时都会保留
四、条件分支语句
if else语法：
@if 变量==值{样式} @else{样式}
if else if 语法：
@if 变量 == 值 {样式} @else if 变量 == 值 {样式} @else if 变量==值 {样式}
$state:c;
div{
width: 200px;
height: 200px;
@if $state == a{
background-color: red;
}@else if $state == b{
background-color: green;
}@else{
background-color: blue;
}
}
五、循环语句
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;
}
}
// 这个循环的数字变化是1 2 3
@for $i from 1 through 3 {
li:nth-child(#{$i}){
height:20px*$i;
}
}
/* each循环 */
// 准备一个数组
// 每一个小括号都是数组里面的一项
$arr:(1,5px,red),(2,6px,green),(3,9px,skyblue);
// 写一个循环
@each $index,$fs,$color in $arr {
li:nth-child(#{$index}){
font-size: $fs;
color:$color;
}
}
六、sass的选择器嵌套
和html一样 让选择器也有一个上下级关系
- 后代选择器嵌套
语法：父级{ 子级{} } - 子代选择器嵌套
语法：父级{ >子级{} } - 连字符选择器嵌套
== 伪类选择器和伪元素选择器嵌套
== 当你需要的伪类和伪元素和选择器连接在一起使用的使用
== 使用&连接符操作
== 语法：选择器{ &:hover{} } - 群组选择器的嵌套（使用太少）
== 语法：群组选择器{子级{} }
== 语法：选择器{群组选择器{} }
== 语法：群组选择器{群组选择器{} }
七、sass 属性的嵌套
属性嵌套
- 前提：可以嵌套的属性才能使用
== 就是属性中带有中划线的属性
== border-left
== background-color
== background-image
== padding-left
== margin-left
== font-size - 语法: 以padding为例子
padding：10px {
left:5px;
}
div{
width: 100px;
height: 100px;
padding: 10px {
left:5px;
}
margin: {
left:4px;
right:4px;
}
}
p{
border: 10px solid #333 {
left:10px solid pink;
}
}
p {
border: 10px solid #333;
border-left: 10px solid pink;
font: {
size:30px;
}
}
八、sass的混入
sass的混入（混合器/函数）mixin
混合器，就是类似于js里面的函数
js的函数function 函数名(形参){}
- sass的混合器
== 语法：@mixin 混合器名称{}
== 语法：@mixin 混合器名称(形参){}
== 语法：@mixin 混合器名称(形参默认值){} - sass的混合器的使用
== 语法：@include 混合器名称;
== 语法：@include 混合器名称(实参);
/* 使用方式一 */
// 先准一个混合器
// 不使用的时候不会被编译的
@mixin transition{
-webkit-transition: all 2s;
-moz-transition: all 2s;
-ms-transition: all 2s;
-o-transition: all 2s;
transition: all 2s;
}
div{
width: 200px;
// 使用我刚刚定义好的混合器
@include transition;
}
/* 使用方式二 */
// 在定义混合器的时候设置几个参数
// 由你调用的时候传递的实参决定
@mixin transition($t,$p,$d,$tf){
-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;
}
div{
width: 200px;
height: 200px;
// 使用一个带有参数的混合器
// 必须所有参数都传递，不传递就会报错
@include transition(1s,all ,0s ,linear )
}
p{
@include transition(2s,height ,1s ,linear )
}
/* 使用方式三 */
// 在定义混合器的时候可以传递一个参数默认值
// 你如果传递了实参，就用你传递的
// 如果你没有传递实参，那么就用默认值
@mixin transiton($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;
}
div{
width: 100px;
height: 100px;
// 使用这个带有参数默认值的混合器
@include transiton(2s);//只传递了第一个参数
}
h1{
width: 100px;
height: 100px;
// 使用这个带有参数默认值的混合器
@include transiton(3s, height);//传递两个参数，剩余的使用默认值
}
九、sass继承
sass里面的继承就是使用另一个规则集的样式
- 当你在写一个样式的时候
== 你发现和之前写的一个规则集的样式一摸一样
== 就把刚才的直接拿下来使用 - 语法
== @extend 另一个选择器
div{
width: 100px;
height: 100px;
padding:10px;
margin:20px;
}
p{
// 继承了div里面的所有样式
@extend div;// 各个同学用的比较少
padding:20px;
border:10px solid #333;
}
.list{
// 直接继承p标签
@extend p;
margin:10px;
}
十、sass导入
导入：就是把别的文件拿到我这里执行
- 平时开发的时候
== 会写一个base.css的文件
–> *{margin:0;padding:0;}
–> 公共样式文件
–> 这个公共样式文件每个html文件都会引入
–> 在公共文件里面把我们所有需要的变量都定义好
== 你再写一个文件的时候
–> 只要导入这个base.scss文件就有了公共的样式和这些变量 - 导入的语法
== 语法：@import “你要导入的文件的路径”; - 还有一种使用方法
== 专门定义一个variable.scss的文件
– 这里专门就写所有的变量
== 专门定义一个mixin.scss的文件
– 这里专门写所有的混合器