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

swiftwwj 2019-12-27

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

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

Sass基本语法

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

1.变量

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

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

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

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

2.数据类型

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

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

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

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

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

3.运算符

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

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

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

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

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

4.流程控制语句

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

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

@if条件 {

    真区间;

} @else{

    假区间;

}

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

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

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

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

    循环体;

}

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

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

5.函数

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

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

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

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

6.混合宏

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

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

    输出代码;

}

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

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

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

相关推荐