1. 认识 SASS

SASS

+ 一个 css 的预编译语言

+ 也是一个工具, 专门用来 书写 css 的工具

+ 作用: 帮助你快速方便简洁的书写 css

sass 的文件 :

+ 有两种文件都是用来书写 sass 内容的

  1. .sass 后缀的文件

  2. .scss 后缀的文件

+ 以上两种方式, 在语法和编译上没有区别

+ 唯一的区别是, { } 和分号(  ; )

  => .sass 文件 不允许 出现 { } 和 ;

  => .scss 文件必须要写 { } 和 ;

sass 的引入需要编译后使用

=> 如果直接在 html 文件内引入 .scss 或者 .sass 文件 , 浏览器不识别

+ 因为浏览器不认识 .sass 或者 .scss 文件

+ 需要一个工具把 .sass 和 .scss 文件编译成 .css 文件再次使用

=> 在浏览器内引入的还是 .css 文件

常见的 sass 文件编译方式 :

  1. 使用编辑器插件进行转换

    => VS Code 里面有一个叫做 Easy Sass 的插件

    => 你只要安装了这个插件, 你写完的 .sass 和 .scss 文件会 自动编译 成 .css 文件

    => 缺点: 依赖 VS Code 编辑器

  2. 使用一个叫做 SASS 的全局系统工具来完成转换

    => 可以进行编译, 需要你在命令行通过指令的形式

    => 进行文件的编译

  3. 使用前端的打包构建工具 , 进行配置

    => 在项目打包的时候, 可以使用打包功能内的某些功能来编译 sass 文件

    => 打包工具, 不是专门用来编译 sass 文件的

    => 只是对当前项目进行打包的时候, 可以一起编译打包 sass 文件

sass 工具 :

+ 目的: 为了把 .scss 和 .sass 文件编译成 .css 文件

+ 是一个可以基于 node 的 "软件"(环境 / 工具)

+ 依赖环境

  => 最早依赖 ruby 环境运行的

  => 后来依赖 python 环境运行

  => 现在依赖 node 环境运行

+ sass 工具的下载 :

  => 因为是一个依赖 node 环境运行的工具

  => 因为是一个全局工具

  => 可以使用 npm 下载安装

  => 打开命令行, 目录无所谓

  => 输入指令:

    -> win: $   npm install –global sass

    -> OS: $ sudo npm install –global sass

+ sass 工具的检测 :

  => 打开命令行, 目录无所谓

  => 输入指令: $   sass –version

+ sass 工具的卸载 :

  => 打开命令行, 目录无所谓

  => 输入指令:

    -> win: $   npm uninstall –global sass

    -> OS: $ sudo npm uninstall –global sass

sass 工具的作用 :

+ 在命令行通过指令的形式把 .sass 文件或者 .scss 文件转换成 .css 文件

2. sass 的编译

利用我们下载好的全局 sass 工具来编译 .sass 和 .scss 文件

sass 编译工具在编译之后会给出一个 map 文件

作用是映射内容到 sass 文件内

1. 单文件编译 :
=> 使用这个工具编译一个文件 , 把该文件编译成 .css 文件
+ 打开命令行, 切换目录到你要编译的 sass 文件的目录结构
+ 输入指令: $ sass 源文件名称生成的文件名称
       $ sass xxx.scss xxx.css
=> 编译成功以后
-> 会得到一个 .css 文件和一个 .css.map 文件
-> .css 文件是为了给你引入页面使用的
-> .map 文件是为了映射到源文件使用的
+ 缺点:
> 一次只能编译一个文件
源文件每次修改都需要重新编译
2. 单文件实时编译 :
+ 打开命令行, 目录切换到你要编译的 sass 文件的目录
+ 输入指令: $ sass –watch 源文件名称:生成的文件名称
       $ sass –watch xxx.scss:xxx.css
+ 缺点: 一个命令行只能监控一个文件实时编译

3. 文件夹实时编译 :

  + 打开命令行, 切换目录到你要编译的 sass 文件夹 所在的目录

  + 输入指令: $ sass –watch 要编译的源文件夹名称:生成后的文件夹名称

3. sass 语法

1. sass 的注释

在 sass 中注释分成三种 :

// 1. 单行注释
// 注释一行代码
// 特点 : 在编译的时候不会保留
div {// 这个是设置 div 的宽度width: 100px;// 这个是 弹性盒子display: flex;
}
/*2. 多行注释+ 可以注释多行代码+ 特点 : 在编译的时候会保留在打包的时候, 不会保留
*/
/*!3. 强力注释+ 可以注释多行代码+ 和多行注释是一个道理+ 在编译的时候会保留+ 在打包的时候, 也会保留
*/
/*!@author@date...
*/

2. sass 的变量

+ 在 sass 内可以 定义变量

+ 来存储一些值

变量的定义 :

=> 语法: $名字: 值;

