一、什么是SASS
SASS是一种强化CSS的辅助工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单可维护。
#二、安装和使用（VS Code中）
#1.安装
- 下载扩展文件 ==Easy Sass==
- 在用户设置中加入以下代码既可
"easysass.targetDir": "./css"
#2.使用
- SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss或.sass,推荐使用.scss
- 编写好的scss代码保存后，会自动在CSS文件夹生成对应的.css文件和.min.css文件
- 在html文件中只需引入CSS文件夹下生成的CSS文件
#三、基本用法
#1. 变量与插值语句
- SCSS允许使用 ==$== 声明变量
$blue : #1875e7;
div {
color : $blue;
}
- 如果变量需要镶嵌在字符串之中，就必须需要写在插值语句 ==#{}== 之中
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}
#2.计算功能
- SCSS允许在代码中使用算式
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
#3.嵌套
- SCSS允许选择器嵌套
div {
h1 {
color : red;
}
}
- 属性也可以嵌套
p{
border:{
color:red;
}
//注意 : 属性嵌套后面需要加上冒号。
}
- 在嵌套的代码块内，可以使用 ==&== 引用父元素
a{
&:hover{
color:#ffb3ff;
}
}
- 优点: 嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理
- 弊端：嵌套层级越深，编译出来的css代码的选择器层级也越深，会导致css样式冗余，并且难以维护
#4. 注释
SCSS共有两种注释风格
-
==/* 多行注释 */== ，会保留到编译后的文件。
-
==// 单行注释== ，只保留在SASS源文件中，编译后被省略。
-
在/*后面加一个感叹号，表示这是”重要注释”。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
/*!
重要注释！
*/
#四、代码的重用
#1. 占位符%
- SCSS允许通过 ==%== 来声明一个选择器，但必须通过 ==@extend== 指令调用
%wh{
width:100px;
height:100px;
}div{
@extend %wh;
}
#2. 继承 @extend
- SCSS允许一个选择器，继承另一个选择器
.class1 {
border: 1px solid #ddd;
}
- class2要继承class1，就要使用 ==@extend== 命令
.class2 {
@extend .class1;
}
#3. 混合宏 @mixin
- 使用 ==@mixin== 命令，定义一个可以重用的代码块。
@mixin left{
float：left;
margin-left:10px;
}
- 使用 ==@include== 命令，调用这个混合宏。
div{
@include left;
}
- @mixin的强大之处，在于可以指定参数和默认值。
@mixin common($w,$h,$bg:pink) {
width:$w;
height:$h;
background:$bg;
}
- 使用的时候，根据需要加入参数：
div{
@include common(100px,100px,red)
}
#4. 插入文件
==@import== 命令，用来插入外部文件。
@import "reset.scss";
1
#五.高级用法
#1.循环语句
- ==@for $var from through == 含头含尾
@for $i from 1 through 10{
.border-#{$i}{
border:#{$i}px solid blue;
}
}
- ==@for $var from to == 含头不含尾
@for $i from 1 to 4 {
.list li {
&:nth-child(#{$i}) {
font-size: #{$i}0px;
}
}
}
#2. 自定义函数
- ==@function== 用于声明函数 ==@return== 用于返回值
- 先声明后使用
@function double($n) {
@return $n * 2;
}#sidebar {
width: double(5px);
}
#scss练习1:
鼠标移上
要求1:
设置一个 double函数 border: double(5px) solid #999
