SCSS

定义变量

$primary: #409eff;
$success: #67c23a;
$warning: #e6a23c;
$danger: #f56c6c;
$error: #f56c6c;
$info: #909399;

文件导入

@import '@/assets/style/var.scss';

代码复用@mixin

@mixin clearfix {
  &:after {
    content: '';
    display: table;
    clear: both;
  }
}

使用

.div {
  @include clearfix;
}

给混合器传参

@mixin ellipsis($width, $height) {
  width: $width;
  height: $height;
  background: #000;
}

使用

.scss {
  color: $primary;
  @include ellipsis(100px, 100px);
}

继承

.scss {
  color: $primary;
  @include ellipsis(100px, 100px);
}
.second{
  @extend .scss;
  background: #000;
}

解析文件

.scss,
.second {
  color: $primary;
  @include ellipsis(100px, 100px);
}
.second {
  background: #000;
}

占位选择器

该代码块只用来继承，只当代码块被调用时生效，否则将会被当作冗余文件过滤掉，不会添加到编译后的css文件

%temporary {
  font-size: 20px;
  color: #000;
}

使用

.scss {
  @extend %temporary;
}