理解SASS

1.用来编译css的 使css代码编写 更加简洁方便
2.sass和css的区别

css文件的后缀名使.css
sass文件后缀名是.sass 或者 .scss
< sass文件和scss文件区别
1.scss文件语法和css文件基本一致
2.sass文件里面就没有大括号 和 分号 依靠缩进来维持关系
3.但是这两种文件编译后和css文件一样

3.sass全局工具
安装 npm i -g sass
卸载npm un -g sass

sass工具编译

1.sass单文件编译

切换到文件的目录下 打开命令行
输入指令：sass 要编译的文件 编译后的文件名
每次修改都要重新编译

2.sass单文件实时编译

指令：sass --watch 要编译的文件:编译后的文件名

3.sass文件夹实时编译

把一个文件夹里面的sass文件 全部编译到另一个文件夹里面
指令：sass --watch 要编译的文件夹:生成的文件夹

sass 基础语法

1.变量

语法：$名字:值
注意：变量名是 $名字 值不需要加引号
使用的时候直接写变量名

$color: green;
$fs: 30px;
$border: 10px solid #333;

div {
width: 100px;
height: 100px;
color: $color;
font-size: $fs;
border: $border;
}

2.注释

单行注释 在编译的时候不进行编译
多行注释 在编译的时候会保留 但是在使用gulp打包的时候不会保留
强力注释 在编译的时候和使用gulp打包的时候都会保留

3.条件分支语句

if语句 语法 : @if 变量 == 值 { 样式 }
if else 语句 语法: @if 变量 == 值 {样式} @else { 样式}
if else if语句 语法：@if 变量 == 值 {样式} @else if 变量 ==值 { 样式 }

$type: c;

div {
width: 100px;

@if $type == a {
color: red;
}

}

p {
height: 200px;

@if $type == a {
color: red;
} @else {
color: green;
}

}

h1 {
width: 100px;
height: 100px;

@if $type == a {
color: red;
} @else if $type == b {
color: green;
} @else if $type == c {
color: skyblue;
}

}

4.循环分支语句

依赖变量来用
语法：
- @for 变量 from 数字 to 数字 { 代码 }
包含开始数字 不包含结束数字
-@for 变量 from 数字 through 数字 { 代码 }
包含开始数字 也包含结束数字
each 循环
依赖一个sass数组使用
数组语法：变量: ( ),( ),( ),……
each 语法：@each 变量1,变量2,变量3,…… in 数组

$colorArr: (1, red), (2, green), (3, skyblue), (4, purple), (5, orange), (6, yellow);

li {
width: 100px;
height: 100px;
}

@each $index, $color in $colorArr {
li:nth-child(#{$index}) {
background-color: $color;
}
}

// 不包含 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: 10px*$i;
}
}

5.选择器嵌套

后代选择器嵌套
语法：父级 { 子级 { } }
子代选择器嵌套
语法：父级 { >子级{ } }
连字符选择器嵌套
伪类选择器和为元素选择器的嵌套
使用 & 选择符操作
使用 & 连接符操作
语法：选择器 { $:hover { } }
群组选择器嵌套
语法：群组选择器 { 子级 { } }
语法：选择器 { 群组选择器 { } }
语法：选择器{ 群组选择器 { } }

/* 3. 连字符选择器嵌套 */
div {
width: 100px;
height: 100px;

// 当鼠标悬停的时候 宽度改变
&:hover {
width: 200px;
}

&::before {
content: '';
}
}

li {
&:nth-child(1) {
width: 100px;
}

&:nth-child(2) {
width: 300px;
}
}

p {
width: 100px;

&.active {
width: 200px;
}
}

6.属性嵌套

只有属性带有中划线的才能使用属性嵌套
列入：padding-left 这种

div {
width: 100px;
height: 100px;

padding: 10px {
left: 5px
};

margin: {
left: 3px;
right: 3px;
};
}

p {
border: 10px solid #333 {
left: 10px dashed pink;
};
}

span {
display: block;
width: 0;
height: 0;

border: 10px solid transparent {
bottom: 10px solid #333;
};
}

7.混入

类似与js中的函数
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;
}

div {
width: 100px;
height: 100px;

// 使用这个带有参数默认值的混合器
@include transition; // 不用传递参数, 所有的都用默认值
}

p {
width: 100px;
height: 100px;

// 使用这个带有参数默认值的混合器
@include transition(2s); // 只传递第一个参数
}

h1 {
width: 100px;
height: 100px;

// 使用这个带有参数默认值的混合器
@include transition(3s, height); // 传递两个参数, 剩余的使用默认值
}

8.继承

语法 @extend 选择器

div {
width: 100px;
height: 100px;
padding: 10px;
margin: 20px;
}
p {
// 继承了 div 里面的所有样式
@extend div; // 各个同学用的都比较少

padding: 20px;
border: 10px solid #333;
}

9.导入

语法 ： @import 要导入的文件名

@import "./01_变量.scss";

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