【刨根问底】SCSS/SASS 与 CSS 到底有哪些不同？

你不会还觉得是名字不同、语法不同、文件后缀名不同吧？

传统的回答

1. 语法不同，SCSS是CSS预处理器的一种，具有变量、函数、嵌套、运算、混入(Mixin)、继承等特性，可以大大提高CSS的编写效率。（完全正确，但是具体呢？）
2. 文件后缀名不同。（拜托！谁不知道！）
3. 可读性不同，SCSS具有嵌套、变量等高级属性，可读性更好。（是是是，不然干嘛不直接用CSS的平铺写法呢）

真正好的回答

1. 当CSS属性具有相同的前缀，可以用嵌套表达式合并前缀，无需重复，比如font-，text-。(这不就体现出真实场景了！)

font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}

text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
}

3. 能够嵌套的写CSS选择器，而不是平铺或者摆成一行。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}      

5. 对于@import的处理方式不同，CSS是需要发送一个额外的HTTP请求，而SASS是将其转为CSS代码嵌入因此不需要额外的请求。

@import "variables"; // 不需要指定后缀名，可以导入sass、scss、css
@import "colors";
@import "reset";

7. 支持@mixin和@include，在复用代码的情况下，还能传参。

@mixin name {
  property: value; 
  property: value; 
  ...
}

// example
@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

/* Define mixin with two arguments */
@mixin bordered($color, $width) {
  border: $width solid $color;
}

.myArticle {
  @include bordered(blue, 1px);  // Call mixin with two values
}

.myNotes {
  @include bordered(red, 2px); // Call mixin with two values
}

9. 支持@extend，在对于大量类似但是有部分不同的情况下，很有作用。

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

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

.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

11. Sass中的方法，索引都是从1开始而不是0开始的。