=> 注意:

  -> $ 是名字的一部分 , 不是关键字

  -> 没有等于号, 而是冒号 ( : )

  -> 值不管是什么, 不需要引号

=> 定义的变量是不会被解析出来的

  -> 只有你使用这个变量的时候

  -> 会直接把值解析出来
// 0.定义变量
$bg_color: skyblue;
$b: 1px solid #333;
$n: 10;
变量的使用 :

=> 在值的位置使用 :

  -> 直接使用变量就可以了

  -> 记得 $ 是名字的一部分

=> 在选择器的位置使用 :

  + li:nth-child(变量)

  + div.变量 { }

  -> 不能直接使用

  + 在变量的外面包裹一个井号大括号

  -> 需要使用变量, 需要写 #{ 变量 }

  + li:nth-child(#{ 变量 })

  + div.#{ 变量 }

  => 表示这里是一个变量

3. sass 的循环

循环1: @for from to 循环

  + 语法: @for 变量 from 开始数字 to 结束数字 { 内容 }

  + 变量就表示从开始数字循环到结束数字的每一个内容

  + 注意: 包含开始数字, 不包含结束数字

循环2: @for from through 循环

  + 语法: @for 变量 from 开始数字 through 结束数字 { 内容 }

  + 变量就表示从开始数字循环到结束数字的每一个内容

  + 注意: 包含开始数字, 也包含结束数字

循环3: @each 循环

+ 主要作用是用来遍历数组的

  + sass 如何定义一个数组

    => 语法: $变量: 值1, 值2, 值3, …;

  + 循环语法: @each 变量 in 数组 { }

  + 变量就表示数组中的每一个值

4. sass 的嵌套

+ 可以把 css 写的像 html 一样有层级结构

+ 让你和 html 结构一样的书写 css

1. 后代嵌套

  + 直接在一个规则集内书写后代规则集就可以了

  + 可以直接嵌套选择器, 也可以嵌套后代选择器

2. 子代嵌套

+ 在一个规则集内书写第二个规则集的时候书写一个 >

3. 连接符嵌套

  + 一般用在伪类和伪元素选择器的时候

  + 需要在样式集内书写伪类或者伪元素嵌套的时候

  => 书写一个 & 连接符

4. 属性嵌套

+ 必须要可以嵌套的属性才能使用这个语法
+ 可以嵌套的属性:
=> 属性名中带有中划线 – 的样式
  => margin-left
  => padding-top
  => background-color
+ 语法:
=> 书写完毕属性值, 直接书写 { } 去写单独的内容
+ 嵌套方式
  => background: {
    color: red;
    position: 100px 100px;
    …
  };
  + 扩展:
  => 有一个中划线, 就可以嵌套一次

认识 border 复合了哪几个属性
border-top
border-right
border-left
border-bottom

以 border-top 为例, 复合了哪几个属性
border-top-color
border-top-width
border-top-style

5. sass 的混入 mixin

+ 混入也叫作混合器, 在其他语言里也叫作 "函数"

+ 定义混合器和使用混合器

1. 基本混合器的定义和使用
+ 定义:
=> 语法 : @mixin 混合器名称 { 混合器样式 }
=> 注意: 混合器在不使用的时候, 不会被编译, 使用的时候, 直接编译 { } 内的代码
+ 使用:
=> 语法: @include 混合器名称;
=> 会把混合器内的代码直接使用
+ 缺点:
  => 不够灵活, 定义都是准确的几个属性
  => 全部使用位置都是一模一样的
  => 不能进行差异化定制

2. 定义带有参数的混合器
+ 语法: @mixin 混合器名称(变量1, 变量2, …) { }
=> 定义带有参数的混合器, 在 {} 内可以直接使用变量
+ 使用:
=> @include 混合器名称(值1, 值2, …);
=> 注意: 必须所有参数都传递, 你写了多少个形参, 就得写多少个实参
+ 缺点:
=> 每次使用都必须要完全传递参数

3. 定义带有参数默认值的混合器

+ 定义:

=> 语法: @mixin 混合器名称(变量1:默认值, 变量2:默认值, …) { }

=> 我们的参数是带有默认值的

=> 当你不传递内容的时候, 会使用默认值

+ 使用:

=> 方式1: @include 混合器名称(实参1, 实参2);

按照顺序传递或者不传递参数,可以不全部填写, 没有写的会有默认值使用

=> 方式2: @include 混合器名称(变量1: 值);

指定给某一个形参赋值, 剩下的使用默认值

6. sass 的继承

+ 让一个规则集使用另一个规则集的样式内容

+ 语法: @extend 另一个规则集的选择器;

7. sass 的导入

+ 把另一个 scss 文件导入到自己文件内使用

+ 一般来说, 最基础的模块要分开两个导入

  1. base.scss 文件

  2. variable.scss 文件 , 变量文件

  3. mixin.scss 文件 , 混合器文件

+ 语法 : @import "scss 文件地址";

  => 导入以后, 就可以使用该文件内的内容