老梁的专栏

这个版本的 Sass 语法一般称为 Sass，后来经过社区的不断努力，引入了新的语法，叫 SCSS，全称 Sassy CSS，预处理器也从 Ruby Sass，经过 LibSass，最终升级到了现在的 Dart Sass，也是我们本系列教程用到的版本。前面的教程已经介绍过，Sass 是 CSS 的扩展语言，也是一个预处理器，它可以将 Sass/SCSS 语法写成的脚本转化成 CSS 代码。但是这个脚本语言写成的样式表，并不能直接在浏览器中运行，必须转化成 CSS 才可以，实现这个转换的便是预处理器。

Sass 有两种语法，一种是缩进式，和 Ruby 有点像，另一种是大括号式，和 CSS 本身的语法很像。这两种语法要分开使用，不能混用，其中缩进式一般叫做 Sass，对应的文件后缀为，大括号式叫做 SCSS，对应的是。不过两种语法可以通过SCSS 的语法因为和 CSS 非常类似，学习成本比 Sass 低，目前已经成为主流。

Sass 是一种 CSS 的扩展语言，也是一种脚本语言，需要转换成 CSS 才能在浏览器中使用。同时，Sass 还是一个预处理器（preprocessor），用于完成 Sass 代码到 CSS 代码的准换。所以，当我们谈论 Sass 时，除了指代它作为一门脚本语言的语法，还包括预处理器的概念。作为预处理器，它的安装方式有很多种，下面我们以目前最流行的 Dart Sass 为例，逐一介绍。

本篇是 Sass 教程的入门篇，主要讲述 Sass 的诞生背景以及如何提高我们的开发效率。

本篇要介绍的特性在指定媒介的基础上更进一步，可以精确到屏幕尺寸。

配合background和可以实现线性（linear）和辐射（radial）渐变。

本篇要介绍的属性是transform，它可以将 CSS 的盒子变换成另外的形状。我们知道，CSS 的盒子是方形的，从几何变换的角度来看，transform要做的是改变盒子在 x 轴和 y 轴上的坐标。

CSS 提供了很多处理背景的手段。

CSS Transitions 让我们不写一行 JavaScript 代码也能实现过渡动画。当鼠标悬浮于某个链接时，它的颜色会从瞬间变化为。这个变化因为没有过渡，会显得特别生硬。有了transition动画效果就有了，当鼠标悬浮在链接上时，颜色会发生渐变，非常平滑。这里的transition表示所有的属性在半秒内完成线性过渡，没有延迟。注意，这么多渐变属性中，只有所以最简单的渐变可以写成。

属性选择器可以定位到拥有某个属性的元素，甚至可以精确到具体的属性值。

CSS 的 at 规则功能十分强大，有的可以引入（import）其它 CSS 文件，有的可以将 CSS 作用于特定媒体（media），有的可以加载字体（font）。at 规则以 “@” 开头。

我们已经学习过——名称、RGB 以及 16 进制值。CSS3 又带来了另一种颜色定义方式——，三个字母分别表示色相（Hue）、饱和度（Saturation）和亮度（Lightness）。HSL 和 RGBa (“a” 表示 “alpha” 值) 适用于任何表示颜色的属性，例如color,,和box-shadow。

前面我们学习过，，这几种选择器配合起来使用可以让我们精确定位 HTML 元素。本篇要介绍的几个功能更加强大。

阴影可以让元素“浮起来”，盒子（box）和文本都可以用。

圆角会让生硬的背景图变得更圆润，可以起到很好的修饰作用。

现代 CSS 让页面布局变得非常简单，当年只能 HTML tables 和切图的时代已经一去不复返。

伪元素（pseudo elements）和伪类（pseudo classes）非常相像，都是依附在选择器上使用。

HTML 元素最常用的展示方式有内联（inline）、区块（block）和不展示（none）。它们可以通过display属性来控制，对应的值分别为inline、block和none。

如果同一个 HTML 元素上有多个 CSS 规则，当它们互相冲突时，浏览器会遵循一定的规则来找到最具体的那条规则，并舍弃与之冲突的其它规则。这个功能在 CSS 比较少的情况下，用处不大，因为几乎不会有冲突。但随着 CSS 越来越复杂，文件越来越多，发生冲突的可能性就会变大，这个功能就会变得很重要。

还可以用于列表元素，甚至搜索框内展示图标也可以借此实现。属性可应用于绝大部分 HTML 元素，除了最常用的。CSS 的背景图片也有这个功能，但用法却截然不同。标签，可以用来展示图片，提高页面的丰富度。我们知道，html 有一个。

有些情况下，多个 CSS 属性值可以整合成一串值，每个值之间用空格隔开。

伪类（pseudo classes）要和选择器捆绑使用，用于表示某种状态（state）或关系（relation）。它的形式是「选择器:冒号:伪类」。

分组和嵌套可以让代码更易于维护，无论是 HTML 代码还是 CSS 代码。

在 CSS 基础教程中，我们学会了如何使用 HTML 选择器。这一篇我们继续讲解另外两种选择器 - class和 ID。有了它们，我们就可以为同一种 HTML 标签指定不同的样式。

综合使用前面 5 篇教程所提到的 HTML 选择器。

一文读懂 CSS 边框

一文读懂 CSS 边距 (margin & padding)

一文读懂 CSS 字体用法

一文搞懂如何用 CSS 的定义颜色

HTML 有标签（tags），而 CSS 有选择器（selectors）。

一文读懂 CSS 的三种应用方式