整体知识思维导图👇，内容有点多，可能有点看不清，那就看每个小专题的导图吧！！
注释
单行注释
//这是单行注释
单行注释，在编译成css的时候，不会被编译👇
多行注释
/*这是多行注释*/
多行注释，在编译成css的时候，会被编译👇
特殊多行注释
$tip:"这是多行特殊注释"
/*
#{$tip}
*/
编译后👇
变量
定义
//scss定义变量很简单，以$开头就行，就好像js中的var,let...
$color:#fff;
$color2: blue;
使用
//使用也非常简单，直接把定好的变量拿过来用就可以
body{
color:$color;
background-color:$color2;
}
作用域
局部作用域
body{
$color:yellow;
color:$color;
}
// 如果想在p中，用在body定义好的$color变量是用不到的，编译会报错
p{
background-color:$color;
}
全局作用域
//在最外定义的变量，在哪里都可以用
$color:yellow;
body{
color:$color;
}
p{
color:#color
}
特殊的全局作用域
//假如有些牛脾气的大哥，非要在body里面定义一个变量，又想在body外调用，那就只能加上！global了
body{
$color:yellow !global;
color:$color;
}
div{
color:$color;
}
类型
//String类型
$className:container;
$className1:'container1';
$className2:"container2";
//Number类型
$size:12;
$size2:12px;
//Color类型
$color1:yellow;
$color2:#fff;
$color3:rgb(0,0,0);
//Boolean类型
$boo:true;
$boo2:false;
//List类型
$border:5px 10px 15px 20px;
//Map类型
$map:(color1:yellow,font:12)
//使用list方式，可以直接调用，使用全步，也可以使用某一个
body{
border:$border;
p{
// nth(list变量，下标从1开始)
border-left:nth($border,1)
}
}
// map 使用方式
body{
// map-get(map变量，key)
color:map-get($map,color1);
font-size:map-get($map,font);
}
样式导入
部分文件
在scss中，有一种特殊的文件叫做“部分文件”，他们定义是以_开头的，比如(_header.scss),这部分的文件只有被导入的时候才会被编译，如果不导入是不会被编译的。
@import
在scss中，导入样式也是用@import关键字，跟css中的一样；他们是有区别的，css的@import只是将被引入文件路径加载在需要引入的文件中；而scss的@import会将被引入的文件的样式直接合并到需要引入的文件中；因为他们撞名了，那么他们怎么判断用了css的@import还是scss的@import呢？看下面👇
//以下三种方式引入的文件，都被当成css引入，后缀为css,绝对路径，url()
@import 'xxx.css'
@import 'http://xxx/xxx'
@import 'url(xxx.css)'
//scss引入
@import "_header"
嵌套
选择器嵌套
body{
p{
span{
color:red
}
}
}
属性嵌套
body{
div{
background:{
size:100%;
color:red;
}
}
}
嵌套中引用父选择器
a{
color:red;
&:hover{
color:yellow;
}
}
跳出嵌套
body{
p{
color:#ff;
.cart{
font-size:15px;
@at-root .header{
background:#000;
}
}
}
}
这种可能看起来比较蒙蔽，看下面👇的编译结果大家就明白了
继承
常规继承
.parent{
color:red;
font-size:16px;
}
.child{
@extend .parent;
background-color:#fff;
}
多继承
.parent{
color:red;
font-size:16px;
}
.parent2{
display:flex;
font-weight:blod;
}
.child{
@extend .parent .parent2;
}
链接继承
.one{
color:red;
}
.tow{
@extend .one;
background-color:#000;
}
.three{
@extend .two;
font-weight:bold;
}
交叉继承
.header{
.eye{
font-size:40px
}
}
.xiaoming{
@extend .eye;
color:red;
}
可能交叉继承，也有点乱，还是看👇的编译结果吧。
占位选择器
// 占位选择器只要用来定义被继承的类，如果这个类不被外面访问，只被继承，那最好就使用占位选择器
%parent{
color:red;
}
.child{
@extend %parent;
}
运算符
$width:100px;
$width2:50px;
// 加
.name{
width:$width + width2;
}
// 减
.name2{
width:$width - width2;
}
// 乘
.name{
width:$width * width2;
}
// 除
.name2{
width:$width / width2;
}
// %
.name{
width:$width % width2;
}
注意⚠️：运算符两边要留空，运算值要同单位
混合
// 定义
@mixin parent{
color:red;
}
// 使用
.child{
@include parent;
}
// 传参形式
@mixin parent2($color,$font){
color:$color;
font-size:$font;
}
.child2{
@include parent2(red,12px);
}
// 传参形式,可以设置默认值
@mixin parent3($color:red,$font){
color:$color;
font-size:$font;
}
.child3{
@include parent3($font:12px);
}
//参数合并符
@mixin parent4($params...){
border:$params
}
.child4{
@include parent4(5px,10px,20px,40px);
}
自定义函数
// 定义
@function header($color){
@return $color;
}
// 使用
.xiaoming{
color:header(red)
}
输出语句
$debug 'this is debug';
$warn 'this is warn';
$error 'this is error'；
注意⚠️：只在编译终端输出，不在浏览器输出
条件语句
三元
$color:red;
$color2:yellow;
$width:10;
body{
// if(条件判断，true,false)
color:if($width > 5,$color,$color2)
}
@if, @if-@else,@if-@else if-@else
//@if
$width:10;
@if($width > 8){
.name{
color:#fff
}
}
// @if-@else
@if($width > 8){
.age{
font-size:20px;
}
}@eles{
.age{
font-size:18px;
}
}
}
// @if-@else if-@else
@if($width > 9){
.age{
font-size:20px;
}
}@else if($width > 8){
.age{
font-size:18px;
}
}@else{
.age{
font-size:10px;
}
}
条件循环语句
for
// 循环1到5（包含5）
@for $i from 1 through 5 {
span#{$i}{
width:10% * $i
}
}
// 循环1到5（不包含5）
@for $i from 1 to 5 {
span#{$i}{
width:10% * $i
}
}
while
$i:10;
@while $i > 3 {
span#{$i}{
font-size:1px * $1
}
$i:$i - 3
}
遍历语句
常规遍历
@each $key in 10,20,30{
span#{$key}{
font-weight:$key;
}
}
遍历list
@each $key,$value in (text1,3),(text2,32),(text3,35){
.#{$key}{
font-weight:$value;
}
}
遍历map
@each $key,$value in (key1:55,key2:87,key3:100){
.#{$key}{
font-weight:$value;
}
}
