SASScss 的预编译语言,用来书写 css 的工具 有两种文件都是用来书写 sass 内容的1. .sass 后缀的文件2. .scss 后缀的文件 以上两种方式, 在语法和编译上没有区别 唯一的区别是, {} 和 分号(;) .sass 文件不允许出现 {} 和 ; .scss 文件必须要写 {} 和 ;sass 需要编译后使用 因为浏览器不认识 .sass 或者 .scss 文件 需要把 .sass 和 .scss 文件编译成 .css 文件再次使用 常见的编译方式1. 使用编辑器插件 vscode 里面有一个叫做 easysass 的插件 你只要安装了这个插件, 你写完的 .sass 和 .scss 文件会自动编译成 .css 文件 缺点: 依赖编辑器2. 使用一个叫做 sass 的全局系统工具来完成 可以进行编译, 需要你在命令行通过指令的形式 进行文件的编译3. 打包工具 在项目打包的时候, 可以使用打包功能内的某些功能来编译 sass 文件 打包工具, 不是专门用来编译 sass 文件的 只是对当前项目进行打包的时候, 可以一起编译打包 sass 文件sass 工具 依赖环境 最早依赖 ruby 环境 后来依赖 python 环境 现在依赖 node 环境 下载: 因为是一个依赖 node 环境的工具 因为是一个全局工具 使用 npm 下载 打开命令行, 目录无所谓 输入指令:- win: $ npm install --global sass- OS: $ sudo npm install --global sass 检测: 打开命令行, 目录无所谓 输入指令: $ sass --version 卸载: 打开命令行, 目录无所谓 输入指令:- win: $ npm uninstall --global sass- OS: $ sudo npm uninstall --global sasssass 的编译 利用我们下载好的全局 sass 工具来编译 .sass 和 .scss 文件 sass 编译工具在编译之后会给出一个 map 文件 作用是映射内容到 sass 文件内1. 单文件编译 打开命令行, 目录切换到你要编译的 sass 文件的目录 输入指令: $ sass 源文件名称 生成的文件名称 缺点: 每次修改都需要重新编译2. 单文件实时编译 打开命令行, 目录切换到你要编译的 sass 文件的目录 输入指令: $ sass --watch 源文件名称:生成的文件名称 缺点: 一个命令行只能监控一个文件实时编译3. 文件夹实时编译 打开命令行, 目录切换到你要编译的 sass 文件夹所在的目录 输入指令: $ sass --watch 源文件夹名称:生成的文件夹名称sass 的变量 在 sass 内是可以定义变量的 定义和使用 变量的定义 语法: $名字: 值; 注意: - $ 是名字的一部分 - 没有等于号, 而是 冒号(:) - 值不管是什么, 不需要引号 定义的变量是不会被解析出来的 - 只有你使用这个变量的时候 - 会直接把值解析出来 变量的使用 使用在值的位置 - 直接使用就可以了 - 记得 $ 是名字的一部分 使用在选择器的位置 - 不能直接使用 - 需要使用变量, 需要写 #{ 变量 } */ // 定义变量 $bg_color: skyblue; $b: 1px solid #333; $n: 10; // 在值的位置使用变量 div { background-color: $bg_color; } p { color: $bg_color; } h1 { border: 1px solid $bg_color; } h2 { border: $b; } // 在选择器的位置使用变量 li:nth-child(#{$n}) { color: red; } .box.#{ $bg_color } { font-size: 10px; }sass 的循环 1. for 循环 语法: for 变量 from 开始数字 to 结束数字 { 内容 } 变量就表示 从 开始数字 到 结束数字 的每一个内容 注意: 包含开始数字, 不包含结束数字 2. for 循环 语法: for 变量 from 开始数字 through 结束数字 { 内容 } 变量就表示 从 开始数字 到 结束数字 的每一个内容 注意: 包含开始数字, 也包含结束数字 3. each 循环 如何定义一个数组 语法: $arr: 值1, 值2, 值3, ... 语法: each 变量 in 数组 {} 变量就表示数组中的每一个值 */ // 1. for to 循环 // for $n from 1 to 5 { // // 在这个循环内, $n 就分别是 1 2 3 4 // li:nth-child(#{ $n }) { // width: 100px; // left: $n * 100px; // } // .box#{ $n } { // width: 100px; // } // } // for $n from 1 to 5{ // li:nth-child(#{$n}){ // width: 100px; // left: $n *100px; // } // } // 2. for through 循环 // for $n from 1 through 5 { // // 在这个循环内, $n 就分别是 1 2 3 4 5 // li:nth-child(#{ $n }) { // left: $n * 100px; // top: $n * 100px; // } // } // 3. each 循环 // 3-1. 定义一个数组 $colorArr: red, skyblue, orange, green, yellow; // 3-2. 循环 $colorArr 这个数组 each $item in $colorArr { // 配套语法: // index(数组, 项) // 返回值: 项在该数组中的索引位置 $index: index($colorArr, $item); // $index 拿到的值分别是 1 2 3 4 5 li:nth-child(#{ $index }) { background-color: $item; } }sass 的嵌套,可以把 css 写的像 html 一样有层级结构 div.banner { width: 300px; height: 300px; p { width: 200px; height: 200px; span { width: 100px; height: 100px; display: block; a { font-size: 20px; color: red; } } } }/* sass 的混入 也叫作混合器, 也叫作 函数 定义混合器 和 使用混合器 */ /* 1. 基本混合器 定义: mixin 混合器名称 { 混合器样式 } 使用: include 混合器名称; 缺点: 不够灵活, 定义都是准确的几个属性 */ // 1. 定义基本混合器 // mixin trans { // -webkit-transition: all 1s 0s linear; // -moz-transition: all 1s 0s linear; // -ms-transition: all 1s 0s linear; // -o-transition: all 1s 0s linear; // transition: all 1s 0s linear; // } // mixin flex { // display: flex; // justify-content: center; // align-items: center; // } // 基本混合器的使用 // div { // width: 100px; // height: 100px; // include flex; // :hover { // width: 200px; // height: 200px; // include trans; // } // } // h1 { // color: red; // :hover { // color: skyblue; // include trans; // } // } /* 2. 带有参数的混合器 定义: mixin 混合器名称(参数1, 参数2, ...) {} 使用: include 混合器名称(值1, 值2, ...) 注意: 你写了多少个形参, 就得写多少个实参 缺点: 必须每一个参数都传递 */ // 2. 才有参数的混合器定义 // mixin trans($p, $t, $d, $tf) { // -webkit-transition: $p $t $d $tf; // -moz-transition: $p $t $d $tf; // -ms-transition: $p $t $d $tf; // -o-transition: $p $t $d $tf; // transition: $p $t $d $tf; // } // // 使用混合器 // div { // width: 100px; // height: 100px; // include trans(all, 1s, 0s, linear); // } // h1 { // width: 200px; // height: 200px; // include trans(width, 2s, 1s, ease-in); // } /* 3. 带有形参默认值的混合器 定义: mixin 混合器名称(形参1: 默认值, 形参2: 默认值, ...) {} 使用: include 混合器名称(实参1, 实参2); - 可以不全部填写, 没有写的会有默认值使用 include 混合器名称(形参1: 值); - 指定给某一个形参赋值, 剩下的使用默认值 */ // 3. 定义带有参数默认值的混合器 mixin trans($p: all, $t: 1s, $d: 0s, $tf: linear) { -webkit-transition: $p $t $d $tf; -moz-transition: $p $t $d $tf; -ms-transition: $p $t $d $tf; -o-transition: $p $t $d $tf; transition: $p $t $d $tf; } // 使用带有参数默认值的混合器 div { width: 100px; height: 100px; include trans(); } h1 { include trans(width); } h2 { include trans(width, 2s); } h3 { include trans(width, 2s, 1s); } h4 { include trans(width, 2s, 1s, ease-in-out); } h5 { // 表示使用 trans 混合器 // 只是单独给 $tf 变量赋值为 ease-in // 其他参数都使用默认值 include trans($tf: ease-in); }sass 的继承,让一个规则集使用另一个规则集的样式内容,语法: extend 选择器; div { width: 10px; height: 10px; margin: 10px; padding: 10px; border: 10px solid #333; background-color: skyblue; color: red; font-size: 10px; line-height: 10px; font-weight: 700; } p { // 当你希望使用和 div 内一样的样式的时候 // 直接继承 div 的内容 extend div; width: 200px; margin: 30px; transition: all 1s 2s linear; } h1 { extend p; margin: 20px; }sass 的导入, import 地址;import ./mixin.scss;LessLESS 是一种动态样式表语言扩展了 CSS层叠样式表的功能使得样式表的编写更加灵活和高效。LESS 提供了变量、嵌套、运算、混合Mixins等功能帮助开发者更好地组织和管理 CSS 代码1.变量LESS 允许使用变量来存储样式值如颜色、字体大小等使得样式的管理更加方便和一致。primary-color: #4D926F; .header { color: primary-color; }2.嵌套LESS 支持嵌套规则允许在选择器内嵌套子选择器反映 HTML 结构的层次关系。.nav { ul { margin: 0; padding: 0; } li { display: inline-block; } }3.混合MixinsLESS 提供了混合功能可以将一组样式定义为一个可重用的代码块并在需要时引入。.border-radius(radius) { border-radius: radius; -webkit-border-radius: radius; -moz-border-radius: radius; } .box { .border-radius(10px); }4.运算LESS 支持在样式中进行数学运算方便进行尺寸和颜色的计算。base: 5%; width: 500px; color: #888; .container { width: width * 2; color: color * 2; }5.函数LESS 提供了一些内置的函数用于颜色操作、字符串处理等。.box { color: lighten(primary-color, 20%); }LESS 代码需要编译为标准的 CSS 才能在网页中使用。可以通过安装 LESS 编译器来完成这一过程,使用 npm 安装 LESS 编译器npm install -g less编译 LESS 文件,将 LESS 文件编译为 CSS 文件lessc styles.less styles.css集成到项目中:可通过构建工具自动编译 LESS 文件简化开发流程。