css 的预编译语言,用来书写 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 sass
sass 的编译
+ 利用我们下载好的全局 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";