SASS入门

Sass 是一个 CSS 预处理器。

Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间

　熟练使用SASS可以帮我们在做页面样式时节约大量时间，我花了一早上时间整理了Sass的基本使用方法和语法，希望对你有帮助

目录：

一.Sass的安装和官方文档

二.Sass的基本了解和插件

三.Sass的基础语法和功能

　　1.注释

　　2.变量

　　3.分支

　　4.嵌套

　　5.混合

　　6.继承

　　7.导入

 

一.Sass的安装和官方文档

　（1）npm包安装：

npm install -g sass

 

 

  （2）官网下载：https://www.sass.hk/

 

 

 

二.Sass的基本了解和插件　　

SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

1. 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名

2. 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

　如下对比：

 

 

 

插件推荐(VSCode)

 

 

 

 

 

 

三.Sass的基础语法和功能

 1.注释

　　

/* 
    sass的注释
*/


// 单行注释 编译完毕不显示,打包之后,不显示


/* 多行注释 编译之后显示,打包之后不显示 */


/*! 强制注释, 编译之后显示,打包之后显示  */

 

2.变量

1.先定义变量名和变量值，然后在代码里直接写变量名

2.定义事件时注意在事件前加#

用法示例：

 

 

3.分支

（1）语法1：

　　　　　

　  @if(){}

　　@if(){}

　　@else{}

 

示例:

（1）判断年龄值，显示不同的颜色

 

 

(2) 语法2：

@for $i from 开始 to 结束   =>包头不包尾

　　

（3）语法3：

@for $i from 开始 through 结束  => 包头包尾

 

 （4）语法4：

    each 遍历 => 遍历数组

　　@each $item in $arr{
　　$index:index($arr,$item);
}

 

 4.嵌套

　　(1)父子嵌套　　

 

（2）连接符嵌套

&.active

 

(3) 多个嵌套

 

 （4）属性嵌套

 

 

5.混合

（1）定义一个混合，示例：

 

 

（2）带参数的混合

 

 （3）设置默认参数

 

（6）继承

@extend

 

 （7）导入

@import:""

示例：