SASS预处理器

1.如何构建scss

创建sass文件,可在编译工具终端(vscode插件live sass)、控制台(sass ./css/index.scss:./css/index.css)编译出sass文件。

1.1文件结构:

SASS
    dist
        css
            main.css //自动生成
            main.css.map//自动生成
        index.html //引入css <link rel="stylesheet" href="./css/main.css">
    scss
        main.scss//创建scss

2.如何使用scss

2.1变量

你可以把反复使用的css属性值 定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一 次的属性值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。

sass使用$符号来标识变量(老版本的sass使用!来标识变量。改成$是多半因为!highlight-color看起来太丑了。)，比如$highlight-color和$sidebar-width。为什么选择$ 符号呢？因为它好认、更具美感，且在CSS中并无他用，不会导致与现存或未来的css语法冲突。

2.2颜色

index.html

SASS
    dist
        css
            main.css //自动生成
            main.css.map//自动生成
        index.html //引入css <link rel="stylesheet" href="./css/main.css">
    scss
        main.scss//创建scss

main.scss

$h1Color:skyblue;
$pColor:red;
$ulColor:blue;
​
h1{
    border:10px solid $h1Color;
}
p{
    color: $pColor;
}
ul{
    color: $ulColor;
}

注:设置同一个变量名引用时，后者会覆盖前者

如:

$h1Color:skyblue;
$pColor:yellow;
$ulColor:blue;
$ulColor:red;
h1{
    border:10px solid $h1Color;
}
p{
    color: $pColor;
}
ul{
    color: $ulColor; //显示的是$ulColor:red;
}

作用域变量：

$h1Color:skyblue;
$pColor:yellow;
$ulColor:blue;
​
h1{
    border:10px solid $ulColor;//显示为$ulColor:blue;引用全局变量
}
p{
    color: $pColor;
}
ul{
    $ulColor:red;
    color: $ulColor; //显示为$ulColor:red;变量在局部定义
}

!default 默认值,如果没有定义一样的变量，那么就是默认，有同样变量名就不用默认值

$h1Color:skyblue;
$pColor:yellow;
$ulColor:blue;
$ulColor:red !default;
​
h1{
    border:10px solid $ulColor;//显示为$ulColor:blue;
}
p{
    color: $pColor;
}
ul{
    $ulColor:red;
    color: $ulColor; //显示为$ulColor:blue;;
}

@import 引入

var.scss

$ulColor:blue ; //如果在后面加上一个默认值!default，那么就是引用main.scss中的$ulColor:red;

main.scss

@!import "./var.scss" //引入进来，var.scss定义的为默认值
$h1Color:skyblue;
$pColor:yellow;
$ulColor:red;
​
h1{
    border:10px solid $ulColor;//显示为$ulColor:blue;
}
p{
    color: $pColor;
}
ul{
    $ulColor:red;
    color: $ulColor; //显示为$ulColor:blue;;
}

2.3尺寸

$size 如果想要计算的话，可以+ - * / ($size+ $size- $size*)

$size:10px;//定义size为10px
​
h1{
    border:$size solid $ulColor;//$size*5 solid $ulColor
}

待更新........