Sass

Sass

是CSS的扩展语言（预编译语言）。在CSS 语法的基础上增加了变量 、嵌套、混合、导入等高级功能。（LESS 与 Sass 相似）

Sass 使用方式

1、新建文件，后缀名为.scss
2、安装插件，Easy Sass
3、页面html 引入 编译后的css 文件

Visual Studio Code 推荐安装插件 （Easy Sass）

变量 $

SassScript 最普遍的用法就是变量，变量以美元符号开头($ )，赋值方法与 CSS 属性的写法一样：

$width: 5em;

//直接使用即调用变量：

#main {
  width: $width;
}

嵌套 （父 子嵌套）

父选择器包含嵌套子选择器的样式内容。

.sidebar {
  width: 300px;
  .item {
    width: 500px;
  }
}
编译后：
.sidebar{  width: 300px;}
.sidebar .item{  width: 500px;}

混合宏

1.声明@mixin name(名称) { 执行代码块}
@mixin是声明宏的关键字
2.调用@include 名称;

定义：
@mixin item($w,$h,$c) {
    position: absolute;
    width: $w;
    height: $h;
    background: $c;
}
使用：
.footer{
 @include item(100%,50px,yellow);
}

编译后：
.footer {
  position: absolute;
  width: 100%;
  height: 50px;
  background: yellow;
}