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;
}

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