Sass的学习

一、Sass介绍

Sass是强化css的一个工具，变量、判断、函数、循环等都有可以在scss中实现。Sass源文件不能被浏览器解析，只有css文件才可以。Sass转成css需要借助工具Esay Sass。
Sass有两种编码格式一种是sass编码方式（省略大括号的编码格式），另一种是scss编码格式（使用大括号的编码格式）。

1.安装vs code插件

安装了Easy Sass此插件以后，会自动编译sass文件

2.创建scss文件

创建一个后缀名为Scss的sass文件

在sass文件当中写入代码以后会自动编译出两个文件一个是后缀名为.css的后缀，一个是后缀为.main.css的文件，关于这两个文件他们之间的区别是，以.css结尾的文件是未压缩的文件，以.main.css结尾的是经过压缩以后的css文件。

以.css为后缀css文件内容

body{margin:0;padding:0;
}

以.main.css结尾的css文件

body{margin:0;padding:0;}

3.变量

语法：$变量名:属性值

$bg:#ccc;
.main{background:$bg;
}

解析完成以后的代码：

.main {background: #ccc;
}

4.选择器嵌套

.container{width: 100vw;height: 100vh;.list{width: 200px;height: 200px;li{width: 100%;height: 200px;&:nth-child(1){background-color: red;}}}.nav{width: 200px;}
}

解析以后的css文件,注意这里解析后的文件都是后代选择器。

.container {width: 100vw;height: 100vh;
}.container .list {width: 200px;height: 200px;
}.container .list li {width: 100%;height: 200px;
}.container .list li:nth-child(1) {background-color: red;
}.container .nav {width: 200px;
}

如果你想要子代选择器那么就需要在嵌套的子代选择器前加一个“>”,如下代码中的nav选择器前加上了一个“>”

.container{width: 100vw;height: 100vh;.list{width: 200px;height: 200px;li{width: 100%;height: 200px;&:nth-child(1){background-color: red;}}}>.nav{width: 200px;}
}

那么解析出来的就是子代选择器了,其余还是后代选择器。

.container {width: 100vw;height: 100vh;
}.container .list {width: 200px;height: 200px;
}.container .list li {width: 100%;height: 200px;
}.container .list li:nth-child(1) {background-color: red;
}.container > .nav {width: 200px;
}

5.属性嵌套

main{font: 14px{weight:600;  family:"宋体";  }
}

6.占位符

语法：%名字{} 使用@extend导入 占位符
占位符就是重复使用的代码块

%wh {width: 200px;height: 200px;background-color: red;font-size: 22px;
}
li{@extend %wh;
}
.item{@extend %wh;
}

解析完成以后的代码

li, .item {width: 200px;height: 200px;background-color: red;font-size: 22px;
}

7.混合宏

混合宏与占位符类似都可以将相同代码进行提取，写成一个代码块，但不同的是混合宏是可以进行传参的。
语法：@mixin 混合器的名字（传入的参数）{ 代码块 }

@mixin center($w,$h){width: $w;height: $h;background: red;
}
.item{@include center(200PX,200PX)
}

解析后的代码：

.item {width: 200PX;height: 200PX;background: red;
}

8.函数

语法：
@function 名字(){
@return 表达式;
}
可以配合flexible.js来实现移动端的自适应

@function rem($px){@return $px/37.5px * 1rem;
}
.list{width: rem(365px);
}

解析之后的代码

.list {width: 9.73333rem;
}

本节内容就到此结束了，希望可以帮到大家。