IT兄弟连 HTML5教程 初识Sass Sass基本语法

本文重点在于HTML5与CSS3的学习和使用，HTML与CSS不属于编程范畴，更偏向于设计，而Sass是编程化的CSS的扩展语言，对于没有接触过编程的读者可能会有点吃力，这里不做对语法详细介绍，仅作为基本介绍，让读者了解Sass的优越性，如果对Sass感兴趣，请自行查阅相关资料。

Sass基本语法

在大部分编程语言之中，其基本语法都包括这样一些东西，比如说变量、数据类型、运算符、流程控制语句、函数等，具体的这些名词都具有什么功能呢？那么笔者来依次进行介绍。

1．变量

变量，顾名思义，就是可以动态改变的值。可以将它看做一个占位符，开发者可以动态改变这个占位符的值。比如说可以将像素值、颜色值等提炼出来作为一个变量出现。就像下面这样：

其实在上例中根本看不出变量实际效益在哪里，仅仅是解释了其占位符的含义。不过假如说网页总体设计时有一个基调，或者说基色，其余网页颜色都由这个基色进行延伸，那么我们只需要定义一个基色，然后我们对基色进行加深、变浅、反转就可以得出网页中其它要素的颜色了，当我们改变该变量时，那么网页中所有的颜色都会根据这个基色进行改变。

那么可能有读者问了，如何对基色进行加深、变浅等操作呢？Sass其实包含大量的内置函数，这些函数可以对颜色执行加深、变浅等操作，那么变量存在的意义就远不止占位符那么简单了，读者还可以对其进行算数运算等操作等等。

2．数据类型

什么是数据类型呢？就是在开发中我们能够使用到的值的类型，比如数值、字符串、颜色值、布尔值、列表、map地图类型等。在CSS开发中我们通常使用的就是像素值、颜色值，像素值就相当于数值，颜色值就是颜色值。那么Sass多余的其它类型用作什么呢？

布尔值就是两个值，true和false，其含义为真和假，它用于流程控制语句，这里先略过不提，在后面流程控制小节再讲；列表类型，其实就是一组值，每个值都有一个默认的下标，默认下表自1开始依次递增。开发者通过一个方法可以去引用数组中的值。就像下面这样：

还有一种类型是map地图类型，可以说它是升级版的列表，它也保存着一组值，每个值都有对应的一个属性名，开发者可以通过属性名对值进行获取，就像下面这样：

3．运算符

Sass中的运算符就是算数运算符，在使用算数运算符时，要遵守一个原则，就是运算符的前后要留有一个空格，就像下面这样：

除了算数运算符之外，还有一些其它运算符，包括用于比较的比较运算符，大于“>”、小于“<”、等于“==”、不等于“!=”、大于等于“>=”、小于等于“<=”等，同时还包括逻辑运算符逻辑与“and”、逻辑或“or”、逻辑非“not”。这些运算常用于流程控制语句之中。

除了以上的运算符之外，还包括字符串连接运算符“+”，连接两个字符串，在字符串连接时，如果需要进行计算时，需要使用“#{}”将计算的值括起来，如下所示：

4．流程控制语句

按正常的代码解析来看，CSS编码执行是自上而下依次执行的，而流程控制则是对执行的顺序进行的一个管控，可以控制执行的顺序。Sass的流程控制语句有if...else判断、for循环、each循环等，那么笔者依次来说一下具体的功能，如下所示：

if语句是判断条件是否为真，若条件为真则执行真区间，若条件为假则执行假区间，其语法格式如下：

@if条件 {

    真区间；

} @else{

    假区间；

}

其中从@else后均可以省略，那么执行效果就是条件为真，则执行真区间，否则跳过。具体使用请看下例。

@for循环也是流程控制语句之一，它可以让一段CSS代码重复执行，语法如下：

@for变量from开始值to结束值 {

    循环体;

}

变量相当于一个计数器的占位符，当执行时，变量会被赋值为开始值，然后每循环一次，则变量累加1，直到累加到结束值才会停止。其实“from ... to”可以换成“from ... through”，这两个循环的差别在于，“from ... to”不包含结束值，而“from ... through”则包含结束值，比如“from 1 to 10”会执行9次，而“from 1 through 10”则会执行10次。举个例子，如下所示：

5．函数

在Sass包含大量的系统函数，比如将颜色变深的darken函数、将颜色变浅的函数lighten、取反色的函数invert等等，这些函数能够辅助我们实现相应的效果，我们只需要使用简单的方法引用即可，举个例子，如下所示。

当然，除了这些函数之外，还包括大量的系统函数，这里笔者就不再扩展，如果想深入学习，请查阅官方手册即可。

除了自定义函数之外，你还可以自行创建函数，其效果就类似于系统函数，函数最终会计算出一个数值，用于Sass之中。

6．混合宏

混合宏与函数类似，只不过函数的主要功能是计算，最终返回一个值。而混合宏的主要的功能是能够传递参数，并将参数带入混合宏的代码，最终会生成的是代码。那么来看一下混合宏的具体语法，如下所示：

@mixin名称 (参数1，参数2...,参数n){

    输出代码；

}

那么开发者经常用它来做什么呢？如果你读过Bootstrap（目前最流行的前端框架）的Sass源码，那么你就知道Bootstrap将每一个网页中的显式区域都封装成了不同的模块，比如按钮模块、表单输入框模块、弹出窗口模块等等，那么它到底如何使用呢？举个例子来看一下。

引用方法很简单，使用“@include”调用混合宏，并传递相关参数即可输出相关代码。