CSS 预编译语言 Sass 快速入门教程

CSS 预编译语言概述

CSS 作为一门样式语言，语法简单，易于上手，但是由于不具备常规编程语言提供的变量、函数、继承等机制，因此很容易写出大量没有逻辑、难以复用和扩展的代码，在日常开发使用中，如果没有完善的编码规范，编写的 CSS 代码会非常冗余且难以维护。

为了解决上述问题，出现了很多 CSS 预编译语言，CSS 预编译语言是基于 CSS 语言的语法扩展，除了能解决上述缺乏语言特性带来的问题之外，还支持嵌套书写，减少重复输入父级选择器（可理解为 CSS 中的继承机制），提高了代码的可读性和编写效率，常见的预编译语言有 Less、Sass 等。

Sass 与 Less 等其它预编译语言不存在优劣之分，一般来说，Sass 的功能更加强大或者说 Sass 的语言层面更接近于一门完整的编程语言，而 Less 则更接近于 CSS 语法，所以我们在 Vue 中通常会使用 Sass 编写样式代码（参考我们在 API 项目教程中的配置 JavaScript 和 Sass 这篇教程），Laravel 默认提供的样式代码也是 scss 结尾的，也是使用的 Sass 语言。所以我们来了解下 Sass 的安装和使用，非常简单，即学即用。

Sass 简介和安装

Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。它允许你使用变量、嵌套规则、混合、导入等众多功能，并且完全兼容 CSS 语法。

Sass 具有两种不同的后缀名分别对应两套语法，最早 Sass 使用的是缩进式语法，使用缩进来区分代码块，并通过分号将具体样式分开，这种语法以 .sass 作为后缀；另一种使用了和 CSS 一样的块语法，这种语法以 .scss 作为后缀。后者更加兼容原生 CSS 语法，所以我们通常使用后者，接下来的教程我们也使用这种语法。

编写好 Sass 文件后，需要将其编译为 CSS 文件才能在项目中使用，为此我们需要安装相应的编译工具，Sass 官方解释器通过 Ruby 编写，同时也有其他语言实现的版本，最常见的就是 C 语言实现的 libSass，NPM 扩展包 node-sass 就封装了对 libSass 的实现，所以我们可以通过安装这个前端扩展包来编译 Sass 文件，不过在 Laravel 项目中，开箱提供了 Laravel Mix 进行前端资源的编译，当我们通过 npm install 安装 laravel-mix 的过程中，系统会自动安装 laravel-mix 声明的依赖，其中就包括了编译 Sass 所需要的 node-sass，我们无需再额外安装这个扩展包，这些事情 Laravel Mix 在底层默默帮我们完成了。

Sass 使用语法

Sass 提供了变量、嵌套、混合、导入、循环等功能，不过作为有其他编程语言功底的我们来说，学习起来非常简单，花个一个小时就熟悉了，下面我们逐一来介绍这些功能。

变量

和 PHP 一样，Sass 的变量通过 $ 作为标识符，Sass 支持的数据结构包括数字、字符串、数组、颜色、布尔值、null、List、Map、函数引用（如果你不了解 Python 或 Java 这类编程语言，也不熟悉 Redis 中的数据结构，可以将 List 理解为 PHP 中未指定键名的索引数组，将 Map 理解为以字符串作为键名的关联数组）：

// 简单变量
$primary-color: #333;

// 引用变量
body {
    color: $primary-color;
}

// List
$font-stack: ('Helvetica', 'Arial', sans-serif);

body {
    font: 100% nth($font-stack, 1);  // 获取 List 的值，索引从1开始，不是0！
}

// Map
$breakpoints: (
    small: 767px,
    medium: 992px,
    large: 1200px
);

// 变量作为插入变量需要通过 #{} 引入，通过 map_get 函数从 Map 中获取值
@media (min-width: #{map-get($breakpoints, small)}) {

}

