scss的使用

Scss/Less

less 和 less 作为样式的预处理语言，相比于 css,scss 等在写法上具有便利性，比如样式之间的嵌套，自定义变量 @mixin @include 和@ extend 的使用；灵活的使用和应对复杂的场景，使得预处理语言更受开发者的青睐；但归其本质，都是对于 css 写法上的改进，在打包及编译的期间最终都是编译成 css; 在文件名的写法上可以规避；比如（-home.scss）此种的文件名可以跳过转换成 css 的过程；

TIPS

安装相关的依赖，此处省略

自定义变量的使用

$textl: center;
$maincolor: green;
$titlefont: 20px;

.page {
  text-align: $textl;
  color: $maincolor;
  font-size: titlefont;
}

@mixin 及其@include 的使用

@mixin myarticle {
  color: red;
  font-size: 20px;
  letter-spacing: 1px;
  margin: 10px;
}

.articleOne {
  @include myarticle;
  padding: 20px;
}

@extend 的使用

.button {
  background: green;
}
.button-1 {
  @extend .button;
}
.button-2 {
  @extend .button;
}

条件运算符 @if @else @while @each

略