CSS Preprocessor

Sass 是一个 CSS Preprocessor,那么什么是 CSS Preprocessor?

根据 MDN 的解释

A CSS preprocessor is a program that lets you generate CSS from the preprocessor’s own unique syntax.

一个 CSS Preprocessor 通过新的语法对现有的 CSS 进行功能扩展,但是因为浏览器还没有原生支持,最终还是需要生成 CSS。

举个例子,下面是一段原生的 CSS

nav {
  background-color: red;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline-block;
}

在 Sass 中支持规则嵌套(nesting),你可以这样写,更简单明了

nav {
  background-color: red;

  ul {
    list-style: none;

    li {
      display: inline-block;
    }
  }
}

最后再由 CSS Preprocessor 帮你生成第一段的原生 CSS

Sass (SCSS), Less …

CSS Preprocessor 有不同的实现,常用来作比较的有 Sass 和 Less,此外还有如 Stylus。不同的实现提供的功能会有些许的区别,但这些功能的差别对选择哪一个的影响不应该太大。

Sass, Less, Stylus 目前对我来说最大的区别就是名字不一样。试用 Sass 是因为用的一些前端模板似乎不少都用了 Sass,另外 Bootstrap 4 采用了 Sass 是一个有力的背书。

学习 Sass,常有另一个缩写 SCSS 伴随出现(大小写逼死强迫症),这两个容易混淆的点最好先理清

首先,大的层面,Sass 可以指 CSS Preprocessor 语言/程序,而它有两种语法:

  1. Sass (the indented syntax): 最初的旧的语法,特点是用缩进和换行分隔代码,文件后缀通常为 .sass
  2. SCSS (Sassy CSS): 和 CSS 一样用大括号和分号分隔代码,文件后缀通常为 .scss

SCSS 兼容 CSS,把一个 .css 文件后缀改为 .scss 它就应该是合格的 SCSS 文件,然后可以在此基础上按照 SCSS 的语法进行修改,这是一个可能的方便之处。

本文的内容会基于 SCSS,下文如果出现 Sass,按「使用了 SCSS 语法的名为 Sass 的 CSS 扩展」理解

Get started

首先安装 Sass 程序,安装方式多样,随意。

安装完成后,就可以用 Sass 程序将现有的 Sass 文件编译为 CSS

sass source/stylesheets/index.scss build/stylesheets/index.css

就好像学计算机原理,汇编语言上面是 C 语言,C 语言上面是各种「高级语言」,Sass 也可以看作是在 CSS 之上的“更高级”的语言。取一些简单的功能,编写一个类 Sass 的编译器应该是个有意思的练手项目(嗯我就想想)。

使用 CSS Preprocessor 带来的流程的变化是,修改不再是直接刷新浏览器就能所见即所得,而是增加了编译的步骤。如果文件很多、修改频繁,就是时候引入如 webpack 这样的编译工具来简化操作。

前端开发出现很多工具,还在学 HTML / CSS / JS 的新手乍一看,往往对这些工具的作用摸不着头脑,还觉得有点吓人。得等到相关的需求出现,才能逐渐将这些存在合理化。

然后呢,必然有一个阶段折腾配置文件的时间比实际写代码要多。

好在我也不是什么正经前端程序员,工具这事很多时候也就是 bike-shedding,不纠结。

也许将来某个 CSS 新版本某个 CSS Preprocessor 实现转正,浏览器支持,就可以直接用了。

Features

这部分的内容和代码取材自 freeCodeCamp,按照我的理解重新组织和改述。

Sass 的主要功能

从 Sass 的主要功能来看,目的一是更清晰的代码结构,再是更少的代码量,DRY,减少「熵」

因此学习 Sass 合适的时机是:有必要的 CSS 知识,也在使用的过程中感受到了存在的限制。

1. 文件引用

要被引用的 Sass 文件名以 _ 字符开头,例如 _mixins.scss ,该文件就不会被编译为 CSS 文件。

引用时使用 @import

@import 'mixins'

2. 选择器继承

使用 @extend 使 .big-panel 继承 .panel 的规则,另附加自己的规则

.big-panel{
  @extend .panel;
  width: 150px;
  font-size: 2em;
}

3. 变量

$variable-name: value;

4. 函数

使用 @mixin 定义函数,使用 @include 调用函数

@mixin box-shadow($x, $y, $blur, $c){ 
  -webkit-box-shadow: $x, $y, $blur, $c;
  -moz-box-shadow: $x, $y, $blur, $c;
  -ms-box-shadow: $x, $y, $blur, $c;
  box-shadow: $x, $y, $blur, $c;
}

div {
  @include box-shadow(0px, 0px, 4px, #fff);
}

5. 流程控制

条件判断

使用 @if, @else if@else

@mixin text-effect($val) {
  @if $val == danger {
    color: red;
  }
  @else if $val == alert {
    color: yellow;
  }
  @else if $val == success {
    color: green;
  }
  @else {
    color: black;
  }
}

循环 - for

使用 @for ,有 “from start throught end”(包含 end)和 “from start to end”(不包含 end)两种方式。

@for $i from 1 through 12 {
  .col-#{$i} { width: 100%/12 * $i; }
}

@for $i from 1 to 13 {
  .col-#{$i} { width: 100%/12 * $i; }
}

循环 - while

使用 @while

$x: 1;
@while $x < 13 {
  .col-#{$x} { width: 100%/12 * $x;}
  $x: $x + 1;
}

循环 - each

使用 @each 遍历集合元素

@each $color in blue, red, green {
  .#{$color}-text {color: $color;}
}

$colors: (color1: blue, color2: red, color3: green);
@each $key, $color in $colors {
  .#{$color}-text {color: $color;}
}

6. 其它

通过上面的代码示例可知 Sass 支持简单的数学运算,还可以使用 #{} 在代码中插入变量的值。


(完)