#0 - SCSS 不负责任快速入门

在铁人赛正式开始之前，想先写一下SCSS。
因为我的CSS全部都是SCSS写的...怕大家看不懂马上弃看 QQ
这一篇是简易的SCSS小抄说明，主要针对文章中出现SCSS的部分做简单说明。

会用SCSS是之前公司内部的风格，而SCSS用过真的回不去，主要原因是：

1. 可阶层化，可折叠！
2. 可模组化，重复利用！

SCSS是CSS 预处理器的一种，可以说是 CSS 语法的扩充，
是为了弥补 CSS 在大型专案维护性的不足，
SCSS的变数、混入、继承等功能，
让我们可以更有结构地撰写简洁、清晰且好维护的 CSS 程序码。
（参考：Sass/SCSS 基本语法介绍，搞懂CSS 预处理器）

起手式：SCSS环境

想要练习SCSS的话，最快的方法是Codepen CSS的设定按钮（右上角的 * )
选取SCSS编译器就可以使用。（会帮你把SCSS变成浏览器看懂的语言）

使用 Vue-Cli 在安装时就会问你要不要SCSS，也可以 npm/yarn SCSS套件，
并在撰写的时候宣告： Vue Cli传送器

一般写网页的时候就是要另外安装SCSS 编译器，搭配VS code套件。
我是用Live Sass Compiler
也可以用Gulp快速转译打包SCSS，可以看看这个影片：
Browsersync + Sass + Gulp in 15 minutes

阶层化 - 折叠起来让code好清楚！

SCSS 最基本的用法就是阶层，就把他下面那一层塞进去{}里面就好～
而 & —>就是指同阶层的意思

//SCSS
.container{
	.content{
		blablabla
	}
	&:before{
		hahaha
	}
}

//CSS
.container>.content{
blablabla
}

.container::before{
hahaha
}

变数 - 重复利用变数，改样式好轻松～

虽然CSS也有变数，但SCSS也很好用！在全域的地方宣告即可，不用多打什麽字～
但记得和其他CSS参数一起插入时，要使用#{}把变数匡起来

$color: rgb(255,255,255);

.container{
background: $color;
}

//官方案例
.icon-#{$name} {
background-image: url("/icons/#{$name}.svg");
position: absolute;
#{$top-or-bottom}: 0;
#{$left-or-right}: 0;
}

mixin - 多个变数组合重复利用！更强大

在JS里面，我们可以透过混合来重复利用类别。JS mixin的用法
SCSS里面也有一样的用法：

//SCSS
@mixin transition{
  transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

.menu-icon_hamburger{
     border-radius: 5px;
     @include transition;
}

//转译 CSS

.menu-icon_hamburger {
  border-radius: 5px;
  transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

还可以把变数丢进去

@mixin flex($direction){
flex-direction: $direction;
}

header{
@include flex(column);
}

@extend - 继承别人就不用努力写样式惹

当你需要使用另外一个class的样式时，使用继承的方式，就可以把他的样式抠过来～

//scss
.button-basic  {
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-blue  {
  @extend .button-basic;
  background-color: blue;
}

//CSS
.button-basic,.button-blue  {
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-blue  {
  background-color: blue;
}

@for - 处理同类型元素好方便～

可以用for循环，来帮忙一次选取相同的元素～和做相同变量的变化
其他还有while / each等类似的功能，有兴趣可以爬一下文件～

$base-color: #036;

@for $i from 1 through 3 {
  ul:nth-child(3n + #{$i}) {
    background-color: lighten($base-color, $i * 5%);
  }
}

@import - 分开管理再汇入真方便！

可以将SCSS变量和内容分开放置，才不会搞得一个文件落落长不好看～再用import的方法将他汇入到文件中。
另外可以在_.scss文件名称前，加上下底线，告诉SCSS编译器不用单独编译这个文件，这样就不会有很多文件需要被汇入了。

文件： _list.scss

//可以省略下底线和.scss
@import "list";
...开始写SCSS

其他

SCSS也可以使用清单，像阵列那样使用

//官方案例
$sizes: 40px, 50px, 80px;

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

还有很多好玩的功能再请大家自己去翻阅官方文件罗！

以上！

SCSS官方网站：https://sass-lang.com/ 可以再看更多SCSS的用法～

有任何错误或意见请批评指教