SASS 预处理器

通常为了更加方便的编写客户端代码，一般我们会使用预处理器，现目前koala还算是比较火的独立编译器。
使用预处理器，会很大程度上降低我们的代码编写量，浏览器的兼容性问题是一直存在的，通常我们会采用css重置技术和加前缀这两种方式，为了解决浏览器兼容性问题，一般我们会写很多行相同的代码，而预处理器就很好的解决了这一点，它会自动生成多种浏览器内核的前缀

如果不想安装独立的编译器，那安装VsCode里的预处理器插件就是一个很好的选择，在VsCode里搜索插件live sass，启动插件，新建一个后缀名scss的文件，按住快捷键f1（fn+f1）弹出命令框输入>live sass:whatch sass启动监听器，它会自动新建两个同名，后缀分别为css和css.map的文件，我们只需要在html中连接自动建立css文件，就可以调用里面的样式，在sass中编码的同时，插件会实时更新css文件。

以下为一些简单的scss操作规则

字符编码集：
@charset “utf-8” ; 当写中文时需要书写编码集来解析中文字符
添加的注释可实时更新至css文件，VsCode中默认注释为单行注释（Ctrl+/）
scss多行注释（shift+alt+a），也可以自己更改快捷键

嵌套：

div{
    p{}
}

这里嵌套默认p为div的后代元素，要更改关系只需加相应符号例

div{
    >p{}
}

p为div的子元素

变量：
sass使用$来识别变量书写格式：$变量名:变量值；
注：变量名是自定义的 ，变量值是需要给予属性的值
变量必须先定义后引用
变量中可以包含另一个已定义变量的变量名

$text:red;
$text-border: 25px solid $f90;

单变量 :
例：$size:18px;

$size:18px;
p{
font-size:$size;
}

混合器:
方式1：

@mixin flex-container{
display:flex;
justify-content:center;
align-items:center;
}
div{
    @include flex-container;
}

方式2：

@mixin flex-container($main-align,$cross-align){
display:flex;
justify-content:$main-align;
align-items:$cross-align;
}
div{
    @include flex-container(flex-start,center)
}

在引用混合器时括号内依照定义混合器中变量的顺序给值，顺序需对应不可少给值
方式3：

@mixin flex-container($main-align,$cross-align:centrt){
display:flex;
justify-content:$main-align;
align-items:$cross-align;
}
div{
    @include flex-container(flex-start)
}

给实参定义默认值，如果未传入参数则用默认值，书写时尽量将设有默认值的参数放后，以减少代码书写量