【Sass/SCSS】预加载器中的“轩辕剑”

博客说明

文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！

说明

随着前端技术发展的越来越迅速，前端的样式也需要更加贴近时代的审美，那么CSS就需要承担更多的工作，（强调！这不是煽情！这是宣讲背景。😄），为了给CSS怼上去，预加载器出现了，没错，CSS用上了武器。Sass/SCSS——预加载器中的“轩辕剑”，这也不是我帮它吹，是它自己说的，下图为例。

官网地址：SASS中文网

什么是Sass，它与SCSS是啥关系

感觉这里有点绕，这是怎么回事，明明是SASS，但是很多地方写的是SCSS，网上一搜SCSS出现的全是SaSS的教程。

Sass (Syntactically Awesome StyleSheets)：

是由buby语言编写的一款css预处理语言，有严格的缩进风格。
和css编写规范有着很大的出入，是不使用花括号和分号的，这点让很多前端pym很难接受。
Sass 是一款强化 CSS 的辅助工具，是对 CSS 的扩展，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、继承(extend)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目，其后缀是.sass。

优点：使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，很多人认为这样做比 SCSS 更容易阅读，书写也更快速。

SCSS (Sassy CSS)：

一款css预处理语言，SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。SCSS 需要使用分号和花括号而不是换行和缩进。SCSS 对空白符号不敏感，其实就和css3语法一样，其后缀名是分别为 .scss。

此外，SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax)，以及早期的 IE 滤镜写法。

安装Sass

可以使用 npm来安装 Sass。

npm install -g sass

Sass变量

变量是一个比较大的改变，Sass 变量可以存储字符串、数字、颜色值、布尔值、列表、null 值

Sass 变量使用 $ 符号

语法

$variablename: value;

示例

$base-font: Helvetica, sans-serif;
$my-color: red;
$my-font-size: 18px;

body {
  font-family: $base-font;
  font-size: $my-color;
  color: $y-font-size;
}

转换为CSS代码

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

其实就是把变量的使用直接放入对应的值内。

变量的作用域

Sass的变量其实是有作用域的，Sass 变量的作用域只能在当前的层级上有效果

$myColor: red;

h1 {
  $myColor: green;   // 只在 h1 里头有用，局部作用域
  color: $myColor;  // green
}
p {
  color: $myColor;  // red
}

提升全局变量

Sass 中可以使用 !global关键词来设置变量是全局的

$myColor: red;

h1 {
  $myColor: green !global;  // 全局作用域
  color: $myColor;  // green
}

p {
  color: $myColor; //  green
}

对于Sass全局变量，可以用一个文件来存储，然后其他文件@include 来包含该文件，这样让代码结构清晰，修改也比较方便。

Sass的嵌套规则

这个是方便我们书写的好东西，也是最显而易见的新增。

嵌套

看看代码的区别就了解了

scss代码

nav {
  ul {
    margin: 0;
    padding: 20px;
  }
  li {
    color: #FFFFFF;
  }
}

css代码

nav ul {
  margin: 0;
  padding: 0;
}
nav li {
  color: #FFFFFF;
}

发现下面的这种写法比较麻烦，主要是对层级表现的不太明显。

嵌套属性

在sass中部分属性也是可以嵌套的。

CSS 属性中有一些有同样的前缀，例如：font-family, font-size 和 font-weight ， text-align, text-transform 和 text-overflow。这些公共的属性就可以抽离出来。

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

// css
font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;

导入文件@import

在组件化开发的年代，Sass当然也要卷起来，利用@import可以让我们减少 CSS 重复的代码，节省开发时间。

语法

@import filename;

与CSS@import的区别

CSS @import 指令在每次调用时，都会创建一个额外的 HTTP 请求。

Sass @import 指令将文件包含在 CSS 中，不需要额外的 HTTP 请求。

下划线underscore风格命名

Sass的下划线分割命名，我相信各位pym看了别人开源的代码也会发现很多吧，类似_partial.scss、_colors.scss ，但是这种命名绝不是闲的蛋疼，恰恰是利用了Sass @import 导入文件的优势，让导入的文件不被编译成CSS。这种风格也叫Sass Partials。

注意：请不要将带下划线与不带下划线的同名文件放置在同一个目录下，比如，_colors.scss 和 colors.scss 不能同时存在于同一个目录下，否则带下划线的文件将会被忽略。

混合@mixin

用来分组那些需要在页面中复用的CSS声明，可以通过向Mixin传递变量参数来让代码更加灵活，该特性在添加浏览器兼容性前缀的时候非常有用。

示例

@mixin important-text {
  color: red;
  font-size: 24px;
  font-weight: bold;
}

感觉没啥高大上的啊，是的，其实就是定一个代码块，让别的代码来复用的，你可以把它当成一个公共方法。

@include 使用混入

.text {
  @include important-text;
}

注意：Sass 的连接符号 - 与下划线符号 _ 是相同的，也就是 @mixin important-text { } 与 @mixin important_text { } 是一样的混入。

混入包含混入

@mixin special-text {
 @include important-text;
 @include important-color;
}

混入传参数

混入可以接收参数。

@mixin bordered($color, $width) {
  border: $width solid $color;
}

.my-text {
  @include bordered(blue, 1px);  // 调用混入，并传递两个参数，计算边框
}

这样一看不是更像方法了吗

混入可变参数

有时并不能确定一个混入到底要传入多少参数，可以使用...。

@mixin box-shadow($shadows...) {
   -moz-box-shadow: $shadows;
   -webkit-box-shadow: $shadows;
   box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

浏览器前缀使用混入

浏览器前缀使用混入也是非常方便的

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.myBox {
  @include transform(rotate(20deg));
}

像类似的浏览器前缀简直是必需品！

@extend 与继承

在HTML 中我们一个标签是不是这样写的 class="button-basic button-report"，有的可能有很多个，那就更长了。可以利用@extend 让代码得到复用。

语法

@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。

使用环境

如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @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;
}

代码解析

像.button-report需要用到.button-basic的基本属性，就可以直接使用@extend .button-basic来获取，这样代码的复用性就有了比较大的提高，而且结构性也会越来愈好，隔壁好朋友HTML也不用天天吃“烤串”了哈😂。

写在最后的话

首先希望我的CSS写的越来越好，其次，希望看到的pym也和我一样，CSS写的越来越好。毕竟Sass可是“轩辕剑”（Less出双倍吗？）

感谢

万能的网络
以及勤劳的自己，个人博客，GitHub测试，GitHub
公众号-归子莫，小程序-小归博客

【Sass/SCSS】预加载器中的“轩辕剑”