$name: foo;
$attr: border;
p.#{$name} { #{$attr}-color: #44b336; }

有两个需要注意的地方，和一般编程语言数组或列表索引从 0 开始不同，Sass 中的 List 索引从 1 开始；另外，变量作为插入变量，即作为选择器或属性名的时候需要用 #{} 引入，PHP也有类似概念，只不过是通过 {} 引入的。

嵌套

Sass 的嵌套语法也很实用，在此之前，我们只能通过多个 CSS 样式定义来解决嵌套问题：

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

相信我不用过多解释，你也能理解这段代码的含义，以及在样式代码编写过程中，带来的效率提升。

混合（Mixin）

有的时候，我们可能有一段 CSS 样式代码需要在多个地方使用，这可以通过 Sass 提供的混合（Mixin）功能来实现，定义混合代码的时候需要在选择器前面加上 @mixin 标识，引用混合代码的时候需要通过 @include 来引入：

// 清除浮动
@mixin clearfix {
    zoom: 1;
    &:before,
    &:after { content: ""; display: table; }
    &:after {
        clear: both;
        visibility: hidden;
        font-size: 0;
        height: 0;
    }
}

div { @include clearfix; }   // 使用 mixin

函数

函数和混合有点类似，不过函数更加强大，可以传入参数并实现运算功能，函数通过 @function 标识声明，函数名允许出现短划线 -，函数体内可以使用在函数声明之前定义的所有变量，同时计算时会带上变量声明时的单位：

$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
    @return $n * $grid-width + ($n - 1) * $gutter-width;
}

使用函数时直接调用函数即可：

#sidebar { width: grid-width(5); }

控制结构

与 Blade 模板类似，Sass 为控制结构提供了各种指令，如 @if、@else、@for、@each、@while 等：

$type:sass;
// 条件判断，根据不同条件定义不同的样式
p {
    @if $type == less {
        color: green;
    } @else if $type == sass {
        color: red;
    } @else {
        color: black;
    }
}

// 循环，定义多个样式
@for $i from 1 through 3 {
    .item-#{$i} { width: 2em * $i; }
}

// 遍历，类似 foreach，也是定义多个样式，用于遍历 Map 结构
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
    #{$header} {
        font-size: $size
    }
}

需要注意的是 @for $i from start through end 还可以改写成 @for $i from start to end，不同之处在于前者包括 end，后者不包括，另外如果要实现逆序的话，可以将 start 和 end 的值倒过来。

导入

Sass 支持通过 @import 指令导入其它 Sass 文件，既可以导入本地开发文件，也可以导入前端依赖库中的文件，还可以导入网络字体文件，以 Laravel 自带的 resources/sass/app.scss 为例：

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

在导入 Sass 文件的时候，可以省略文件后缀。

继承

Sass 还支持样式继承，我们通过 % 前缀指定用于继承的样式，然后在需要继承的地方提供 @extend 指令继承相应的父类样式：

// 以%开头的父类不会渲染
%message-shared {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
}

.message {
    @extend %message-shared;
}

.success {
    @extend %message-shared;
    border-color: green;
}

.error {
    @extend %message-shared;
    border-color: red;
}

.warning {
    @extend %message-shared;
    border-color: yellow;
}

操作符

和其他常规编程语言一样，Sass 支持对变量进行+、-、*、/、%操作。

结语

好了，通过以上语法的介绍相信你已经具备了编写 Sass 样式文件的能力，在基于 Laravel + Vue.js 驱动的项目中，我们通常会在两个地方编写样式代码，一个是 resources/sass 目录下独立的 .scss 文件，另一个是 Vue 组件中的 <style lang="scss"></style> 中，我们在属性中设置 lang="scss" 表示这里面是 Sass 代码，需要 Laravel Mix 编译的时候将其编译到指定的 CSS 文件中。

声明：本教程只是 Sass 快速入门教程，不代表 Sass 的全部功能特性，更多语法请参考官方文档。