Sass和Scss

Sass：https://www.sass.hk/

Sass是什么

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言，它诞生于2007年，是最大的成熟的 CSS 预处理语言。最初它是为了配合HAML（一种缩进式 HTML 预编译器）而设计的，因此有着和 HTML 一样的缩进式风格。

Scss是什么

Scss 是 Sass 3 引入新的语法，是Sassy CSS的简写，是CSS3语法的超集，也就是说所有有效的CSS3样式也同样适合于Sass。说白了Scss就是Sass的升级版，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。另外，SCSS 还能识别大部分 CSS hacks（一些 CSS 小技巧）和特定于浏览器的语法，例如：古老的 IE filter 语法。

由于 Scss 是 CSS 的扩展，因此，所有在 CSS 中正常工作的代码也能在 Scss 中正常工作。也就是说，对于一个 Sass 用户，只需要理解 Sass 扩展部分如何工作的，就能完全理解 Scss。大部分扩展，例如变量、parent references 和 指令都是一致的；唯一不同的是，SCSS 需要使用分号和花括号而不是换行和缩进。

Scss 与 Sass异同

Sass 和 Scss 其实就是同一种东西，我们平时都称之为 Sass，两者之间不同之处主要有以下两点：

1.文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 Scss 是以“.scss”后缀为扩展名。

2.语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 Scss 的语法书写和我们的CSS 语法书写方式非常类似。

 一、变量$

SassScript 最普遍的用法就是变量，变量以美元符号开头，赋值方法与 CSS 属性的写法一样

scss：

// scss
$color: red; // 定义变量，//双斜杠注释不会出现在编译后的css，/*注释*/ 格式会出现在css
.box {
  color: $color; // 使用变量
}

编译后css：

/* css */
.box {
  color: red;
}

二、嵌套规则

scss：

// scss
$color: red; // 定义变量
.box {
  color: $color; // 使用变量
  .first {  
    font-weight: bold;
  }
}

编译后css：

/* css */
.box {
  color: red;
}
.box .first {
  font-weight: bold;
}

三、父选择器&

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器（伪类等）

scss：

// scss
.box {
  &:hover{  // & 必须作为选择器的第一个字符，这里&就表示.box
      color: blue;
  }
}

编译后css：

/* css */
.box:hover {
  color: blue;
}

四、属性嵌套

有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中

scss：

// scss
.box {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

编译后css：

/* css */
.box {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold;
}

五、混合指令（Mixin+include）

混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class

混合指令的用法是在 @mixin 后添加名称与样式；使用 @include 指令引用混合样式，格式是在其后添加混合名称，以及需要的参数（可选）

scss：

/* scss */
// 定义
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}
// 使用
.box {
  @include large-text;
}

编译后的css：

/* css */
.box {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
}

参数用于给混合指令中的样式设定变量，并且赋值使用。在定义混合指令的时候，按照变量的格式，通过逗号分隔，将参数写进圆括号里。

混合指令也可以使用给变量赋值的方法给参数设定默认值，然后，当这个指令被引用的时候，如果没有给参数赋值，则自动使用默认值

scss：

/* scss */
@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p {
  @include sexy-border(blue);
}
h1 {
  @include sexy-border(blue, 2in);
}

编译后的css：

/* css */
p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }

h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed; }

六、继承（@extend）

当一个元素使用的样式与另一个元素样式完全相同，但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class，一个通用样式，一个特殊样式。假设现在要设计一个普通错误样式与一个严重错误样式，一般会这样写：

<div class="error seriousError">
  Oh no! You've been hacked!
</div>

css：

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

使用 @extend 可以避免上述情况，告诉 Sass 将一个选择器下的所有样式继承给另一个选择器。

scss：

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

编译后的css：

/* css */
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.seriousError {
  border-width: 3px; }

 

 更多的参考官网吧 — —！！