在这个问题上我还挺想趁此机会开个专栏。不过最新时间紧，就简要的写写吧。

首先我想明确一件事，那就是怎么去学好一项技能/一门语言/一种语法。我不反对熟能生巧，但是我更不赞成无脑罗列知识。

一、Scss是什么，为什么会出现Scss，Scss的出现给前端带来了什么，我们有多少必要去学习Scss

如果不搞懂上述的问题，知识难免成为机械的重复。

作为拥有一年半实际前端开发经验的小羊同学，使用的技术栈主要集中在jq和原生，vue用的就不多。对于css这块更是使用的很原始，几乎就是静态的层叠样式表，连@media都很少用，更不用提什么动画效果。
不过也正因如此，我个人写过很多类似于

ul li{}
ul li a{}
ul li .b{}

的代码，大量重复冗余的代码自然是程序员最讨厌的，但是作为前端，js都这幅德性了，还能指望css吗？

我个人认为css有三个最大的缺点：
一、css并不存在逻辑。这点是我认为css最欠缺的地方，不过目前貌似并没有任何一个工具能解决这个问题，css的动态调整依然时js在做。
二：css自身无合适的变量机制，虽然有--varible的语法，但是原生css的变量机制很难用。
三：css无法嵌套，导致css的可读性并不高，大部分时候就是只有写代码的人看看css，接手的人很容易一脸懵。

Scss解决了二和三，也就是变量的问题和嵌套的问题。（除非从底层改变css，否则问题一几乎无法单纯通过css完成）。Scss给前端带来的是更便于管理的css逻辑结构，更精简的css代码，以及更加优雅的语法。至于学习scss的理由~ 如果能躺着就有钱赚我连工作都不会去做。

二、Scss是如何解决上述问题的

变量问题：变量的问题非常简单，原生的css就支持，所以scss在此基础上只算是做了不大不小的推进。

Scss的变量声明

sass的变量头部使用$作为标识符。Scss中存在作用域的概念，所以如果一个变量要是在{}内部定义的，就不要想在外面使用了，在内部倒是没问题

$width:20px; //定义变量$width

//使用：
width:$width;
// 编译后：
width:20px;

div{
  $width:200px;
  width:$width; //正确
}
ul{
  width:$width; //错误
}

默认变量的使用

!default和!import正好相反。如果外面有定义fancybox-width被替换为外面定义的。

$fancybox-width: 400px !default;
.fancybox {
  width: $fancybox-width;
}

中划线和下划线混用

sass的中划线和下划线等效

$a-b:10px;
// 你甚至可以这么引用
width:$a_b;

个人认为这个语法极其弱智。但是如果碰见另外一个人真的用了这个特性，自己又不知道的情况下，可以想象到时候会有何等的卧槽！

嵌套css的解决。Scss的嵌套问题解决的还是不错的，不过对于嵌套属性这条我是坚决反对，反而像是偷鸡不成蚀把米。

嵌套css规则

.container{
    ul{
        li {}
       }
     p{}
     div{}
}

你甚至可以这么干

#content {
  background-color: #f5f5f5;
  aside { background-color: #eee }
}

嵌套属性（为了应付这条还是看一看，这条明显就是为了优化而优化，丧失了可读性，还不如等价于后的代码优雅）

nav{
  border{
    style:solid;
    width:1px;
    color:white;
  }
}


//等价于
nav{
  border-style:solid;
  border-width: 1px;
  border-color:white;
}

父选择器的标识符&。传送门。

混合器

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

//输出的css
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

三、杂七杂八

1、Scss文件中引入Scss文件

有两个文件a.scss和b.scss。只需要在a.scss文件内部使用语法
@import b，注意此处没有.scss后缀。具体原因传送门。不过我个人认为这个原因聊胜于无，还不如统一都要后缀。
！！！注意如果你要在scss文件中引入css文件，必须加上后缀。

如果我在文件a中引入了b，在生成css的时候会生成两个文件a.css和b.css，a.css中包含所有b.css中的样式。
如果我想只输出a..css，而且b.scss单纯的作为给a.scss服务。此时只需要将b.scss重命名为_b.scss，在a.scss中@import b，的确是b而非_b，这样做的话_b.scss就不会输出为b.css。类似于包的概念。

嵌套导入传送门，个人很讨厌的语法

待续