SASS基本语法总结

SASS是CSS预处理器，简单来说，SASS是比CSS更高一级的语言，它拥有CSS不具备的语法，比如if条件控制

SASS的预处理器

SASS是一种无法被浏览器直接执行的语言，我们需要通过预处理工具（可以理解为翻译工具），把SASS文件转化为CSS文件，预处理工具有很多，最推荐的方法的就是VScode的插件Easy SASS的方法，也可用webpack的插件sass-loader。

SASS基本语法
嵌套规则(Nested Rules)
SASS用缩进来简写嵌套结构

#main p {
   
    color: #00ff00;
    width:97%;

    /*嵌套后生成#main p .redbox*/
    .redbox {
   
        background-color:red;
        color:#000;
    }
}

父选择器引用（Referencing Parent Selectors: &）
&代表父选择器简写

a {
   
    font-size:12px;
    &:hover {
   color: red;}  //生成a:hover
    .firebox & {
   color:black} //生成.firebox a
}

/* 多层嵌套 */

h1 {
   
    color:blue;
    p {
   
        color:red;
        & a {
      //生成h1 p a
            color:yellow 
        }
    }
}

/*&规则:必须为前缀，可以加后缀 */

.main {
   

    &-head {
     //生成.main-head

    }
}

父选择器 & 被作为一个后缀的时候，Sass 将抛出一个错误。
属性的嵌套（ Nested Properties）
这部分用的很少，但是也算个功能

.funky {
   
    font:{
   
        size:12px;   //生成font-size
        family:fatasy;  //生成font-family
    }
}

变量
//变量的声明
$width:5em;
$width:5em !global //全局声明，普通声明只在当前{}下有用

//变量的使用
width:$width;变量名下划线和横杠互用，main-head和mai{n}_{h}ead默认相等，变量名必须是$开头
变量的数据类型
字符串
数字（数值保留单位）
颜色
布尔值
空值
值列表（数组）
maps（键值对）
变量默认符 !default
!default赋值的变量，如果已被赋值，则使用原值，否则使用新值

$name = 1em;
$name = 2em !default; //已被赋值1em,使用原值1em
插值语法#{}
插值语法常常是用来避免sass运算的，保证其内容为纯css内容

KaTeX parse error: Expected 'EOF', got '#' at position 14: name:'foo' p.#̲{ name} { //p.foo
}
运算符
加减乘除±*/
分割符/属性替代表示: #{ KaTeX parse error: Expected 'EOF', got '}' at position 8: number1}̲/#{ number2}
-用作减法规则：number1 - number2前后带空格，（number1-number2）加括号，或者-number-前加空格后加数字
+可拼接字符串
布尔运算支持and,or,not
支持颜色运算，支持括号，不支持数组运算
函数
sassscript定义了部分可直接使用的函数 函数列表

//使用函数

p {
   
    color:hsl(100%,10%,0)
}

关键字参数
关键字参数是对函数参数的命名，除了方便阅读没有任何作用

p {
   
    color:hsl($light:100%,$darkness:10%,$hue:0)
}

css3 @规则
@import 引入外部样式表
@import “foo.sass”;

//如果不带后缀会搜索.sass和.scss后缀文件

@import “foo”,“tools”; //import多个
@media 媒体查询样式

.sidebar {
   
    width:100px;
    @media ....... {
      //@media会冒泡到顶端
        width:200px;
    }
}

@extend 继承类

.nav {
   
    display:block;
    font-size:12px
}

.nav-small{
   
    @extend .nav  //继承.nav所有样式
    color:black;
}

//继承css默认样式
@extend a:hover;

//!optional标记（找不到不会报错）
@at-root
将嵌套的层提到父层

@debug，@warn，#error
将结果输出到控制台

控制指令和表达式
条件语句 if( )
//语法
if(布尔值,值1，值2)

if(true,1px,2px) //1px
@if

p {
   
    @if 1+1 == 2 {
   
        color:red;
    }
    @if 1+1 == 3 {
   
        color:blue;
    }
}

@if,@else if,@else

p {
   
    @if  {
   }
    @else if{
   }
    @to
    }
}

@for的两种形式
@for $var from through
@for $varfrom==to==循环中的参数$name,不运算#{$name}

@for KaTeX parse error: Expected '}', got '#' at position 32: … 3 { .item-#̲{ i} {width:2em*$i;}
}
@each循环
@each $var in

@each $var1,$var2…in <多维list or map>

@while

$i:0;
  @while $i<5 {
   
      .item-#{$i} {
   
          width:2em*$i;
      }
      $i : $i+1;
  }

混入样式@mixin
SASS可以指定一个自定义的样式

//定义一个混入样式
@

mixin mixinname{
   
    display:block;
    color:white;
}

//引入混入样式
body {
@include mixinname
}

//带参数的引入样式

@mixin mixinname ($para1,$para2){
   
    display:block;
    color:white;
}

body {
   
    @include mixname(2px,$value2) //可引入直接值和变量
}

//关键字参数（就是给参数起变量名，用于方便阅读）
body {
@include mixname($color:blue,$size:3) //
}

//可变参数…（参数数目可变）
@mixin mixinname($para…){ //参数后面加…
}
@content 内容混入
SASS可以自定义内容，并引入

//定义一个自定义内容name

@mixin name{
   
    @content
}

p {
   
    include name {
      //引入自定义内容name
        ..... //content
    }
}

函数指令
SASS可以声明函数

@function func_name ($para){
   
    @return $para*2
}

//使用

p {
   
    width: func_name(5);
 }