面试题目及最佳答案，SASS教学＋SCSS：CSS 再进化，重要概念一网打尽

SASS 执行

首先在专案资料夹下，生成index.html 和两个资料夹css、sass ，然后在sass 下面新增一个style.scss，这支档是我们开发，主要编写样式的档案。

我们现在要试着把sass 资料夹里的style.scss ，编译成浏览器看的懂的.css 副档名型式。

所以下指令把style.scss 档案转译生成style.css，并放置在css 资料夹里，如下：

$ sass sass/style.scss:css/style.css

如果顺利的话，应该会看到「 css 」档案夹里，新增了两个档案，分别是「 style.css 」和「 style.css.map 」，这边比较要留意的是style.css（浏览器主要解读这只档）。

1. 需留意「 当前路径」，这会影响到style.scss 档案编译生成style.css 的路径，若不对会报错

2. 在index.html 里面，记得引入style.css 档案（ style.scss 不需引入），才会有样式出现

若持续有样式需新增，每次一编写完style.scss 就得执行一次 $ sass sass/style. scss :css/style. css指令，才能在浏览器上看到变化，相信一定会很想撞墙

所以这时可以改下另一个指令（加上 --watch 参数，若原有的style.css / style.css.map 已存在，会自动覆盖，不存在的话会自动生成新的），如下：

$ sass --watch sass/style.scss:css/style.css

执行后，会发现sass 已经开始在监听style.scss ，若这只档案有修改，style.css 变会即时的进行编译，给浏览器做使用，

在开发过程中，一个专案可能不只有一个样式档，假如有多个档案需同时进行监听，这边提供几个方式给大家：

1. 重复执行：看有几个档案需监听，就输入几次。

$ sass --watch path/to/filename. scss :path/filename. css

2. 一次执行：看有几个档案需监听，一次下指令。

$ sass --watch path/filename1. scss :path/filename1. css path/filename2. scss :path/filename2. css path/filename3. scss :path/filename3. css

3. 指定目录下全部监听：监听sass 目录下的sass/scss 档案到指定的css 目录下（下面指令为两个资料夹在同一层）

$ sass --watch sass:css

4. 当前目录下全数监听，并直接生成css 档案。

$ sass --watch .

到了这一步，若顺利的话，相信你也学会，如何在编写sass/scss 档案时，指定的css 档案可以同步的进行编译，并让浏览器能够顺利的出现画面。

个人觉的sass 学习比较麻烦的就是安装＋执行这个章节，后面就是语法部分，语法就相对简单明了了，原来就有css 开发经验的捧有们，相信也可以很快就入手的

接下来，我们开始前进到语法部分

3. 嵌套

---

SASS 提供CSS 语法扩展，如：嵌套功能（ N