了解 sass
sass是 css 的预编译语言,可以把文件编译成 css 文件。
sass可以定义变量、可以定义函数、 可以有 if 语句 可以有 for 循环语句,能使你敲代码的速度的变得更高更快更强。
.sass 文件 和 .scss 文件的区别
+ 在 .scss 文件里面和写 css 的语法基本一致
+ 在 .sass 文件里面就没有大括号 和 分号, 全部依靠缩进来维持关系
+ 这两个文件被编译成 css 文件以后是一样的
sass的安装
-
sass 工具安装
使用 npm 进行 安装一个全局工具
指令: npm install --global sass
简写: npm i -g sass -
sass 工具检测
打开命令行输入: sass --version -
sass 工具卸载
使用 npm 进行卸载
指令: npm uninstall --global sass
简写: npm un -g sass
sass 的变量
在 sass 里面定义一个变量,一次定义多次使用
语法: $名字: 值;
注意:你的变量名是 $名字,值不需要引号
使用: 直接使用变量名即可,只要变量的值修改了,那么所有使用这个变量的位置就都修改了
例:
// 定义了三个叫做 $color、$fs、$border 的变量
$color: green;
$fs: 30px;
$border: 10px solid #333;
div {
width: 100px;
height: 100px;
color: $color;
font-size: $fs;
border: $border;
}
p {
background-color: $color;
font-size: $fs;
border: $border;
}
a {
color: $color;
font-size: $fs;
}
效果:
div {
width: 100px;
height: 100px;
color: green;
font-size: 30px;
border: 10px solid #333;
}
p {
background-color: green;
font-size: 30px;
border: 10px solid #333;
}
a {
color: green;
font-size: 30px;
}
sass 的条件分支语句
其实就是
- if 语句
if else 语句
if else if 语句
依赖于变量使用
-
if 语句
语法: @if 变量 == 值 { 样式 } => if else 语句
语法: @if 变量 == 值 { 样式 } @else { 样式 } => if else if 语句
语法: @if 变量 == 值 { 样式 } @else if 变量 == 值 { 样式 }例子:
// 准备一个变量
$type: c;
div {
width: 100px;
@if $type == a {
color: red;
}
}
p {
height: 200px;
@if $type == a {
color: red;
} @else {
color: green;
}
}
h1 {
width: 100px;
height: 100px;
@if $type == a {
color: red;
} @else if $type == b {
color: green;
} @else if $type == c {
color: skyblue;
}
}
效果:
div {
width: 100px;
}
p {
height: 200px;
color: green;
}
h1 {
width: 100px;
height: 100px;
color: skyblue;
}
sass 的循环语句
-
for 循环
依赖变量使用
语法: 有两种1.@for 变量 from 数字 to 数字 { 代码 } 包含开始数字, 不包含结束数字 在循环里面使用变量 => 在选择器中使用 #{变量} => 在样式里面使用 变量 @for 变量 from 数字 through 数字 { 代码 } 2. 包含结束数字 在循环里面使用变量 => 在选择器中使用 #{变量} => 在样式里面使用 变量
例:
/* for 循环 */
// 这个循环的数字变化是 1 2, 不包含 3
@for $i from 1 to 3 {
li:nth-child(#{$i}) {
width: 10px*$i;
}
}
// 这个循环的数字变化是 1 2 3
@for $i from 1 through 3 {
li:nth-child(#{$i}) {
height: 10px*$i;
}
}
/* each 循环 */
$colorArr: (1, red), (2, green), (3, skyblue), (4, purple), (5, orange), (6, yellow);
li {
width: 100px;
height: 100px;
}
@each $index, $color in $colorArr {
li:nth-child(#{$index}) {
background-color: $color;
}
}
效果:
/* each 循环 */
li {
width: 100px;
height: 100px;
}
li:nth-child(1) {
background-color: red;
}
li:nth-child(2) {
background-color: green;
}
li:nth-child(3) {
background-color: skyblue;
}
li:nth-child(4) {
background-color: purple;
}
li:nth-child(5) {
background-color: orange;
}
li:nth-child(6) {
background-color: yellow;
}
sass选择器嵌套
sass的选择器嵌套和 html 一样让选择器也有一个上下级的关系
-
后代选择器嵌套
语法: 父级 { 子级 {} } -
子代选择器嵌套
语法: 父级 { > 子级 {} } -
连字符选择器嵌套
伪类选择器和伪元素选择器嵌套
当你需要的伪类和伪元素和选择器连接在一起的时候
使用 & 连接符操作
语法: 选择器 { &:hover {} } -
群组选择器的嵌套(使用太少)
语法: 群组选择器 { 子级 {} }
语法: 选择器 { 群组选择器 {} }
语法: 群组选择器 { 群组选择器 {} }
例:
/* 1. 后代选择器嵌套 */
div {
width: 100px;
height: 100px;
// div 后代的 p 标签
p {
width: 30px;
height: 30px;
// div 的后代 p 里面的后代 span
span {
color: red;
// div 后代 p 的后代 span 的后代 a 标签
a {
font-size: 100px;
}
}
}
}
/* 2. 子代选择器嵌套 */
div {
width: 100px;
height: 100px;
// div 的子代 p 标签
> p {
width: 40px;
height: 30px;
> span {
color: red;
i {
font-size: 0;
}
}
a {
font-size: 10px;
}
}
ul {
width: 20px;
}
> ol {
height: 30px;
}
}
/* 3. 连字符选择器嵌套 */
div {
width: 100px;
height: 100px;
// 当鼠标悬停的时候 宽度改变
&:hover {
width: 200px;
}
&::before {
content: '';
}
}
li {
&:nth-child(1) {
width: 100px;
}
&:nth-child(2) {
width: 300px;
}
}
p {
width: 100px;
&.active {
width: 200px;
}
}
/* 4. 群组选择器嵌套 */
.box1, .box2, .box3 {
width: 100px;
height: 100px;
p {
width: 30px;
}
}
div {
width: 100px;
height: 100px;
.box1, .box2, .box3 {
color: red;
}
}
.box1, .box2 {
width: 100px;
height: 100px;
.list1, .list2 {
color: red;
}
}
效果:
/* 1. 后代选择器嵌套 */
div {
width: 100px;
height: 100px;
}
div p {
width: 30px;
height: 30px;
}
div p span {
color: red;
}
div p span a {
font-size: 100px;
color: #000;
}
/* 2. 子代选择器嵌套 */
div {
width: 100px;
height: 100px;
}
div > p {
width: 40px;
height: 30px;
}
div > p > span {
color: red;
}
div > p > span i {
font-size: 0;
}
div > p a {
font-size: 10px;
}
div ul {
width: 20px;
}
div > ol {
height: 30px;
}
/* 3. 连字符选择器嵌套 */
div {
width: 100px;
height: 100px;
}
div:hover {
width: 200px;
}
div::before {
content: "";
}
li:nth-child(1) {
width: 100px;
}
li:nth-child(2) {
width: 300px;
}
p {
width: 100px;
}
p.active {
width: 200px;
}
/* 4. 群组选择器嵌套 */
.box1, .box2, .box3 {
width: 100px;
height: 100px;
}
.box1 p, .box2 p, .box3 p {
width: 30px;
}
div {
width: 100px;
height: 100px;
}
div .box1, div .box2, div .box3 {
color: red;
}
.box1, .box2 {
width: 100px;
height: 100px;
}
.box1 .list1, .box1 .list2, .box2 .list1, .box2 .list2 {
color: red;
}
sass的属性嵌套
-
前提: 可以嵌套的属性才能使用
就是属性中带有中划线的属性
=> border-left
=> margin-left
=> padding-left
=> background-color
=> background-image -
语法: 以 padding 为例
padding: 10px; 上下左右
padding: 10px 10px; 上下 左右
padding: 10px 10px 10px 10px; 上 右 下 左
padding: 10px {
left: 5px;
};
例:
div {
width: 100px;
height: 100px;
padding: 10px {
left: 5px
};
margin: {
left: 3px;
right: 3px;
};
}
p {
border: 10px solid #333 {
left: 10px dashed pink;
};
}
span {
display: block;
width: 0;
height: 0;
border: 10px solid transparent {
bottom: 10px solid #333;
};
}
效果:
div {
width: 100px;
height: 100px;
padding: 10px;
padding-left: 5px;
margin-left: 3px;
margin-right: 3px;
}
p {
border: 10px solid #333;
border-left: 10px dashed pink;
}
span {
display: block;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom: 10px solid #333;
}
sass混合器
类似于 js 里面的函数
js 的函数 function 函数名(形参) {}
-
sass 的混合器
语法: @mixin 混合器名称 {}
语法: @mixin 混合器名称(形参) {}
语法: @mixin 混合器名称(形参默认值) {} -
sass 的混合器的使用
语法: @include 混合器名称;
语法: @include 混合器名称(实参);
例:
/* 使用方式一 */
// 先准备一个混合器
// 不使用的时候是不会被编译的
@mixin transition {
-webkit-transition: all 2s;
-moz-transition: all 2s;
-ms-transition: all 2s;
-o-transition: all 2s;
transition: all 2s;
}
div {
width: 100px;
// 使用刚才定义好的混合器
@include transition;
}
h1 {
@include transition;
}
/* 使用方式二 */
// 在定义混合器的时候设置几个参数
// 由调用的时候传递的实参决定
@mixin transition($t, $p, $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 transition(1s, all, 0s, linear);
}
p {
@include transition(2s, height, 1s, linear);
}
/* 使用方式三 */
// 在定义混合器的时候可以传递一个参数默认值
// 如果传递了实参, 就用传递的
// 如果没有传递实参, 那么就是用默认值
@mixin transition($t: 1s, $p: all, $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 transition; // 不用传递参数, 所有的都用默认值
}
p {
width: 100px;
height: 100px;
// 使用这个带有参数默认值的混合器
@include transition(2s); // 只传递第一个参数
}
h1 {
width: 100px;
height: 100px;
// 使用这个带有参数默认值的混合器
@include transition(3s, height); // 传递两个参数, 剩余的使用默认值
}
h4 {
width: 100px;
height: 100px;
// 使用的时候, 指定给哪一个参数传递实参
// 只是给 $d 这个形参传递实参, 别的都使用默认值
@include transition($d: 1s);
}
效果:
/* 使用方式一 */
div {
width: 100px;
-webkit-transition: all 2s;
-moz-transition: all 2s;
-ms-transition: all 2s;
-o-transition: all 2s;
transition: all 2s;
}
h1 {
-webkit-transition: all 2s;
-moz-transition: all 2s;
-ms-transition: all 2s;
-o-transition: all 2s;
transition: all 2s;
}
/* 使用方式二 */
div {
width: 100px;
height: 100px;
-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;
}
p {
-webkit-transition: height 2s 1s linear;
-moz-transition: height 2s 1s linear;
-ms-transition: height 2s 1s linear;
-o-transition: height 2s 1s linear;
transition: height 2s 1s linear;
}
/* 使用方式三 */
div {
width: 100px;
height: 100px;
-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;
}
p {
width: 100px;
height: 100px;
-webkit-transition: all 2s 0s linear;
-moz-transition: all 2s 0s linear;
-ms-transition: all 2s 0s linear;
-o-transition: all 2s 0s linear;
transition: all 2s 0s linear;
}
h1 {
width: 100px;
height: 100px;
-webkit-transition: height 3s 0s linear;
-moz-transition: height 3s 0s linear;
-ms-transition: height 3s 0s linear;
-o-transition: height 3s 0s linear;
transition: height 3s 0s linear;
}
h4 {
width: 100px;
height: 100px;
-webkit-transition: all 1s 1s linear;
-moz-transition: all 1s 1s linear;
-ms-transition: all 1s 1s linear;
-o-transition: all 1s 1s linear;
transition: all 1s 1s linear;
}
sass的继承
就是使用另一个规则集的样式
当你在写一个样式的时候 你发现和之前写的一个规则集的样式一摸一样,就把刚才写的直接拿下来
- 语法:
@extend 另一个选择器
例:
div {
width: 100px;
height: 100px;
padding: 10px;
margin: 20px;
}
p {
// 继承了 div 里面的所有样式
@extend div; // 各个同学用的都比较少
padding: 20px;
border: 10px solid #333;
}
.list {
// 直接继承 p 标签
@extend p;
margin: 10px;
}
#box {
width: 200px;
height: 200px;
}
h5 {
@extend #box;
}
效果:
div, p, .list {
width: 100px;
height: 100px;
padding: 10px;
margin: 20px;
}
p, .list {
padding: 20px;
border: 10px solid #333;
}
.list {
margin: 10px;
}
#box, h5 {
width: 200px;
height: 200px;
}
sass的导入
就是把别的文件拿到我这里执行
平时开发的时候会写一个 base.css 的文件: * { margin: 0; padding: 0; } 这样的公共样式文件, 这个公共样式文件每个 html 文件都会引入,如果我们在公共文件里面把所有需要用到的变量都定义好,那你再写每一个文件的时候 只要导入这个 base.scss 就有了公共样式和这些变量了。
- 导入的语法: 语法: @import “你要导入的文件名称”;
- 还有一种使用方式
- 专门定义一个 variable.scss 的文件, 这里专门就写所有的变量
- 专门定义一个 mixin.scss的文件,这里面专门就写所有的混合器
例:
// 导入 解释sass变量的那个文件
@import "./01_变量.scss";
h1 {
color: $color;
}
效果:
div {
width: 100px;
height: 100px;
color: green;
font-size: 30px;
border: 10px solid #333;
}
p {
background-color: green;
font-size: 30px;
border: 10px solid #333;
}
a {
color: green;
font-size: 30px;
}
h1 {
color: green;
}
家中逆战,无畏疫情,武汉加油,中国加油,人类必胜!!!
指导老师:郭翔