前端系列课程之样式预处理（sass）（一）

样式预处理

目标：

1. 了解样式预处理的作用
2. 掌握Sass的语法应用

CSS存在的不足

1. 代码重复，维护不便

CSS样式预处理

1. CSS预处理器定义了一种“中间语言”，将CSS作为目标生成文件，为CSS增加了“编程“的特性，开发者使用这种语言进行编码，然后在编译成正常的CSS文件供项目使用。

sass的概念

1. sass是最早的CSS预处理语言，采用Ruby语言编写，诞生于2007年，刚开始不被大众接受，使用率不高，由于其强大的功能和Ruby on Rails 的大力推动，很多人选择了Sass。
2. Sass从第三代开始，放弃了缩进式风格，并且完全向下兼容普通Css代码，这一代的Sass也被称为Scss。

sass和scss

1. Sass和Scss平时都称为Sass，是同一个内容，区别：

• 文件后缀（扩展名）不同：
  Sass以 ” .sass “为扩展名，Scss以” .scss “为扩展名；

• 书写方式（语法）不同：
  Sass以严格的缩进式语法规则来书写，不带大括号和分号；
  Scss的书写方式和CSS语法非常类似（越来越受欢迎的原因之一）

Sass的安装

1. 首先需要安装Ruby，先从官网下载Ruby并安装：
   
   
   
2. 安装完成后需测试安装有没有成功，运行cmd，输入以下命令：
   
3. 如安装成功会显示：

4. 安装Sass
   
5. 安装完成后，可以通过命令来确认应用已经正确地安装到了电脑中

Sass的常用命令

1. Sass常用更新、查看版本、卸载等命令：

Sass的编译简介

1. 命令行编译：终端、CMD
   

2. GUI软件编译：如 Koala、CodeKit、Compass、Scout

3. 自动化编译：如 Gulp、Grunt、webpack

4. Sass四种编译格式:

Vscode配置

1. 安装插件easy Sass
2. 配置：
   （文件->菜单->首选项->设置->搜索框搜索easy ->在setting.json中编辑）
   

Sass语法介绍

Sass的注释

1. Sass 的注释有两种方式

（1）类似 CSS 的注释方式
/* 我是注释信息 ，显示在CSS中*/
（2）类似 JavaScript 的注释方式
// 我是注释信息，不显示在CSS中

scss:

编译后css：

Sass的变量

1. Sass 使用美元符号“$”来声明变量，变量名允许重复，后面定义的覆盖前面定义的

例子：

Sass的全部变量和局部变量

1. 全局变量就是定义在CSS样式外面的变量，局部变量是定义在CSS样式内部的变量。
2. 当命名冲突时，内部变量替换全局变量的值

Sass的混合宏

1. 项目中有几处小样式类似，可以使用变量来统一处理。需要重复使用大段的样式时，变量就无法达到目的了。这个时候就需要混合宏来解决。
2. @mixin 用来声明混合宏，类似 CSS中的 @keyframes、@font-face
3. @include 用来调用声明好的混合宏。
4. 注意宏是通过@声明的，与变量声明不同

Sass的混合宏基本语法

1. 混合宏声明以及调用语法

（1）声明：

（2）调用：

（3）编译后css

例子：

Sass混合宏的带参语法

1. 带参混合宏
2. 带默认值的混合宏
   
   
   
   
   
   

例子：

Sass的混合宏的缺点

3. 混合宏会生成冗余的代码块，相同代码块不能智能合并，比如在不同的地方调用一个相同的混合宏时。
   
   
   
   
   例子：

Sass的继承

1. Sass通过关键词 @extend 来继承已存在的类样式块，实现代码的继承
2. 
   
   
   
   例子：

sass的占位符
3. Sass的占位符 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。避免了代码冗余的产生。








Sass的技术比较

Sass的样式运算

Sass的样式值运算

1. Sass 除了可以使用数值进行运算之外，还可以使用变量进行计算，这使得 Sass 的数学运算功能变得更加实用。
   
2. 数值或它的任意部分存储在变量或函数结果中
3. 数值被圆括号包围
4. 数值是另一个数学表达式的一部分

6. 样式值是字符串时，可以通过“+”来进行字符串连接
7. 样式使用变量值时，可以通过#{变量}的插值方式进行拼接
8. 插值可以出现在属性值中，也可以出现在属性名中，甚至可以出现在@extend指令中

例子：

sass的嵌套

1. Sass通过嵌套方式，提高样式代码的编码效率
2. 主要类型
   （1）选择器嵌套
   （2）属性嵌套

（3）伪类嵌套

sass的选择器嵌套

1. 选择器嵌套必须符合html的层次结构
2. &表示当前位置的上级选择器

sass的属性嵌套

1. 针对属性前缀相同后缀不一样的样式，可以采用属性嵌套（使用冒号间隔）。比如：border、margin、padding、font 等属性。

sass的伪类嵌套

1. 伪类嵌套和属性嵌套非常类似，不过它需要借助&符号一起配合使用

Sass控制结构语法

@if指令

1. @if 指令可以根据条件来处理混合宏，条件为true返回一个样式块，false返回另外样式块，可以配合@else、@else if使用。

@for指令

1. @for 循环有两种形式：
2. @for $i from through 包括end这个数
3. @for $i from to 不包括end这个数

@while指令

1. @while 循环和 @for类似，后面的条件为 true 就会执行，并且会生成不同的样式块，直到表达式值为 false 时停止循环