sass基本语法

运行

安装 sass

npm install sass -g

命令

sass 文件/路径:编译后的路径/文件

四种模式：

0. 嵌套输出方式 nested
1. 展开输出方式 expanded
2. 紧凑输出方式 compact
3. 压缩输出方式 compressed

混合 @mixin @include

将公共的样式统一

可以携带参数也可没有参数

// 混合
@mixin alter {
  color: red;
  a {
    width: 50px;
  }
}
​
@mixin warp($color) {
  color: $color;
}
​
.box {
  width: 100px;
  height: 100px;
  @include alter;
  @include warp(red)
}

继承 @extend

继承其他选择的样式

.clor {
  color: red;
}
.warp {
  @extend .clor;
  list-style: none;
}

引入 @import

在scss文件中引入在scss文件，以下划线开头的文件默认不会被编译，引入的时候直接写路径和文件名称，不需要写下划线，引入的文件，在打包的时候会在一个文件中体现出来