预处理器,为啥要动用预处理器

浅谈 CSS 预处理器(一):为何要利用预处理器?

2017/01/22 · CSS ·
预处理器

本文小编: 伯乐在线 –
CSS魔法
。未经小编许可,禁止转发!
欢迎参与伯乐在线 专栏撰稿人。

前言

您好,我是魔法哥。我是一名传统的前端开发者,我的很大片段行事就是为各个别型的网页写
CSS,写了广大年。

我从三年前开端接触并动用 CSS
预处理,如虎生翼,相见恨晚。因而,我觉得有须要写些文章来计算一下那上面的体会。若是你是一位还从未接触预处理器的
CSS 开发者,希望自己的篇章可以协理您轻轻松松启幕!

(注:本文的以身作则代码均选取 Stylus 作为 CSS 预处理语言。)

1、LESS的官网:http://lesscss.org

CSS 预处理器技术早已丰裕的老道,而且也涌现出了更进一步多的 CSS
的预处理器框架。本文向你介绍使用最为常见的七款 CSS 预处理器框架,分别是
Sass、Less CSS、Stylus。


开头的时候,说实话,我很反感使用css预处理器那种新东西的,因为内部涉及到了编程的事物,私以为很复杂,而且考虑到花色不是一天可以不辱职分的,也很少是
一个人成功的,对于这种协会的花色费用,前端实践用css预处理器来同盟,是一种很惨痛,即使不痛楚那也是内需费用极度多的年月来协调合营上的。对于预处
理器的态度,近来是对准学习新技巧和推进css向前进的研讨来上学新东西。下边那篇文章来自w3cplus,那是一篇十分强劲的稿子,私以为互连网上介绍这上边知识的就属那篇小说是鼻祖了。

背景

CSS
自诞生以来,基本语法和骨干机制平素尚未精神上的转移,它的迈入大致全是表现力层面上的升级换代。最初始CSS
在网页中的成效只是协助性的装点,轻便易学是最大的急需;但是现在网站的复杂度已经不可同日而语,原生
CSS 已经让开发者力不从心。

当一门语言的力量欠缺而用户的周转条件又不匡助其他选用的时候,那门语言就会沦为
“编译目标”
语言。开发者将精选另一门更高级的言语来开展付出,然后编译到底层语言以便实际运行。

于是,在前者领域,天降大任于斯人也,CSS 预处理器应运而生。而 CSS
那门古老的语言以另一种格局 “重新适应” 了网页开发的需求。

2、Sass官网地址:http://sass-lang.com

首先大家来简单介绍下如何是 CSS 预处理器,CSS 预处理器是一种语言用来为
CSS 增添部分编程的的表征,无需考虑浏览器的包容性难题,例如你可以在 CSS
中应用变量、简单的程序逻辑、函数等等在编程语言中的一些中坚技能,可以让您的
CSS 更见简洁,适应性更强,代码更直观等很多便宜。

通过了那篇小说的上学,我学会了设置Sass,编译Sass,书写Sass,高级书写等,Less也学习一下,打算用Sass吧。

预处理器赋予我们的 “超能力”

容易易行梳理一下,CSS
预处理器为大家带来了几项首要的力量,由表及里排列如下。(不用在意你用到了有些,无论深浅,都是收入。)

3、Stylus官网:http://learnboost.github.com/stylus

不用再停留在石器时代了,上边让大家开头 CSS 预处理器之旅。

一、什么是CSS预处器

CSS预处理器定义了一种新的言语,其中央思维是,用一种特其余编程语言,为CSS增添了一些编程的特点,将CSS作为靶子转移文书,然后开发者就
只要利用这种语言进行编码工作。通俗的说,CSS预处理器用一种特其余编程语言,进行web页
面样式设计,然后再编译成正常的CSS文件,以供项目应用。
CSS预处理器为CSS扩充部分编程的性状,无需考虑浏览器的包容性难点,例如你可以在CSS中利用变量、不难的逻辑程序、函数等等在编程语言中的一些基
本特性,可以让你的CSS更加简洁、适应性更强、可读性更佳,更易于代码的掩护等众多益处。

CSS预处理器技术早已丰盛的成熟,而且也涌现出了很各种差其余CSS预处理器语言,比如说:Sass(SCSS)、LESS、Stylus、
Turbine、Swithch CSS、CSS Cacheer、DT
CSS等。如此之多的CSS预处理器,那么“我应当接纳哪一种CSS预处理器?”也应和成了方今网上的一大热门话题,在Linkedin、推特(TWTR.US)、
CSS-Trick、知呼以及各大技术论坛上,很四个人为此争持。相比较过计大家对是不是应当利用CSS预处理器的话题而言,那早已是很大的提升了。

到近期甘休,在不少可观的CSS预处理器语言中就属Sass、LESS和Stylus最美好,啄磨的也多,相比的也多。本文将分别从她们发生的背
景、安装、使用语法、异同等多少个对照之处向您介绍那三款CSS预处理器语言。相信前端开发工程师会做出自己的抉择——我要选取哪款CSS预处理器。

文本切分

页面越来越复杂,要求加载的 CSS
文件也进一步大,大家有需求把大文件切分开来,否则难以维护。传统的 CSS
文件切分方案基本上就是 CSS 原生的 @import 指令,或在 HTML 中加载多个CSS 文件,这个方案平日不能满意质量需要。

CSS 预处理器伸张了 @import
指令的力量,通过编译环节将切分后的文件再一次合并为一个大文件。这一边缓解了大文件不便维护的难点,另一方面也解决了一堆小文件在加载时的属性难题。

五、Sass、LESS和Stylus的语法

大家将会从语法、变量、嵌套、混入(Mixin)、继承、导入、函数和操作符等地点分别对那多少个框架进行比较介绍。

二、Sass、LESS和Stylus背景介绍

为了能更好的打听那三款流行的CSS预处理器,我们先从其背景入手,不难的刺探一下各自的背景新闻。

1.Sass背景介绍

Sass是对CSS(层叠样式表)的语法的一种扩张,诞生于二零零七年,最早也是最成熟的一款CSS预处理器语言,它可以行使变量、常量、嵌套、混
入、函数等功用,能够更有效有弹性的写出CSS。Sass最终仍旧会编译出官方的CSS让浏览器采取,也就是说它自己的语法并不太不难让浏览器识别,因为
它不是规范的CSS格式,在它的语法内部可以动用动态变量等,所以它更像一种极不难的动态语言。

实质上现在的Sass已经有了两套语法规则:一个照样是用缩进作为分隔符来区分代码块的;另一套规则和CSS一样接纳了大括号({})作为分隔符。后一种语法规则又名SCSS,在Sass3之后的版本都匡助那种语法规则。

注:Sass官网地址:http://sass-lang.com

2.LESS的背景介绍

二零零六年开源的一个品种,受Sass的熏陶较大,但又选拔CSS的语法,让半数以上开发者和设计师更便于上手。LESS提供了两种艺术能平滑的将写
好的代码转化成标准的CSS代码,在许多流行的框架和工具中早已能日常看到LESS的人影了(例如推特(Twitter)的Bootstrap框架就选用了
LESS)。

按照维基百科上的牵线,其实LESS是亚历克西斯Sellier受Sass的熏陶创立的一个开源项目。当时SASS选用了缩进作为分隔符来区分代码块,而不是CSS中广为使用的大括号({})。为了让
CSS现有的用户使用起来更佳方便,亚历克西斯开发了LESS并提供了如同CSS的书写效果。

注:LESS的官网:

3.Stylus背景介绍

Stylus,2010年产生,来自于Node.JS社区,主要用来给Node项目开展CSS预处理匡助,在此社区以内有必然帮衬者,在周边的意思上人气还浑然不如Sass和LESS。

Stylus被称为是一种革命性的新语言,提供一个火速、动态、和选取表明方式来生成CSS,以供浏览器选用。Stylus同时扶助缩进和CSS常规样式书写规则。

注:Stylus官网:

模块化

把公文切分的思绪再向前推进一步,就是 “模块化”。一个大的 CSS
文件在合理切分之后,所爆发的那么些小文件的互相关系应该是一个树形结构。

树形的根结节一般称作 “入口文件”,树形的任何节点一般称作
“模块文件”。入口文件一般会凭借多少个模块文件,种种模块文件也说不定会借助其余更末端的模块,从而组合任何树形。

以下是一个简约的演示:

entry.styl ├─ base.styl │ ├─ normalize.styl │ └─ reset.styl ├─
layout.styl │ ├─ header.styl │ │ └─ nav.styl │ └─ footer.styl ├─
section-foo.styl ├─ section-bar.styl └─ …

1
2
3
4
5
6
7
8
9
10
11
entry.styl
├─ base.styl
│   ├─ normalize.styl
│   └─ reset.styl
├─ layout.styl
│   ├─ header.styl
│   │   └─ nav.styl
│   └─ footer.styl
├─ section-foo.styl
├─ section-bar.styl
└─ …

(入口文件 entry.styl 在编译时会引入所需的模块,生成
entry.css,然后被页面引用。)

如果您用过任何具有模块机制的编程语言,应该早就深有体会,模块化是一种格外好的代码社团办法,是开发者设计代码结构的紧要性手段。模块可以很清楚地落实代码的支行、复用和看重管理,让
CSS 的支付进度也能享受到当代先后开发的有益。

1.Sass语法

语法

三、Sass、LESS和Stylus的安装

大致询问将来,您是否有点捋臂将拳,想先河一试,看看哪类预处理器适合自己的编码习惯,或者说更合乎自己的公司成员以及项目的支出。要试,肯定有需要了然一下三者各自的安装方式。在这一节中,主要为大家介绍三者的设置情势,以供大家相比。

1.Sass的安装

Sass是Ruby语言写的,可是两岸的语法没有涉及。不懂Ruby,照样能够健康使用Sass。只是必须先安装Ruby,然后再安装Sass。

先是安装Ruby,若是您使用的是ios系统,那么您的系统已经安装好了Ruby。假设您使用的是微软的Windows系统,那么安装就有些许的坚苦。但是也不用过于担心,根据下边的步骤就能帮你急速的装置好。

到RubyInstaller官网上下载Ruby安装文件(随意拔取一个本子),此处拔取的是新型版本Ruby1.9.3-p385:

亚洲必赢官网 1

Ruby安装文件下载好后,可以按使用软件安装步骤举办安装Ruby。在设置进程中,个人提出将其安装在C盘下,在装置进程中甄选第一个选项,如下图所示:

亚洲必赢官网 2

Ruby安装已毕后,在发轫菜单中找到新装置的Ruby,并启动Ruby的Command控制面板,如下图所示:

亚洲必赢官网 3

在起步的Ruby命令控制面板中输入下边的通令:

gem install sass

输入上面命令,回车后就会活动安装Sass:

亚洲必赢官网 4

诸如此类Sass就安装成功了,也就足以行使了。

2.LESS的安装

LESS的设置和Sass安装有所差异,他不须求依靠于Ruby环境,就能平素设置使用。不过LESS安装分为三种:客户端和劳务器端安装。

a)客户端安装:

咱俩能够直接在客户端应用“.less”(LESS源文件),只须求在官网载一个javascript本子文件主“less.js”,然后在大家须求引入LESS源文件的html的<head>中参预如下代码:

<link rel="stylesheet/less" type="text/css" href="文件路径/styles.less">
<script src="文件路径/less.js" type="text/javascript"></script>

亟需注意的是:在引入“.less”文件中,“link”的“rel”属性要安装为“stylesheet/less”。还有更器重的某些亟需注意的是:LESS源文件一定要在“less.js”引入此前引入,那样才能确保LESS源文件正确编译解析。

b)服务器端安装

LESS在服务器端的选拔首假若依靠LESS的编译器,将LESS源文件编译生成最后的CSS文件,近期常用的不二法门是应用node的包管理器
(npm)安装LESS,安装成功后就可以在Node环境中对LESS文件进行编译。如此一来,LESS在服务器的装置和Sass的设置有点相似,分化之
处是他们需依赖的条件不相同,LESS必要的是Node
JS环境,而Sass需求的是Ruby环境,为了让大家能更明显的明亮怎么着在劳动器端安装LESS,此处简单的过一下装置进程(本文演示的是在
Window7下的设置方式)。

首先到Node
Js的官网下载一个契合Windows系统的安装文件,此处下载的是“node-v0.8.20-x86.msi”:

亚洲必赢官网 5

安装文件下载后,按正常应用程序方法同样安装。安装到位后在开首菜单中启用Node
js的Command控制面板:

亚洲必赢官网 6

在起步的Node Js的Command控制面板直接输入下边的吩咐:

$ npm install less

亚洲必赢官网 7

如此就设置完LESS的编译命令,可以在该地正常编译LESS源文件。即使你想下载最新稳定版本的LESS,还是可以尝试在Node
JS的Command控制面板输入:

$ npm install less@latest

3.Stylus的安装

Stylus的设置和LESS在劳务器端的设置很一般,同样依靠于Node
JS的环境,也就是说也要先安装Node Js(假诺设置Node
JS请参见前边的介绍)。唯一分裂的是在Node
JS的Command控制面板输入的命令不同:

$ npm install stylus

接下来,就会活动下载安装最新的stylus库:

亚洲必赢官网 8

如此那般就到底安装完Stylus了,也得以健康使用Stylus。

挑选符嵌套

分选符嵌套是文件之中的代码协会办法,它可以让一多元有关的规则展现出层级关系。在原先,如若要高达这么些目标,大家不得不如此写:

CSS

.nav {margin: auto /* 水平居中 */; width: 1000px; color: #333;} .nav
li {float: left /* 水平排列 */; width: 100px;} .nav li a {display:
block; text-decoration: none;}

1
2
3
.nav {margin: auto /* 水平居中 */; width: 1000px; color: #333;}
    .nav li {float: left /* 水平排列 */; width: 100px;}
        .nav li a {display: block; text-decoration: none;}

那种写法须求大家手工维护缩进关系,当上级选取符发生变化时,所有有关的部属选用符都要修改;别的,把每条规则写成一行也未可厚非阅读,为单条讲明写注释也很为难(只能插在表明之间了)。

在 CSS
预处理语言中,嵌套语法可以很简单地发挥出规则之间的层级关系,为单条申明写注释也很清楚易读:

CSS

.nav margin: auto // 水平居中 width: 1000px color: #333 li float: left
// 水平排列 width: 100px a display: block text-decoration: none

1
2
3
4
5
6
7
8
9
10
.nav
    margin: auto  // 水平居中
    width: 1000px
    color: #333
    li
        float: left  // 水平排列
        width: 100px
        a
            display: block
            text-decoration: none

Sass3.0版本初叶利用的是专业的CSS语法,和SCSS可以说是一律的。这样Sass代码转换成CSS代码变得更便于。默许Sass使用“.scss”伸张名。Sass语法规则可以像CSS那样书写:

在行使 CSS
预处理器此前最关键的是清楚语法,幸运的是几乎大部分预处理器的语法跟 CSS
都差不离。

四、Sass、LESS和Stylus转译成CSS

Sass、LESS和Stylus源文件(除了LESS源文件在客户端下运作之外)都不能够直接被浏览器直接识别,那样一来,要正常的应用这一个源文
件,就须要将其源文件转译成浏览器可以辨认的CSS样式文件,那也是选拔CSS预处理器很关键的一步,假诺这一步不驾驭怎么样操作,那么意味着写出来的代码
不可用。接下来按同样的办法,分别来探望三者之间是什么将其源文件转译成所急需的CSS样式文件。

1.Sass源文件转译成CSS文件

Sass文件就是经常的文件文件,但是其文件后缀名有二种,一种为“.sass”;另一种为“.scss”。我们一般用“.scss”就好,至于那三种文件扩大名的区分在于“.sass”是Sass语言文件的恢宏后缀名,而“.scss”是SCSS语言文件的扩张后缀名,至于Sass和SCSS的详
细差别这里不做牵线。你可以几乎的领会为她们都是CSS预处理器语言,而且两岸功用特色都相同,只是书写规则各异而以。

要转译Sass文件的前提是有文件可转,因而先在品种中开创一个Sass文件,此例中将其取名为“style.scss”,并且将其位于对应的种类样式中,如D盘的“www/workspace/Sass/css”目录下。

开行Ruby的Command控制面板,找到要求转译的Sass文件,如此例此文件放置在D盘的“www/workspace/Sass/css”目录下:

亚洲必赢官网 9

假使仅针对于单文件的转译,须求将“style.scss”转译成“style.css”,只要求在相应的目录下输入上边的一声令下:

$ sass style.scss style.css

那般原本在D盘的“www/workspace/Sass/css”目录下惟有“style.scss”那么些文件,现在净增了一个“style.css”文件,而这几个CSS文件我们就足以用来调用,他也就是“style.scss”转译出来的样式文件。

理所当然,大家不能每保存两回那几个Sass文件就来实施两次那几个转译命令。那么有没有更好的不二法门落到实处呢?回答是一定的,可以通过上边的监听从令达成,那样一来只要Sass文件做了修改,就会自动更新对应的CSS样式文件。

单文件的监听,只须要在刚刚的授命控制面板中输入:

$ sass --watch style.scss:style.css

按下回车键(Enter),就会师到上边的提醒新闻:

亚洲必赢官网 10

观望上图所示的提醒音讯就代表监听成功,那样一来,你只要修改了“style.scss”文件,“style.css”文件就会趁机更新变更。

对此一个体系而言,不太可能只有一个CSS样式文件,若是有几个Sass文件要求监听时,就很有必要的集体一下。默许情状之下,我爱不释手把具备的
Sass文件放在“/css/sass”目录中,而转变的CSS文件则一直放在“/css”目录下。现在大家修改一下档次文件目录结构,在“/css”目
录中再创制一个“sass”目录,并找刚才创制的“style.scss”文件移至“/css/sass”目录下。此时监听“css/sass”下的持有
Sass文件时,可以在命令面板中输入如下格式的一声令下:

$ sass --watch sassFileDirectory:cssFileDirectory

在本例中,冒号前边的“sassFileDirectory”是指“/css/sass”下的“sass”目录,冒号前边的“cssFileDirectory”是指“css”目录,对应的下令就是:

$ sass --watch css/sass:css

回车后,同样可以获得提醒音讯:

亚洲必赢官网 11

除却选取Ruby的Command控制面板转译Sass之外仍可以设想第三方工具,比如说有名的Compass.app和fire.app。

2.LESS文书的转译成CSS文件

LESS文件的转译和Sass文件转译可以说是大约,分歧之处是LESS在设置的Node
JS环境下通过其协调的指令来拓展转译。

$ lessc style.less

上边的命令会将编译的CSS传递给stdout,你可以将它保存到一个文本中:

$ lessc style.less > style.css

除外上面的通令转译LESS源文件之外,现在还有许多第三方支付的工具,相比较常见的有:SimpleLess、Less.app、LESS编译协理脚本-LESS2CSS、WinLess和CodeKit.app等,我个人前几平日用的是WinLess工具,简单易用,然则在IOS系统下
LESS.app和CodeKit.app很好用。

3.Stylus源文本转译成CSS文件

Stylus具有可执行性,因而Stylus能将自我转换成CSS。Stylus可以读取自“stdin”输出到“stdout”,由此Stylus可以像下边转译源文件:

$ stylus –compress  <some.styl> some.css

Stylus也像Sass一样,同时接受单个文件和所有目录的转译。例如,一个目录名为“css”将在同一个索引编译并出口“.css”文件。

$ stylus css

下边的指令将出口到“./public/stylesheets”:

$ stylus css –out public/stylesheets

还足以同时转译五个公文:

$ stylus one.styl two.styl

要是您的浏览器安装了Firebug,那么可以动用FireStylus扩展。

$ stylus –firebug  <path>

变量

在改动出现在此以前,CSS 中的所有属性值都是
“幻数”。你不明了这几个值是怎么来的、它的什么的含义。有了变量之后,大家就足以给这个“幻数” 起个名字了,便于纪念、阅读和透亮。

接下去大家会发觉,当某个特定的值在多处用到时,变量就是一种简易而卓有功效的架空方式,可以把那种重新消灭掉,让你的代码尤其DRY。

我们来相比较一下以下两段代码:

CSS

/* 原生 CSS 代码 */ strong { color: #ff4466; font-weight: bold; } /*
… */ .notice { color: #ff4466; }

1
2
3
4
5
6
7
8
9
10
11
/* 原生 CSS 代码 */
strong {
color: #ff4466;
font-weight: bold;
}
 
/* … */
 
.notice {
color: #ff4466;
}

CSS

// 用 Stylus 来写 $color-primary = #ff4466 strong color: $color-primary
font-weight: bold /* … */ .notice color: $color-primary

1
2
3
4
5
6
7
8
9
10
11
// 用 Stylus 来写
$color-primary = #ff4466
 
strong
color: $color-primary
font-weight: bold
 
/* … */
 
.notice
color: $color-primary

您或许曾经意识到了,变量让开发者更易于已毕网站视觉风格的会师,也让
“换肤” 那样的必要变得越发自在易行。

/*style.sass新版语法规则*/

率先 Sass 和 Less 都施用的是规范的 CSS
语法,由此只要您可以很有益于的将已部分 CSS 代码转为预处理器代码,默许 Sass
使用 .sass 扩充名,而 Less 使用 .less 伸张名。

五、Sass、LESS和Stylus的语法

每一种语言都有谈得来肯定的语法规则,CSS预处理器语言也不例外,在真正使用CSS预处器语言以前还有一个不得缺失的知识点,就是对语法的敞亮。值得庆幸的是,这七款CSS预处理器语言的语法和CSS语法都大概。

1.Sass语法

Sass3.0版本早先运用的是规范的CSS语法,和SCSS可以说是一致的。那样Sass代码转换成CSS代码变得更易于。默许Sass使用“.scss”伸张名。Sass语法规则可以像CSS这样书写:

/*style.sass新版语法规则*/
h1{
  color:#936;
  background-color:#333;
}

正如您所看到的,在Sass样式中,那样的代码是在简易然则的了。

紧要的一些是,Sass也同时帮忙老的语法,老的语法和正常的CSS语法略有差别,他需求严峻的语法,任何的缩进和字符的荒谬都会促成样式的编译错
误。Sass可以概括大括号({})和支行(;),完全器重严谨的缩进和格式化代码,而且文件使用“.sass”扩张名,他的语法类似于:

/*style.sass*/
h1
  color:#936
  background-color: #333

2.LESS语法

LESS是CSS的一种扩张格局,它并不曾阉割CSS的效益,而是在存活的CSS语法上,添加了无数附加的意义。就语法规则而言,LESS和Sass一样,都是运用CSS的专业语法,只是LESS的源文件的恢弘名是“.less”,其主导语法类似于:

/*style.less*/
h1 {
  color: #963;
  background-color: #333;
}

3.Stylus语法

Stylus的语法花样多一些,它的文书扩张名是“.styl”,Stylus也接受正规的CSS语法,不过他也像Sass老的语法规则,使用缩进控制,同时Stylus也经受不带大括号({})和分行的语法,如下所示:

/*style.styl*/
/*类似于CSS标准语法*/
h1 {
  color: #963;
  background-color:#333;
}
/*省略大括号({})*/
h1 
  color: #963;
  background-color: #333;
/*省略大括号({})和分号(;)*/
h1
  color:#963
  background-color:#333

在Stylus样式中,你也得以在同一个样式文件中动用差其他语法规则,上边那样的写法也不会报错:

/*style.styl*/
h1 {
  color  #963
}
h2 
  font-size:1.2em

运算

光有变量仍然不够的,大家还亟需有运算。如果说变量让值有了意思,那么运算则足以让值和值建立关联。有些属性的值其实跟其它性质的值是严密有关的,CSS
语法不能表明那层关系;而在预处理语言中,我们得以用变量和表明式来显现那种关涉。

举个例子,我们要求让一个器皿最八只彰显三行文字,在以前大家平常是这么写的:

CSS

.wrapper { overflow-y: hidden; line-height: 1.5; max-height: 4.5em; /*
= 1.5 x 3 */ }

1
2
3
4
5
.wrapper {
overflow-y: hidden;
line-height: 1.5;
max-height: 4.5em;  /* = 1.5 x 3 */
}

大家能够发现,我们只可以用注释来表达 max-height
的值是怎么来的,而且注释中 3
那样的值也是幻数,还亟需更进一步解释。未来当行高或行数暴发变化的时候,max-height
的值和注释中的算式也需求一起更新,维护起来很不便民。

接下去我们用预处理语言来改良一下:

CSS

.wrapper $max-lines = 3 $line-height = 1.5 overflow-y: hidden
line-height: $line-height max-height: unit($line-height * $max-lines,
’em’)

1
2
3
4
5
6
7
.wrapper
$max-lines = 3
$line-height = 1.5
 
overflow-y: hidden
line-height: $line-height
max-height: unit($line-height * $max-lines, ’em’)

乍一看,代码行数如同变多了,但代码的来意却愈来愈通晓了——不需要其余注释就把整件工作说掌握了。在晚期维护时,只要修改那多个变量就可以了。

值得一提的是,那种写法还带来另一个益处。$line-height 那个变量可以是
.wrapper
自己定义的一些变量(比如上面那段代码),也得以从更上层的功效域获取:

CSS

$line-height = 1.5 // 全局统一行高 body line-height: $line-height
.wrapper $max-lines = 3 max-height: unit($line-height * $max-lines,
’em’) overflow-y: hidden

1
2
3
4
5
6
7
8
9
10
$line-height = 1.5  // 全局统一行高
 
body
line-height: $line-height
 
.wrapper
$max-lines = 3
 
max-height: unit($line-height * $max-lines, ’em’)
overflow-y: hidden

那意味 .wrapper 可以向祖先继承行高,而不需求为那几个 “只突显三行”
的急需把团结的行高写死。有了运算,大家就有能力公布属性与特性之间的关联,它令我们的代码尤其灵活、尤其DRY。

h1{

上面是那两边的语法:

六、Sass、LESS和Stylus特性

那两款CSS预处理器语言具有局地相同的特征,例如:变量、混入、嵌套、函数等。在这一节中,大家种种来对待一下那四款CSS预处理器语言各个特色的异议之处,以及使用格局。

1.变量(Variables)

若果您是一个开发人员,变量应该是你最好对象之一。在CSS预电脑语言中您也足以注脚变量,并在全体样式表中使用。CSS预处理器语言扶助任何变量(例如:颜色、数值、文本)。然后你可以在自由地点引用变量。

a)Sass的变量

Sass申明变量必须是“$”发轫,前边紧跟变量名和变量值,而且变量名和变量值须求接纳冒号(:)分隔开。就好像CSS属性设置同一:

/*声明变量*/

$mainColor: #963;
$siteWidth: 1024px;
$borderStyle: dotted;

/*调用变量*/                              |  /*转译出来的CSS*/
------------------------------------------+------------------------------
body {                                    |  body {
  color: $mainColor;                      |    color: #963;
  border:1px $borderStyle $mainColor;     |    border:1px dotted #963;
  max-width: $siteWidth;                  |    max-width: 1024px;
}                                         |  }

b)LESS的变量

LESS样式中表明变量和调用变量和Sass一样,唯一的不同就是变量名前边使用的是“@”字符:

/*声明变量*/

@mainColor: #963;
@siteWidth: 1024px;
@borderStyle: dotted;

/*调用变量*/                            |  /*转译出来的CSS*/
----------------------------------------+-------------------------------
body {                                  |  body {
  color: @mainColor;                    |    color:#963;
  border:1px @borderStyle @mainColor;   |    border:1px dotted #963;
  max-width: @siteWidth;                |    max-width:1024px;
}                                       |  }

c)Stylus的变量

Stylus样式中宣示变量没有其他限制,你可以行使“$”符号伊始。结尾的支行(;)可有可无,但变量名和变量值之间的等号(=)是须要的。有一
点必要注意的是,即使大家使用“@”符号开端来声称(0.22.4)变量,Stylus会进行编译,但其相应的值并不会赋值给变量。换句话说,在
Stylus中不要拔取“@”符号伊始注脚变量。Stylus中调用变量的法子和LESS、Sass是完全相同的。

/*声明变量*/

mainColor = #963;
siteWidth = 1024px;
$borderStyle = dotted;

/*调用变量*/                            |    /*转译出来的CSS*/
----------------------------------------+--------------------------------
body                                    | body {
  color mainColor                       |   color: #963;
  border 1px $borderStyle mainColor     |   border:1px dotted #963
  max-width siteWidth                   |   max-width:1024px;
                                        | }

Stylus还有一个更加功效,不须求分配值给变量就足以定义引用属性:

/*水平垂直居中*/                    |  /*转译出来的CSS*/
------------------------------------+------------------------------------
#logo                               |   #logo {
  position  absolute                |     position:absolute;
  top  50%                          |     top:50%;
  left  50%                         |     left:50%;
  width  w = 150px                  |     width:150px;
  height  h = 80px                  |     height:80px;
  margin-left  -(w / 2)             |     margin-left:-75px;
margin-top  -(h / 2)                |     margin-top:-40px;
                                    |   }

从上边的代码中我们得以见到,CSS预处理器语言中的变量是值级其他重复使用,可以将同样的值定义成变量统一管理起来。

CSS预处理器语言中变量的特点适用于概念主旨(也就是大家常说的换肤),大家可以将背景颜色、字体颜色、边框属性等健康样式统一定义,那样不相同的主旨只要求定义不一致的变量文件就足以。

2.作用域(Scope)

CSS预处理器语言中的变量和其余程序语言一样,可以兑现值的复用,同样它也设有生命周期,也就是Scope(变量范围,开发人员习惯称为成效域),容易点讲就是有些变量仍旧全局变量的定义,查找变量的逐条是先在局地定义中找,假如找不到,则查找上级定义,直至全局。下边大家经过一个大致的例证
来表明这五款CSS预处理器的功能域使用。

a)Sass的效能域

Sass中成效域在这四款预处理器是最差的,可以说在Sass中是不设有啥全局变量。具体来看上边的代码:

/*Sass样式*/
$color: black;
.scoped {
  $bg: blue;
  $color: white;
  color: $color;
  background-color:$bg;
}
.unscoped {
  color:$color;
}

先看转译出来的CSS样式:

.scoped {
  color:white;/*是白色*/
  background-color:blue;
}
.unscoped {
  color:white;/*白色(无全局变量概念)*/
}

演示显著的报告我们,在Sass样式中定义变量,调用变量是不曾全局变量一个定义存在,因而在Sass中定义了同等变量名时,在调用之时千万要多加小心,不然会给您的样式带来错误。

b)LESS的成效域

LESS中的功用域和任何程序语言中的成效域格外的平等,他率先会招来局地定义的变量,假若没有找到,会像冒泡一样,顶尖一流往下搜寻,直到根为止,同样上边的事例,大家来探望她在LESS下所起的扭转。

/*LESS样式*/
@color: black;
.scoped {
  @bg: blue;
  @color: white;
  color: @color;
  background-color:@bg;
}
.unscoped {
  color:@color;
}

转译出来的CSS样式:

.scoped {
  color:white;/*白色(调用了局部变量)*/
  background-color:blue;
}
.unscoped {
  color:black;/*黑色(调用了全局变量)*/
}

c)Stylus的功用域

Stylus就算起步相比较晚,但其作用域的特点和LESS一样,能够支持全局变量和局变量。会向上冒泡查找,直到根甘休。

3.混合(Mixins)

Mixins是CSS预处理器中言语中最有力的风味,简单点来说,Mixins可以将部分体裁抽出,作为单身定义的模块,被广大选取保养复使用。
日常你在写样式时一定有遇上过,某段CSS样式平日要用到三个要素中,这样你就须求再行的写很多次。在CSS预统计机语言中,你可以为这个公用的CSS样式
定义一个Mixin,然后在你CSS需求选用这个样式的地方平素调用你定义好的Mixin。那是一个百般有效的特性,Mixins被看作一个公认的抉择
器,还能在Mixins中定义变量或者默许参数。

a)Sass的混合

Sass样式中宣称Mixins时索要选择“@mixin”,然后后边紧跟Mixins的名,他也可以定义参数,同时可以给那个参数设置一个默许值,但参数名是使用“$”符号开端,而且和参数值之间要求利用冒号(:)分开。

在甄选器调用定义好的Mixins必要使用“@include”,然后在其后紧跟你要调用的Mixins名。可是在Sass中还协理老的调用方法,就是选择加号“+”调用Mixins,在“+”后紧跟Mixins名。

一路来看个不难的事例,比如说在你的Sass样式中定义了一个号称“error”的Mixin,这些“error”设置了一个参数“$borderWidth”,在没专门定义外,这几个参数的默许值设置为“2px”:

/*声明一个Mixin叫作“error”*/
@mixin error($borderWidth:2px){
  border:$borderWidth solid #f00;
  color: #f00;
}
/*调用error Mixins*/
.generic-error {
  @include error();/*直接调用error mixins*/
}
.login-error {
  @include error(5px);/*调用error mixins,并将参数$borderWidth的值重定义为5px*/
}

b)LESS的混合

在LESS中,混合是指将概念好的“ClassA”中引入另一个业已定义的“Class”,如同在当下的“Class”中扩张一个质量一样。

唯独LESS样式中扬言Mixins和Sass申明方法不雷同,他更像CSS定义样式,在LESS可以将Mixins看成是一个类采用器,当然
Mixins也足以设置参数,并给参数设置默许值。然则设置参数的变量名是选用“@”初始,同样参数和默许参数值之间必要选择冒号(:)分隔开。

正如Sass混合是的演示,同样在LESS样式中定义一个称呼“error”的Mixin,这么些“error”设置了一个参数“@borderWidth”,在尚未越发定义外,那个参数的默许值是“2px”:

/*声明一个Mixin叫作“error”*/
.error(@borderWidth:2px){
  border:@borderWidth solid #f00;
  color: #f00;
}
/*调用error Mixins*/
.generic-error {
  .error();/*直接调用error mixins*/
}
.login-error {
  .error(5px);/*调用error mixins,并将参数@borderWidth的值重定义为5px*/
}

c)Stylus的混合

Stylus中的混合和前四款CSS预处理器语言的插花略有不相同,他可以不采纳其余标志,就是一向表明Mixins名,然后在概念参数和默许值之间用等号(=)来一而再。

/*声明一个Mixin叫作“error”*/
error(borderWidth=2px){
  border:borderWidth solid #f00;
  color: #f00;
}
/*调用error Mixins*/
.generic-error {
  error();/*直接调用error mixins*/
}
.login-error {
  error(5px);/*调用error mixins,并将参数$borderWidth的值重定义为5px*/
}

四个示范都将会转译成相同的CSS代码:

.generic-error {
  border: 2px solid #f00;
  color:#f00;
}
.login-error {
  border:5px solid #f00;
  color: #f00;
}

4.嵌套(Nesting)

CSS预处理器语言中的嵌套指的是在一个选拔器中嵌套另一个精选器来落成持续,从而收缩代码量,并且扩大了代码的可读性。比如说,大家在CSS中七个元素有一个同一的父元素,那么写样式会变得很平淡,大家必要一遍一回的在每个元素前写这几个父元素,除非给一定的因素添加类名“class”或者ID。

section {
  margin:10px;
}
section nav {
  height:25px;
}
section nav a {
  color: #0982c1;
}
section nav a:hover {
  text-decoration: underline;
}

反而,使用CSS预处理器语言的嵌套特性,大家得以在父元素的大括号({})里写这个元素。同时可以应用“&”符号来引用父拔取器。对于Sass、LESS和Stylus那五款CSS预处理器语言的嵌套拔取器来说,他们都拥有相同的语法:

section {
  margin:10px;
  nav {
    height:25px;
    a {
      color:#0982c1;
      &:hover {
        text-decoration:underline;
      }
    }
  }
}

地点的预处理器转译出来的CSS代码和我们开始显得的CSS代码是一致的,相当的便利呢!

5.继承(Inheritance)

对此熟练CSS的同桌来说,对于属性的三番五次并不生疏。常常在写CSS样式常碰着两个要素运用相同的样式时,大家在CSS中司空眼惯都是那般写:

p,ul,ol{/*样式写在这里*/}

如此做老大的好,但屡屡大家须求给单独元素添加其它的样式,这些时候大家就须要把其中接纳器单独出来写样式,如此一来大家保安样式就非凡的麻烦。为了应对这一个题材,CSS预处理器语言可以从一个挑选继续另个选项器下的富有样式。

a)Sass和Stylus的继承

Sass和Stylus的后续是把一个选用器的装有样式继承到另个选用器上。在连续另个选择器的体裁时须求使用“@extend”开端,后边紧跟被一而再的选用器:

.block {
  margin: 10px 5px;
  padding: 2px;
}
p {
  @extend .block;/*继承.block选择器下所有样式*/
  border: 1px solid #eee;
}
ul,ol {
  @extend .block; /*继承.block选择器下所有样式*/
  color: #333;
  text-transform: uppercase;
}

地点的代码转译成CSS:

.block,p,ul,ol {
  margin: 10px 5px;
  padding:2px;
}
p {
  border: 1px solid #eee
}
ul,ol {
  color:#333;
  text-transform:uppercase;
}

b)LESS的继承

LESS支持的接轨和Sass与Stylus不同,他不是在选取器上继续,而是将Mixins中的样式嵌套到每个接纳器里面。那种办法的老毛病就是在每个选拔器中会有重新的体制发生。

.block {
  margin: 10px 5px;
  padding: 2px;
}
p {
  .block;/*继承.block选择器下所有样式*/
  border: 1px solid #eee;
}
ul,ol {
  .block; /*继承.block选择器下所有样式*/
  color: #333;
  text-transform: uppercase;
}

转译出来的CSS代码:

.block {
  margin: 10px 5px;
  padding:2px;
}
p {
  margin: 10px 5px;
  padding:2px;
  border: 1px solid #eee
}
ul,ol {
  margin: 10px 5px;
  padding:2px;
  color:#333;
  text-transform:uppercase;
}

正如所看到的,上面的代码“.block”的体裁将会被插入到对应的您要继续的精选器中,但需求注意的是先期级的题材。

6.运算符(Operations)

CSS预处理器语言还具有运算的特征,其大概的讲,就是对数值型的Value(如:数字、颜色、变量等)举办加减乘除四则运算。这样的特色在CSS样式中是想都不敢想的,但在CSS预总结机语言中对体制做一些运算一点标题都尚未了,例如:

@base_margin: 10px;
@double_margin: @base_margin * 2;
@full_page: 960px;
@half_page: @full_page / 2;
@quarter_page: (@full_page / 2) / 2;

地方代码是LESS的运算示例,声贝拉米(Bellamy)下,在取得“@quarter_page”变量时,大家得以一向除以4,然则在此间,大家只是想演示一下圆括号组合的“运算顺序”(这几个运算顺序小学生也掌握)。在复合型运算中,小括号也是很有必不可少的,例如:

border: (@width / 2) solid #000;

Sass在数字运算上要比LESS更规范,他可以直接换算单位了。Sass可以处理不能辨识的襟怀单位,并将其出口。那几个特点很掌握是一个对前景的尝尝——注解W3C作出的部分变动。

Stylus的演算是七款预处理器语言中最精锐的一款,他所有别样程序语言一样的演算效用,简单点的加减乘除,复杂的有涉及运算、逻辑运算等。受限于篇幅,感兴趣的同校可以到官网上仔细翻阅。

7.颜色函数

颜色函数是CSS预处理器语言中放到的颜色函数功效,那一个职能可以对颜色进行处理,例如颜色的变亮、变暗、饱和度控制、色相控制,渐变颜色等处理卓殊的便利。

a)Sass颜色函数

lighten($color, 10%); /* 返回的颜色在$color基础上变亮10% */
darken($color, 10%);  /* 返回的颜色在$color基础上变暗10% */
saturate($color, 10%);   /* 返回的颜色在$color基础上饱和度增加10% */
desaturate($color, 10%); /* 返回的颜色在$color基础上饱和度减少10% */
grayscale($color);  /* 返回$color的灰度色*/
complement($color); /* 返回$color的补色 */
invert($color);     /* 返回$color的反相色 */
mix($color1, $color2, 50%); /* $color1 和 $color2 的 50% 混合色*/

那只是Sass中颜色函数的一个简单易行列表,越多详细的介绍可以阅读Sass文档。

水彩函数可以选用到其余一个要素上,只要其有颜色的性质,上面是一个概括的事例:

$color: #0982C1;
h1 {
  background: $color;
  border: 3px solid darken($color, 50%);/*边框颜色在$color的基础上变暗50%*/
}

b)LESS颜色函数

lighten(@color, 10%); /* 返回的颜色在@color基础上变亮10% */
darken(@color, 10%);  /* 返回的颜色在@color基础上变暗10%*/
saturate(@color, 10%);   /* 返回的颜色在@color基础上饱和度增加10% */
desaturate(@color, 10%); /* 返回的颜色在@color基础上饱和度降低10%*/
spin(@color, 10);  /* 返回的颜色在@color基础上色调增加10 */
spin(@color, -10); /* 返回的颜色在@color基础上色调减少10 */
mix(@color1, @color2); /* 返回的颜色是@color1和@color2两者的混合色 */

LESS的共同体颜色函数成效,请阅读LESS文档。

上边是LESS中什么行使一个颜色函数的简易例子:

@color: #0982C1;
h1 {
  background: @color;
  border: 3px solid darken(@color, 50%);
}

c)Stylus的颜色函数

lighten(color, 10%); /* 返回的颜色在'color'基础上变亮10% */
darken(color, 10%);  /* 返回的颜色在'color'基础上变暗10% */
saturate(color, 10%);   /* 返回的颜色在'color'基础上饱和度增加10% */
desaturate(color, 10%); /* 返回的颜色在'color'基础上饱和度降低10% */

有关于Stylus的水彩函数介绍,请阅读Stylus文档。

下边是Stylus颜色函数的一个简单实例:

color = #0982C1
h1
  background color
  border 3px solid darken(color, 50%)

从上边突显的一部分颜色函数可以告知我们,Sass、LESS和Stylus都有着强大的颜料函数作用,功效特色上都大致,只是在使用格局上略有例外。而且她们都抱有相同的一个目标,就是方便操作样式中的颜色值。

8.导入(Import)

在CSS中,并不希罕用@import来导入样式,因为这么的做法会伸张http的伏乞。不过在CSS预总结机中的导入(@import)规则和
CSS的截然分歧,它只是在语义上导入分裂的文件,但最后结出是生成一个CSS文件。如若你是通赤“@import
‘file.css’”导入“file.css”样式文件,这效果跟普通CSS导入样式文件一律。注意:导入文本中定义了变量、混合等信息也将会被引入到
主样式文件中,由此须要幸免他们的并行冲突。

Sass、LESS和Stylus六款CSS预处理器语言,导入样式的主意都是如出一辙:

被导入文本的样式:

/* file.{type} */
body {
  background: #EEE;
}

急需导入样式的公文:

@import "reset.css";
@import "file.{type}";
p {
  background: #0982C1;
}

转译出来的CSS代码:

@import "reset.css";
body {
  background: #EEE;
}
p {
  background: #0982C1;
}

9.注释(Comment)

CSS预处理器语言中的注释是比较基础的一片段,那四款预处理器语言除了拥有标准的CSS注释之外,还保有单行注释,只不过单行注释不会被转译出来。

a)Sass、LESS和Stylus的多行注释

多行注释和CSS的正统注释,他们得以出口到CSS样式中,但在Stylus转译时,唯有在“compress”选项未启用的时候才会被输出来。

/*
 *我是注释
*/
body
  padding 5px

b)Sass、LESS和Stylus的单行注释

单行注释跟JavaScript语言中的注释一样,使用双斜杠(//),但单行注释不会输出到CSS中。

//我是注释
@mainColor:#369;//定义主体颜色

在Stylus中除去上述三种注释之外,他还有一种注释,叫作多行缓冲注释。那种注释跟多行注释类似,分歧之处在于始的时候,那里是”/*!”。那几个一定于告诉Stylus压缩的时候那段无视直接出口。

/*!
*给定数值合体
*/
add(a, b)
  a + b

上面从九个常用的特色对Sass、LESS和Stylus三款CSS预处理器语言的选拔做了比较,在少数特征上得以说是一模一样,而有一些特性上作用实际一样,只是在局地书写规则上有所差距。当然有些特性是截然分化。在此地几是从使用形式上做为一个相比,主要目的是让我们通过比照之后,使自己拔取哪
一款CSS预处理器语言有所方向和拉扯。

函数

把常用的演算操作抽象出来,大家就收获了函数。

开发者能够自定义函数,预处理器自己也置于了大量的函数。最常用的嵌入函数应该就是颜色的演算函数了啊!有了它们,我们竟然都不需求开辟
Photoshop 来调色,就足以获得某个颜色的同色系变种了。

举个例子,大家要给一个按钮添加鼠标悬停效果,而最不难易行的告一段落效果就是让按钮的水彩加深一些。大家写出的
CSS 代码可能是这么的:

CSS

.button { background-color: #ff4466; } .button:hover {
background-color: #f57900; }

1
2
3
4
5
6
.button {
background-color: #ff4466;
}
.button:hover {
background-color: #f57900;
}

本人深信尽管是最显赫的视觉设计师,也很难分清 #ff4466#f57900
那三种颜色到底有哪些关联。而一旦大家的代码是用预处理语言来写的,那事情就直观多了:

CSS

.button $color = #ff9833 background-color: $color &:hover
background-color: darken($color, 20%)

1
2
3
4
5
6
.button
$color = #ff9833
 
background-color: $color
&:hover
background-color: darken($color, 20%)

其它,预处理器的函数往往还匡助默许参数、具名实参、arguments
对象等高档成效,内部还是可以安装标准分支,可以满足复杂的逻辑须要。

color:#936;

h1 {

七、CSS预处理器的高档应用

咱俩知晓,Sass、LESS和Stylus都富有变量、混合、嵌套、函数和效用域等风味,但那一个特点都是有些常备的风味。其实除了那么些特色之外,
他们还装有一些很有趣的性状有助于大家的费用,例如标准语句、循环语句等。接下来,大家一致从使用上来相比较一下这三款CSS预处理器语言在那地点选取又有什么分化异同。

a)条件语句

说到编程,对于编程基本控制流,大家并不会感觉到陌生,除了循环就是条件了。条件提供了言语的可控制,否则就是纯粹的静态语言。提供的尺度有导入、混合、函数以及更加多。在编程语言中广泛的基准语句:

if/else if/else

if表明式满足(true)的时候实施后边语然块,否则,继续后边的else
if或else。

在那六款css3预处理器语言中都具备那种思维,只可是LESS中发表的方法略有不现,接下去大家逐一看看她们具体哪些选用。

Sass的基准语句

Sass样式中的条件语句和任何编程语言的规范语句万分相像,在体制中得以应用“@if”来进展判断:

p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
}

编译出来的CSS:

p {
  border: 1px solid; 
}

在Sass中规范语句仍可以和@else if、@else配套使用:

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

转译出来的CSS:

p {color:green;}

Stylus的标准语句

Stylus的条件语句的行使和别的编程的原则语句使用基本接近,不相同的是她能够在样式去省略大括号({}):

box(x, y, margin = false)
  padding y x
  if margin
    margin y x
body
  box(5px, 10px, true)

Stylus同样可以和else if、else配套使用:

box(x, y, margin-only = false)
  if margin-only
    margin y x
  else
    padding y x

Stylus除了那种概括的基准语句应用之外,他还支持后缀条件语句。那就象征if和unless(熟知Ruby程序语言的用户应该都知晓unless条件,其几近与if相反,本质上是“(!(expr))”)当作操作符;当入手表明式为实在时候实施右边的操作对象。

诸如,大家定义了negative()来施行一些着力的反省。下边我们选择块式条件:

negative(n)
  unless n is a 'unit'
    error('无效数值')
  if n < 0
    yes
  else
    no

接下去,大家应用后缀条件让大家的法子简单:

negative(n)
  error('无效数值') unless n is a 'unit'
  return yes if n < 0
  no

本来,大家可以更进一步。如那么些“n < 0 ? yes : no”可以用布尔代表:“n
<
0”。后缀条件相符于半数以上的单行语句。如“@import,@charset”混合书写等。当然,上边所示的性质也是足以的:

pad(types = margin padding, n = 5px)
  padding unit(n, px) if padding in types
  margin unit(n, px) if margin in types

body
  pad()

body
  pad(margin)

body
  apply-mixins = true
  pad(padding, 10) if apply-mixins

地方代码转译出来的CSS:

body {
  padding: 5px;
  margin: 5px;
}
body {
  margin: 5px;
}
body {
  padding: 10px;
}

LESS的规则语句

LESS的条件语句使用有些另类,他不是我们常见的最主要词if和else
if之类,而其落成格局是选用重大词“when”。

.mixin (@a) when (@a >= 10) { 
  background-color: black; 
 } 
 .mixin (@a) when (@a < 10) { 
  background-color: white; 
 } 
 .class1 { .mixin(12) } 
 .class2 { .mixin(6) }

转译出来的CSS:

.class1 { 
  background-color: black; 
 } 
.class2 { 
  background-color: white; 
 }

行使When以及<、>、=、<=、>=是那些大致和有利的。LESS并没有停留在此间,而且提供了无数连串检查函数来协理标准表明式,例如:iscolor、isnumber、isstring、iskeyword、isurl等等。

.mixin (@a) when (iscolor(@a)) { 
  background-color: black; 
 } 
 .mixin (@a) when (isnumber(@a)) { 
  background-color: white; 
 } 
 .class1 { .mixin(red) } 
 .class2 { .mixin(6) }

转译出来的CSS

.class1 { 
  background-color: black; 
 } 
 .class2 { 
  background-color: white; 
 }

除此以外,LESS的口径表达式同样协助AND和OR以及NOT来构成条件表明式,那样能够协会成更为有力的标准表明式。须求专门提议的某些是,OR在LESS中并不是or关键词,而是用,来表示or的逻辑关系。

.smaller (@a, @b) when (@a > @b) { 
  background-color: black; 
} 
.math (@a) when (@a > 10) and (@a < 20) { 
  background-color: red; 
} 
.math (@a) when (@a < 10),(@a > 20) { 
  background-color: blue; 
} 
.math (@a) when not (@a = 10)  { 
  background-color: yellow; 
} 
.math (@a) when (@a = 10)  { 
  background-color: green; 
} 

.testSmall {.smaller(30, 10) } 
.testMath1 {.math(15)} 
.testMath2 {.math(7)} 
.testMath3 {.math(10)}

转译出来的CSS

.testSmall { 
  background-color: black; 
} 
.testMath1 { 
  background-color: red; 
  background-color: yellow; 
} 
.testMath2 { 
  background-color: blue; 
  background-color: yellow; 
} 
.testMath3 { 
  background-color: green; 
}

b)循环语句

Sass和Stylus还援助for循环语句,而LESS并没扶助for循环语句,但值得庆幸的是,在LESS中可以运用When来模拟出for循环的风味。

Sass的循环语句

Sass中应用for循环语句须要选取@for,并且同盟“from”和“through”一起使用,其中央语法:

@for $var from <start> through <end> {语句块}

大家来看一个几乎的事例:

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

转译出来的CSS代码:

.item-1 {  width: 2em; }
.item-2 {  width: 4em; }
.item-3 {  width: 6em; }

在Sass中循环语句除了@for语句之外,还有@each语句和@while语句

@each循环语法:

@each $var in <list>{语句块}

来看个简易的实例:

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('#{$animal}.png');
  }
}

转译出来的CSS

.puma-icon {  background-image: url('puma.png'); }
.sea-slug-icon {  background-image: url('sea-slug.png'); }
.egret-icon {  background-image: url('gret.png'); }
.salamander-icon {  background-image: url('salamander.png') }

@while循环使用和其他编程语言类似:

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

转译出来的CSS

.item-6 {  width: 12em; }
.item-4 {  width: 8em; }
.item-2 {  width: 4em; }

Stylus的循环语句

在Stylus样式中通过for/in对表明式举行巡回,形式如下:

for <val-name> [, <key-name>] in <expression>

例如:

body
  for num in 1 2 3
    foo num

转译出来CSS

body {
  foo: 1;
  foo: 2;
  foo: 3;
}

上面这一个事例演示了什么利用<key-name>:

body
  fonts = Impact Arial sans-serif
  for font, i in fonts
    foo i font

转译出来的CSS

body {
  foo: 0 Impact;
  foo: 1 Arial;
  foo: 2 sans-serif;
}

LESS的循环语句

在LESS语言中并没有明天的循环语句,不过像其规格语句一样,通过when来模拟出他的巡回成效。

.loopingClass (@index) when (@index > 0) {
  .myclass {
    z-index: @index;
  }
  // 递归
  .loopingClass(@index - 1);
}
// 停止循环
.loopingClass (0) {}

// 输出
.loopingClass (3);

转译出的CSS

.myclass {z-index: 3;}
.myclass {z-index: 2;}
.myclass {z-index: 1;}

比较,Sass和Stylus对标准语句和循环语句的拍卖要比LESS语言强大。因为她们具有真正的言语处理能力。

综述,大家对Sass、LESS和Stylus做一个简易的相比总括:

  • 三者都是开源项目;
  • Sass诞生是最早也是最成熟的CSS预处理器,有Ruby社区和Compass帮忙;Stylus早期服务器Node
    JS项目,在该社区拿走肯定扶助者;LESS出现于二〇〇九年,援助者远超于Ruby和Node
    JS社区;
  • Sass和LESS语法较为谨慎、严密,而Stylus语法相对散漫,其中LESS学习起来更快一些,因为她更像CSS的专业;
  • Sass和LESS相互影响较大,其中Sass受LESS影响,已经发展到了周密同盟CSS的SCSS;
  • Sass和LESS都有第三方工具提供转译,越发是Sass和Compass是绝配;
  • Sass、LESS和Stylus都存有变量、作用域、混合、嵌套、继承、运算符、颜色函数、导入和注释等着力特征,而且以“变量”、“混合”、“嵌套”、“继承”和“颜色函数”称为五大宗旨特性,各自特色达成效益焦点相似,只是利用规则上有所不一样;
  • Sass和Stylus具有类似于言语处理的力量,比如说条件语句、循环语句等,而LESS要求通过When等紧要词模拟那一个意义,在这一派略逊一层;

上面是CSS预处理器语言中的Sass、LESS和Stylus在某些方面的自查自纠,相对于CSS来说,上边都是CSS预处理器语言的独到之处?那么他有没有缺点呢?

万物都有阴阳两极,有圆就有缺,CSS预处理器语言也回避不了这么些宿命。个人感觉CSS预处理器语言那是程序员的玩具,想通过编程的点子跨界解决
CSS的题目。可以CSS应该面临的标题一个也必不可少,只是扩充了一个编译进程而已,不难的话CSS预处理器语言较CSS玩法变得更高级了,但与此同时下降了
自己对最后代码的控制力。更致命的是升高了门道,首先是左手门槛,其次是保安门槛,再来是团伙完全水平和专业的三昧。那也导致了初学学费的高昂。

全文从Sass、LESS和Stylus的背景介绍、安装步骤、转译方法、语法规则、基本特征和高档应用八个方面对当下场景上风行的三款CSS预处
理器语法做了一个比照。他们各有各的优势,也各有各的逆风局。现在大家又回去当初提的题材“我应该采取哪个种类CSS预处理器?”。不领会您是不是足以做出抉择?

原稿链接:sass、less和stylus的安装使用和入门实践
版权所有,转发时请注解出处,违者必究。
 原文链接()

 

 

Mixin

Mixin 是 CSS 预处理器提供的又一项实用功能。Mixin
的形制和用法跟函数非凡好像——先定义,然后在急需的地点调用,在调用时得以接受参数。它与函数的分裂之处在于…………

……

……

1 赞 1 收藏
评论

background-color:#333;

color: #0982C1;

关于作者:CSS魔法

亚洲必赢官网 12

百姓网前端工程师,移动 Web UI 框架
CMUI 作者,自称 “披着前端工程师外衣的设计师”。
个人主页 ·
我的篇章 ·
12 ·
    

亚洲必赢官网 13

}

}

正如您所阅览的,在Sass样式中,这样的代码是在简要然则的了。

您放在心上到了,这是一个再常见不过的,可是 Sass
同时也协助老的语法,就是不带有花括号和分行的办法:

紧要的一些是,Sass也还要支持老的语法,老的语法和常规的CSS语法略有分裂,他须求严峻的语法,任何的缩进和字符的荒唐都会招致样式的编译错
误。Sass可以简单大括号({})和分公司(;),完全依赖严厉的缩进和格式化代码,而且文件使用“.sass”扩张名,他的语法类似于:

h1

/*style.sass*/

color: #0982c1

h1

而 Stylus 辅助的语法要愈来愈多种性一点,它默许使用 .styl
的文书增添名,下边是 Stylus 扶助的语法:

color:#936

h1 {

background-color: #333

color: #0982C1;

2.LESS语法

}

LESS是CSS的一种增加格局,它并不曾阉割CSS的效应,而是在存活的CSS语法上,添加了众多外加的意义。就语法规则而言,LESS和Sass一样,都是采用CSS的标准语法,只是LESS的源文件的增加名是“.less”,其主干语法类似于:

h1

/*style.less*/

预处理器,为啥要动用预处理器。color: #0982C1;

h1 {

h1

color: #963;

color #0982C1

background-color: #333;

您也可以在同一个体裁单中运用区其他变量,例如上面的写法也不会报错:

}

h1 {

3.Stylus语法

color #0982c1

Stylus的语法花样多一些,它的文书扩充名是“.styl”,Stylus也承受规范的CSS语法,然而她也像Sass老的语法规则,使用缩进控制,同时Stylus也接受不带大括号({})和分行的语法,如下所示:

}

/*style.styl*/

h2

/*好像于CSS标准语法*/

font-size: 1.2em

h1 {

变量

color: #963;

你可以在 CSS
臆度算机中宣称变量,并在任何样式单中选择,协理任何类型的变量,例如颜色、数值(不管是不是包括单位)、文本。然后您可以随心所欲引用该变量。

background-color:#333;

Sass 的变量必须是 $ 开首,然后变量名和值使用冒号隔开,跟 CSS
的品质一致:

}

$mainColor: #0982c1;

/*简简单单大括号({})*/

$siteWidth: 1024px;

h1

$borderStyle: dotted;

color: #963;

body {

background-color: #333;

color: $mainColor;

/*一句话来说大括号({})和分行(;)*/

border: 1px $borderStyle $mainColor;

h1

max-width: $siteWidth;

color:#963

}

background-color:#333

而 Less 的变量名使用 @ 符号起始:

在Stylus样式中,你也足以在同一个体制文件中接纳不一样的语法规则,上边那样的写法也不会报错:

@mainColor: #0982c1;

/*style.styl*/

@siteWidth: 1024px;

h1 {

@borderStyle: dotted;

color  #963

body {

}

color: @mainColor;

h2

border: 1px @borderStyle @mainColor;

font-size:1.2em

max-width: @siteWidth;

六、Sass、LESS和Stylus特性

}

那三款CSS预处理器语言具有局地一如既往的特征,例如:变量、混入、嵌套、函数等。在这一节中,大家一一来对待一下那七款CSS预处理器语言种种特色的异议之处,以及使用格局。

Stylus 对变量名没有其他限制,你可以是 $
开首,也足以是任意的字符,而且与变量值之间可以用冒号、空格隔开,要求注意的是
Stylus (0.22.4) 将会编译 @
初步的变量,但其对应的值并不会给予该变量,换句话说,在 Stylus
的变量名不要用 @ 开首。

1.变量(Variables)

mainColor = #0982c1

如若你是一个开发人士,变量应该是你最好对象之一。在CSS预电脑语言中您也足以申明变量,并在一切样式表中使用。CSS预处理器语言辅助任何变量(例如:颜色、数值、文本)。然后你可以在随心所欲地方引用变量。

siteWidth = 1024px

a)Sass的变量

$borderStyle = dotted

Sass注明变量必须是“$”开始,前边紧跟变量名和变量值,而且变量名和变量值需求动用冒号(:)分隔开。就像是CSS属性设置同一:

body

/*声称变量*/

color mainColor

$mainColor: #963;

border 1px $borderStyle mainColor

$siteWidth: 1024px;

max-width siteWidth

$borderStyle: dotted;

上边的二种不相同的 CSS 预处理器的写法,最终都将时有暴发相同的结果:

/*调用变量*/                              |  /*转译出来的CSS*/

body {

——————————————+——————————

color: #0982c1;

body {                                    |  body {

border: 1px dotted #0982c1;

color: $mainColor;                      |    color: #963;

max-width: 1024px;

border:1px $borderStyle $mainColor;    |    border:1px dotted #963;

}

max-width: $siteWidth;                  |    max-width: 1024px;

你可以设想,参与你的 CSS
中选用了某个颜色的地方多达很多次,那么要修改颜色时你不可能不找到那数次的地方并逐项修改,而有了
CSS 预处理器,修改一个地点就够了!

}                                        |  }

嵌套

b)LESS的变量

假诺大家必要在CSS中相同的 parent
引用多个要素,那将是可怜干燥的,你须求一遍又一回地写 parent。例如:

LESS样式中阐明变量和调用变量和Sass一样,唯一的不相同就是变量名前边使用的是“@”字符:

section {

/*宣示变量*/

margin: 10px;

@mainColor: #963;

}

@siteWidth: 1024px;

section nav {

@borderStyle: dotted;

height: 25px;

/*调用变量*/                            |  /*转译出来的CSS*/

}

—————————————-+——————————-

section nav a {

body {                                  |  body {

color: #0982C1;

color: @mainColor;                    |    color:#963;

}

border:1px @borderStyle @mainColor;  |    border:1px dotted #963;

section nav a:hover {

max-width: @siteWidth;                |    max-width:1024px;

text-decoration: underline;

}                                      |  }

}

c)Stylus的变量

而只要用 CSS
预处理器,就足以少些很多单词,而且父子节点关系一目精通。咱们那里涉及的七个CSS 框架都是同意嵌套语法:

Stylus样式中声称变量没有其余限制,你可以应用“$”符号初叶。结尾的分集团(;)可有可无,但变量名和变量值之间的等号(=)是内需的。有一
点须要注意的是,若是大家拔取“@”符号开端来声称(0.22.4)变量,Stylus会举办编译,但其相应的值并不会赋值给变量。换句话说,在
Stylus中毫无采纳“@”符号先河申明变量。Stylus中调用变量的措施和LESS、Sass是完全相同的。

section {

/*宣示变量*/

margin: 10px;

mainColor = #963;

nav {

siteWidth = 1024px;

height: 25px;

$borderStyle = dotted;

a {

/*调用变量*/                            |    /*转译出来的CSS*/

color: #0982C1;

—————————————-+——————————–

&:hover {

body                                    | body {

text-decoration: underline;

color mainColor                      |  color: #963;

}

border 1px $borderStyle mainColor    |  border:1px dotted #963

}

max-width siteWidth                  |  max-width:1024px;

}

| }

}

Stylus还有一个异样成效,不需求分配值给变量就足以定义引用属性:

末段生成的 CSS 结果是:

/*水平垂直居中*/                    |  /*转译出来的CSS*/

section {

————————————+————————————

margin: 10px;

#logo                              |  #logo {

}

position  absolute                |    position:absolute;

section nav {

top  50%                          |    top:50%;

height: 25px;

left  50%                        |    left:50%;

}

width  w = 150px                  |    width:150px;

section nav a {

height  h = 80px                  |    height:80px;

color: #0982C1;

margin-left  -(w / 2)            |    margin-left:-75px;

}

margin-top  -(h / 2)                |    margin-top:-40px;

section nav a:hover {

|  }

text-decoration: underline;

从地点的代码中大家得以见见,CSS预处理器语言中的变量是值级其他重复使用,可以将一如既往的值定义成变量统一管理起来。

}

CSS预处理器语言中变量的表征适用于概念主旨(也就是大家常说的换肤),我们得以将背景颜色、字体颜色、边框属性等正规样式统一定义,那样不一致的宗旨只要求定义分歧的变量文件就能够。

不行之有利于!

2.作用域(Scope)

Mixins (混入)

CSS预处理器语言中的变量和任何程序语言一样,可以完结值的复用,同样它也设有生命周期,也就是Scope(变量范围,开发人士习惯称为成效域),不难点讲就是局地变量仍然全局变量的概念,查找变量的依次是先在一部分定义中找,若是找不到,则查找上级定义,直至全局。上边咱们透过一个不难的事例
来诠释那三款CSS预处理器的效能域使用。

Mixins 有点像是函数或者是宏,当你某段 CSS
日常索要在多少个要素中应用时,你可以为那个共用的 CSS 定义一个
Mixin,然后您只要求在急需引用那些 CSS 地方调用该 Mixin 即可。

a)Sass的效用域

Sass 的混入语法:

Sass中效率域在那两款预处理器是最差的,可以说在Sass中是不设有啥样全局变量。具体来看下边的代码:

@mixin error($borderWidth: 2px) {

/*Sass样式*/

border: $borderWidth solid #F00;

$color: black;

color: #F00;

.scoped {

}

$bg: blue;

.generic-error {

$color: white;

padding: 20px;

color: $color;

margin: 4px;

background-color:$bg;

@ include error();

}

}

.unscoped {

.login-error {

color:$color;

left: 12px;

}

position: absolute;

先看转译出来的CSS样式:

top: 20px;

.scoped {

@ include error(5px);

color:white;/*是白色*/

}

background-color:blue;

Less CSS 的混入语法:

}

.error(@borderWidth: 2px) {

.unscoped {

border: @borderWidth solid #F00;

color:white;/*白色(无全局变量概念)*/

color: #F00;

}

}

演示明显的告诉大家,在Sass样式中定义变量,调用变量是平素不全局变量一个定义存在,由此在Sass中定义了扳平变量名时,在调用之时千万要多加小心,不然会给你的体裁带来错误。

.generic-error {

b)LESS的功能域

padding: 20px;

LESS中的作用域和其余程序语言中的功能域卓殊的同等,他先是会寻找局地定义的变量,纵然没有找到,会像冒泡一样,超级顶级往下搜寻,直到根截止,同样上面的例子,大家来看看他在LESS下所起的更动。

margin: 4px;

/*LESS样式*/

.error();

@color: black;

}

.scoped {

.login-error {

@bg: blue;

left: 12px;

@color: white;

position: absolute;

color: @color;

top: 20px;

background-color:@bg;

.error(5px);

}

}

.unscoped {

Stylus 的混入语法:

color:@color;

error(borderWidth= 2px) {

}

border: borderWidth solid #F00;

转译出来的CSS样式:

color: #F00;

.scoped {

}

color:white;/*白色(调用了有的变量)*/

.generic-error {

background-color:blue;

padding: 20px;

}

margin: 4px;

.unscoped {

error();

color:black;/*红色(调用了全局变量)*/

}

}

.login-error {

c)Stylus的成效域

left: 12px;

Stylus即便起步相比晚,但其作用域的性状和LESS一样,可以接济全局变量和局变量。会向上冒泡查找,直到根截至。

position: absolute;

3.混合(Mixins)

top: 20px;

Mixins是CSS预处理器中语言中最强大的特点,简单点以来,Mixins能够将有些体裁抽出,作为独立定义的模块,被过多选取器重复使用。
平时您在写样式时一定有遇上过,某段CSS样式平日要用到几个因素中,那样你就要求重新的写很多次。在CSS预电脑语言中,你可以为那么些公用的CSS样式
定义一个Mixin,然后在您CSS须求运用那几个样式的地点间接调用你定义好的Mixin。那是一个那一个实用的特色,Mixins被作为一个公认的抉择
器,仍能够在Mixins中定义变量或者默许参数。

error(5px);

a)Sass的混合

}

Sass样式中声明Mixins时索要利用“@mixin”,然后后边紧跟Mixins的名,他也足以定义参数,同时可以给那一个参数设置一个默许值,但参数名是使用“$”符号早先,而且和参数值之间必要选取冒号(:)分开。

终极它们都将编译成如下的 CSS 样式:

在挑选器调用定义好的Mixins要求使用“@include”,然后在其后紧跟你要调用的Mixins名。不过在Sass中还协理老的调用方法,就是运用加号“+”调用Mixins,在“+”后紧跟Mixins名。

.generic-error {

同步来看个大约的例证,比如说在您的Sass样式中定义了一个称作“error”的Mixin,那么些“error”设置了一个参数“$borderWidth”,在没专门定义外,这些参数的默许值设置为“2px”:

padding: 20px;

/*声飞鹤个Mixin叫作“error”*/

margin: 4px;

@mixin error($borderWidth:2px){

border: 2px solid #f00;

border:$borderWidth solid #f00;

color: #f00;

color: #f00;

}

}

.login-error {

/*调用error Mixins*/

left: 12px;

.generic-error {

position: absolute;

@include error();/*一贯调用error mixins*/

top: 20px;

}

border: 5px solid #f00;

.login-error {

color: #f00;

@include error(5px);/*调用error
mixins,并将参数$borderWidth的值重定义为5px*/

}

}

继承

b)LESS的混合

当大家需求为多个因素定义相同样式的时候,大家可以设想动用持续的做法。例如我们平时索要:

在LESS中,混合是指将概念好的“ClassA”中引入另一个早就定义的“Class”,似乎在如今的“Class”中加进一个特性一样。

p,

不过LESS样式中表明Mixins和Sass表明方法不平等,他更像CSS定义样式,在LESS可以将Mixins看成是一个类接纳器,当然
Mixins也可以安装参数,并给参数设置默许值。但是设置参数的变量名是拔取“@”起首,同样参数和默许参数值之间须求运用冒号(:)分隔开。

ul,

正如Sass混合是的演示,同样在LESS样式中定义一个称为“error”的Mixin,这一个“error”设置了一个参数“@borderWidth”,在未曾更加定义外,这一个参数的默许值是“2px”:

ol {

/*声美赞臣(Meadjohnson)(Karicare)个Mixin叫作“error”*/

}

.error(@borderWidth:2px){

在 Sass 和 Stylus 我们得以这么写:

border:@borderWidth solid #f00;

.block {

color: #f00;

margin: 10px 5px;

}

padding: 2px;

/*调用error Mixins*/

}

.generic-error {

p {

.error();/*直白调用error mixins*/

@extend .block;

}

border: 1px solid #EEE;

.login-error {

}

.error(5px);/*调用error mixins,并将参数@borderWidth的值重定义为5px*/

ul, ol {

}

@extend .block;

c)Stylus的混合

color: #333;

Stylus中的混合和前五款CSS预处理器语言的插花略有分化,他得以不采纳其余标记,就是直接表明Mixins名,然后在概念参数和默认值之间用等号(=)来延续。

text-transform: uppercase;

/*声爱他美(Aptamil)个Mixin叫作“error”*/

}

error(borderWidth=2px){

在那边首先定义 .block 块,然后让 p 、ul 和 ol 元素继承 .block
,最毕生成的 CSS 如下:

border:borderWidth solid #f00;

.block, p, ul, ol {

color: #f00;

margin: 10px 5px;

}

padding: 2px;

/*调用error Mixins*/

}

.generic-error {

p {

error();/*直接调用error mixins*/

border: 1px solid #EEE;

}

}

.login-error {

ul, ol {

error(5px);/*调用error mixins,并将参数$borderWidth的值重定义为5px*/

color: #333;

}

text-transform: uppercase;

多少个示范都将会转译成相同的CSS代码:

}

.generic-error {

在那方面 Less 表现的稍微弱一些,更像是混入写法:

border: 2px solid #f00;

.block {

color:#f00;

margin: 10px 5px;

}

padding: 2px;

.login-error {

}

border:5px solid #f00;

p {

color: #f00;

.block;

}

border: 1px solid #EEE;

4.嵌套(Nesting)

}

CSS预处理器语言中的嵌套指的是在一个拔取器中嵌套另一个增选器来已毕持续,从而减弱代码量,并且扩展了代码的可读性。比如说,我们在CSS中三个要素有一个同等的父元素,那么写样式会变得很平淡,我们要求三次一次的在每个元素前写这个父元素,除非给一定的要素添加类名“class”或者ID。

ul, ol {

section {

.block;

margin:10px;

color: #333;

}

text-transform: uppercase;

section nav {

}

height:25px;

生成的 CSS 如下:

}

.block {

section nav a {

margin: 10px 5px;

color: #0982c1;

padding: 2px;

}

}

section nav a:hover {

p {

text-decoration: underline;

margin: 10px 5px;

}

padding: 2px;

反而,使用CSS预处理器语言的嵌套特性,大家可以在父元素的大括号({})里写这几个元素。同时可以运用“&”符号来引用父接纳器。对于Sass、LESS和Stylus那三款CSS预处理器语言的嵌套拔取器来说,他们都怀有同等的语法:

border: 1px solid #EEE;

section {

}

margin:10px;

ul,

nav {

ol {

height:25px;

margin: 10px 5px;

a {

padding: 2px;

color:#0982c1;

color: #333;

&:hover {

text-transform: uppercase;

text-decoration:underline;

}

}

你所观望的方面的代码中,.block
的样式将会被插入到对应的你想要继承的选料器中,但需要留意的是预先级的题材。

}

导入 (Import)

}

恒河沙数 CSS 开发者对导入的做法都不太发烧,因为它必要频仍的 HTTP
请求。不过在 CSS
预电脑中的导入操作则分歧,它只是在语义上包蕴了分化的文本,但最后结果是一个单纯的
CSS 文件,假若您是由此 @ import “file.css”; 导入 CSS
文件,那效果跟平时的 CSS
导入一样。注意:导入文本中定义的混入、变量等音信也将会被引入到主样式文件中,由此须要幸免它们互相争论。

}

reset.css:

地方的预处理器转译出来的CSS代码和我们开首显得的CSS代码是一律的,格外的惠及啊!

body {

5.继承(Inheritance)

background: #EEE;

对于熟谙CSS的同桌来说,对于属性的后续并不陌生。日常在写CSS样式常碰着四个元素运用相同的体制时,大家在CSS中司空眼惯都是那样写:

}

p,ul,ol{/*体制写在那里*/}

main.xxx:

那样做特其余好,但往往大家要求给单独元素添加其余的体制,那些时候大家就必要把内部拔取器单独出来写样式,如此一来大家保安样式就相当的勤奋。为了酬答这一个标题,CSS预处理器语言可以从一个抉择继续另个挑选器下的拥有样式。

@ import “reset.css”;

a)Sass和Stylus的继承

@ import “file.{type}”;

Sass和Stylus的接轨是把一个拔取器的享有样式继承到另个拔取器上。在继承另个选取器的体裁时需要使用“@extend”初叶,后边紧跟被持续的选拔器:

p {

.block {

background: #0982C1;

margin: 10px 5px;

}

padding: 2px;

末尾生成的 CSS:

}

@ import “reset.css”;

p {

body {

@extend .block;/*继承.block选用器下所有样式*/

background: #EEE;

border: 1px solid #eee;

}

}

p {

ul,ol {

background: #0982C1;

@extend .block; /*继承.block选择器下所有样式*/

}

color: #333;

水彩函数

text-transform: uppercase;

CSS
预处理器一般都会停放一些颜料处理函数用来对颜色值进行拍卖,例如加亮、变暗、颜色梯度等。

}

Sass:

地点的代码转译成CSS:

lighten($color, 10%);

.block,p,ul,ol {

darken($color, 10%);

margin: 10px 5px;

saturate($color, 10%);

padding:2px;

desaturate($color, 10%);

}

grayscale($color);

p {

complement($color);

border: 1px solid #eee

invert($color);

}

mix($color1, $color2, 50%);

ul,ol {

地点只是简短列了 Sass 的有的着力颜色处理函数,完整的列表请看 Sass
Documentation.

color:#333;

上边是一个实际的例子:

text-transform:uppercase;

$color: #0982C1;

}

h1 {

b)LESS的继承

background: $color;

LESS协助的继承和Sass与Stylus分歧,他不是在选拔器上三番五次,而是将Mixins中的样式嵌套到各样拔取器里面。那种方式的毛病就是在每个接纳器中会有再次的样式爆发。

border: 3px solid darken($color, 50%);

.block {

}

margin: 10px 5px;

Less CSS:

padding: 2px;

lighten(@color, 10%);

}

darken(@color, 10%);

p {

saturate(@color, 10%);

.block;/*继承.block接纳器下所有样式*/

desaturate(@color, 10%);

border: 1px solid #eee;

spin(@color, 10);

}

spin(@color, -10);

ul,ol {

mix(@color1, @color2);

.block; /*继承.block接纳器下所有样式*/

LESS 完整的颜色函数列表请看 LESS Documentation.

color: #333;

LESS 使用颜色函数的事例:

text-transform: uppercase;

@color: #0982C1;

}

h1 {

转译出来的CSS代码:

background: @color;

.block {

border: 3px solid darken(@color, 50%);

margin: 10px 5px;

}

padding:2px;

Stylus:

}

lighten(color, 10%);

p {

darken(color, 10%);

margin: 10px 5px;

saturate(color, 10%);

padding:2px;

desaturate(color, 10%);

border: 1px solid #eee

完全的颜料函数列表请阅读 Stylus Documentation.

}

实例:

ul,ol {

color = #0982C1

margin: 10px 5px;

h1

padding:2px;

background color

color:#333;

border 3px solid darken(color, 50%)

text-transform:uppercase;

运算符

}

你可以一向在 CSS 预电脑中实行体制的盘算,例如:

正如所见到的,上面的代码“.block”的体制将会被插入到相应的你要继续的挑选器中,但须要专注的是先期级的标题。

body {

6.运算符(Operations)

margin: (14px/2);

CSS预处理器语言还持有运算的性状,其简而言之,就是对数值型的Value(如:数字、颜色、变量等)进行加减乘除四则运算。那样的特点在CSS样式中是想都不敢想的,但在CSS估量算机语言中对体制做一些运算一点标题都没有了,例如:

top: 50px + 100px;

@base_margin: 10px;

right: 100px – 50px;

@double_margin: @base_margin * 2;

left: 10 * 10;

@full_page: 960px;

}

@half_page: @full_page / 2;

一些跟实际浏览器相关的拍卖

@quarter_page: (@full_page / 2) / 2;

那是宣传使用预处理的来头之一,并且是一个很好的说辞,这样可以节约的大方的时间和汗液。创设一个mixin来处理不一致浏览器的CSS写法是很简单的,节省了多量的再一次工作和惨痛的代码编辑。

地点代码是LESS的运算示例,声Bellamy(Bellamy)(Friso)下,在得到“@quarter_page”变量时,大家得以平昔除以4,然则在此地,大家只是想演示一下圆括号组合的“运算顺序”(这几个运算顺序小学生也知晓)。在复合型运算中,小括号也是很有必不可少的,例如:

Sass

border: (@width / 2) solid #000;

@mixin border-radius($values) {

Sass在数字运算上要比LESS更专业,他可以直接换算单位了。Sass可以拍卖无法识别的襟怀单位,并将其出口。那几个特点很显明是一个对将来的尝尝——声明W3C作出的局地改成。

-webkit-border-radius: $values;

Stylus的运算是七款预处理器语言中最有力的一款,他有着别样程序语言一样的演算功用,容易点的加减乘除,复杂的有关系运算、逻辑运算等。受限于篇幅,感兴趣的校友可以到官网上精心翻阅。

-moz-border-radius: $values;

7.颜色函数

border-radius: $values;

颜色函数是CSS预处理器语言中放置的颜料函数功用,那几个效应可以对颜色进行处理,例如颜色的变亮、变暗、饱和度控制、色相控制,渐变颜色等拍卖相当的有利。

}

a)Sass颜色函数

div {

lighten($color, 10%); /* 重返的颜色在$color基础上变亮10% */

@ include border-radius(10px);

darken($color, 10%);  /* 再次回到的水彩在$color基础上变暗10% */

}

saturate($color, 10%);  /* 再次回到的颜料在$color基础上饱和度扩充10% */

Less CSS

desaturate($color, 10%); /* 重临的颜色在$color基础上饱和度裁减10% */

.border-radius(@values) {

grayscale($color);  /* 重返$color的灰度色*/

-webkit-border-radius: @values;

complement($color); /* 返回$color的补色 */

-moz-border-radius: @values;

invert($color);    /* 再次回到$color的反相色 */

border-radius: @values;

mix($color1, $color2, 50%); /* $color1 和 $color2 的 50% 混合色*/

}

那只是Sass中颜色函数的一个粗略列表,越来越多详细的牵线可以翻阅Sass文档。

div {

颜色函数可以运用到别的一个因素上,只要其有颜色的习性,上边是一个简短的例子:

.border-radius(10px);

$color: #0982C1;

}

h1 {

Stylus

background: $color;

border-radius(values) {

border: 3px solid darken($color,
50%);/*边框颜色在$color的功底上变暗50%*/

-webkit-border-radius: values;

}

-moz-border-radius: values;

b)LESS颜色函数

border-radius: values;

lighten(@color, 10%); /* 重临的颜料在@color基础上变亮10% */

}

darken(@color, 10%);  /* 重临的颜料在@color基础上变暗10%*/

div {

saturate(@color, 10%);  /* 再次回到的水彩在@color基础上饱和度增添10% */

border-radius(10px);

desaturate(@color, 10%); /* 再次来到的颜色在@color基础上饱和度下跌10%*/

}

spin(@color, 10);  /* 再次来到的颜色在@color基础上色彩扩充10 */

编译结果:

spin(@color, -10); /* 再次来到的颜色在@color基础上色彩减少10 */

div {

mix(@color1, @color2); /* 重返的颜色是@color1和@color2两者的混合色 */

-webkit-border-radius: 10px;

LESS的完好颜色函数功效,请阅读LESS文档。

-moz-border-radius: 10px;

下边是LESS中什么运用一个颜料函数的几乎例子:

border-radius: 10px;

@color: #0982C1;

}

h1 {

3D文本

background: @color;

要生成富有 3D 效果的文件可以运用 text-shadows
,唯一的标题就是当要修改颜色的时候就相当的分神,而透过 mixin
和颜料函数可以很轻松的落到实处:

border: 3px solid darken(@color, 50%);

Sass

}

@mixin text3d($color) {

c)Stylus的颜料函数

color: $color;

lighten(color, 10%); /* 重临的水彩在’color’基础上变亮10% */

text-shadow: 1px 1px 0px darken($color, 5%),

darken(color, 10%);  /* 再次来到的颜色在’color’基础上变暗10% */

2px 2px 0px darken($color, 10%),

saturate(color, 10%);  /* 重临的颜料在’color’基础上饱和度扩张10% */

3px 3px 0px darken($color, 15%),

desaturate(color, 10%); /* 再次回到的水彩在’color’基础上饱和度下落10% */

4px 4px 0px darken($color, 20%),

有关于Stylus的水彩函数介绍,请阅读Stylus文档。

4px 4px 2px #000;

上面是Stylus颜色函数的一个不难实例:

}

color = #0982C1

h1 {

h1

font-size: 32pt;

background color

@ include text3d(#0982c1);

border 3px solid darken(color, 50%)

}

从上边突显的有的颜色函数可以告知大家,Sass、LESS和Stylus都拥有强大的颜色函数效能,效能特色上都盘锦小异,只是在行使格局上略有例外。而且他们都富有相同的一个目的,就是方便操作样式中的颜色值。

Less CSS

8.导入(Import)

.text3d(@color) {

在CSS中,并不欣赏用@import来导入样式,因为那样的做法会大增http的呼吁。但是在CSS预总括机中的导入(@import)规则和
CSS的大相径庭,它只是在语义上导入差其他文本,但最后结果是生成一个CSS文件。假设您是通赤“@import
‘file.css’”导入“file.css”样式文件,这效果跟日常CSS导入样式文件一律。注意:导入文本中定义了变量、混合等新闻也将会被引入到
主样式文件中,因而须要防止他们的竞相争辨。

color: @color;

Sass、LESS和Stylus七款CSS预处理器语言,导入样式的情势都是一致:

text-shadow: 1px 1px 0px darken(@color, 5%),

被导入文本的样式:

2px 2px 0px darken(@color, 10%),

/* file.{type} */

3px 3px 0px darken(@color, 15%),

body {

4px 4px 0px darken(@color, 20%),

background: #EEE;

4px 4px 2px #000;

}

}

内需导入样式的文书:

span {

@import “reset.css”;

font-size: 32pt;

@import “file.{type}”;

.text3d(#0982c1);

p {

}

background: #0982C1;

Stylus

}

text3d(color)

转译出来的CSS代码:

color: color

@import “reset.css”;

text-shadow: 1px 1px 0px darken(color, 5%), 2px 2px 0px darken(color,
10%), 3px 3px 0px darken(color, 15%), 4px 4px 0px darken(color, 20%),
4px 4px 2px #000

body {

span

background: #EEE;

font-size: 32pt

}

text3d(#0982c1)

p {

生成的 CSS

background: #0982C1;

span {

}

font-size: 32pt;

9.注释(Comment)

color: #0982c1;

CSS预处理器语言中的注释是比较基础的一部分,这五款预处理器语言除了具有专业的CSS注释之外,还有所单行注释,只可是单行注释不会被转译出来。

text-shadow: 1px 1px 0px #097bb7,

a)Sass、LESS和Stylus的多行注释

2px 2px 0px #0875ae,

多行注释和CSS的专业注释,他们可以出口到CSS样式中,但在Stylus转译时,只有在“compress”选项未启用的时候才会被输出来。

3px 3px 0px #086fa4,

/*

4px 4px 0px #07689a,

*本身是注释

4px 4px 2px #000;

*/

}

body

效果图:

padding 5px

列 (Columns)

b)Sass、LESS和Stylus的单行注释

动用数值操作和变量能够很有益的落实适应显示屏大小的布局处理。

单行注释跟JavaScript言语中的注释一样,使用双斜杠(//),但单行注释不会输出到CSS中。

Sass

//我是注释

$siteWidth: 1024px;

@mainColor:#369;//定义主体颜色

$gutterWidth: 20px;

在Stylus中除了以上二种注释之外,他还有一种注释,叫作多行缓冲注释。那种注释跟多行注释类似,不一样之处在于始的时候,那里是”/*!”。那一个一定于告诉Stylus压缩的时候那段无视直接出口。

$sidebarWidth: 300px;

/*!

body {

*给定数值合体

margin: 0 auto;

*/

width: $siteWidth;

add(a, b)

}

a + b

.content {

地方从九个常用的风味对Sass、LESS和Stylus三款CSS预处理器语言的使用做了对待,在一些特点上得以说是一模一样,而有一些风味上作用实际一样,只是在一些书写规则上有所不相同。当然有些特性是全然不一样。在那边几是从使用办法上做为一个比较,紧要目标是让大家通过相比较之后,使和谐采纳哪
一款CSS预处理器语言有所方向和扶持。

float: left;

七、CSS预处理器的尖端应用

width: $siteWidth – ($sidebarWidth+$gutterWidth);

大家知道,Sass、LESS和Stylus都负有变量、混合、嵌套、函数和效用域等特征,但这么些特色都是有的平淡无奇的特色。其实不外乎那几个特征之外,
他们还富有一些很风趣的风味有助于大家的开支,例如标准语句、循环语句等。接下来,大家同样从使用上来比较一下那四款CSS预处理器语言在那地点选拔又有啥不一致异同。

}

a)条件语句

.sidebar {

说到编程,对于编程基本控制流,我们并不会感觉到陌生,除了循环就是规则了。条件提供了言语的可控制,否则就是纯粹的静态语言。提供的条件有导入、混合、函数以及越来越多。在编程语言中广泛的尺度语句:

float: left;

if/else if/else

margin-left: $gutterWidth;

if表明式满意(true)的时候实施后面语然块,否则,继续前边的else
if或else。

width: $sidebarWidth;

在那五款css3预处理器语言中都具备那种思维,只不过LESS中发布的艺术略有不现,接下去大家逐一看看他们具体哪些采纳。

}

Sass的尺度语句

Less CSS

Sass样式中的条件语句和任何编程语言的规格语句极度相像,在体制中得以行使“@if”来进展判断:

@siteWidth: 1024px;

p {

@gutterWidth: 20px;

@if 1 + 1 == 2 { border: 1px solid;  }

@sidebarWidth: 300px;

@if 5 < 3      { border: 2px dotted; }

body {

@if null      { border: 3px double; }

margin: 0 auto;

}

width: @siteWidth;

编译出来的CSS:

}

p {

.content {

border: 1px solid;

float: left;

}

width: @siteWidth – (@sidebarWidth+@gutterWidth);

在Sass中规范语句还是能和@else if、@else配套使用:

}

$type: monster;

.sidebar {

p {

float: left;

@if $type == ocean {

margin-left: @gutterWidth;

color: blue;

width: @sidebarWidth;

} @else if $type == matador {

}

color: red;

Stylus

} @else if $type == monster {

siteWidth = 1024px;

color: green;

gutterWidth = 20px;

} @else {

sidebarWidth = 300px;

color: black;

body {

}

margin: 0 auto;

}

width: siteWidth;

转译出来的CSS:

}

p {color:green;}

.content {

Stylus的原则语句

float: left;

Stylus的规格语句的应用和其他编程的口径语句使用基本类似,差其余是他得以在体制去省略大括号({}):

width: siteWidth – (sidebarWidth+gutterWidth);

box(x, y, margin = false)

}

padding y x

.sidebar {

if margin

float: left;

margin y x

margin-left: gutterWidth;

body

width: sidebarWidth;

box(5px, 10px, true)

}

Stylus同样可以和else if、else配套使用:

实际效果

box(x, y, margin-only = false)

body {

if margin-only

margin: 0 auto;

margin y x

width: 1024px;

else

}

padding y x

.content {

Stylus除了那种概括的尺度语句应用之外,他还支持后缀条件语句。那就表示if和unless(熟练Ruby程序语言的用户应该都知晓unless条件,其几近与if相反,本质上是“(!(expr))”)当作操作符;当入手表明式为真正时候实施左侧的操作对象。

float: left;

譬如,我们定义了negative()来执行一些要旨的检查。下边我们运用块式条件:

width: 704px;

negative(n)

}

unless n is a ‘unit’

.sidebar {

error(‘无效数值’)

float: left;

if n < 0

margin-left: 20px;

yes

width: 300px;

else

}

no

错误报告

接下去,我们采纳后缀条件让我们的方式简单:

假设您时不时 CSS 你会发现很难找到 CSS
中错误的地点,那也是预处理框架的补益,它会告诉错误,你能够从那篇小说中读书怎么着让
CSS 框架错误报告。

negative(n)

注释

error(‘无效数值’) unless n is a ‘unit’

上述二种框架都支持形如 的多行注释以及 // 的单行注释。

return yes if n < 0

no

理所当然,大家得以更进一步。如那些“n < 0 ? yes : no”可以用布尔代表:“n
<
0”。后缀条件适合于多数的单行语句。如“@import,@charset”混合书写等。当然,上面所示的质量也是可以的:

pad(types = margin padding, n = 5px)

padding unit(n, px) if padding in types

margin unit(n, px) if margin in types

body

pad()

body

pad(margin)

body

apply-mixins = true

pad(padding, 10) if apply-mixins

上边代码转译出来的CSS:

body {

padding: 5px;

margin: 5px;

}

body {

margin: 5px;

}

body {

padding: 10px;

}

LESS的标准化语句

LESS的口径语句使用有些另类,他不是大家广大的重点词if和else
if之类,而其落成格局是使用重点词“when”。

.mixin (@a) when (@a >= 10) {

background-color: black;

}

.mixin (@a) when (@a < 10) {

background-color: white;

}

.class1 { .mixin(12) }

.class2 { .mixin(6) }

转译出来的CSS:

.class1 {

background-color: black;

}

.class2 {

background-color: white;

}

亚洲必赢官网 ,动用When以及<、>、=、<=、>=是可怜不难和便民的。LESS并不曾停留在那边,而且提供了诸多连串检查函数来协助标准表明式,例如:iscolor、isnumber、isstring、iskeyword、isurl等等。

.mixin (@a) when (iscolor(@a)) {

background-color: black;

}

.mixin (@a) when (isnumber(@a)) {

background-color: white;

}

.class1 { .mixin(red) }

.class2 { .mixin(6) }

转译出来的CSS

.class1 {

background-color: black;

}

.class2 {

background-color: white;

}

别的,LESS的规则表明式同样支撑AND和OR以及NOT来构成条件表明式,那样能够团体成更为有力的条件表明式。要求特地提出的某些是,OR在LESS中并不是or关键词,而是用,来表示or的逻辑关系。

.smaller (@a, @b) when (@a > @b) {

background-color: black;

}

.math (@a) when (@a > 10) and (@a < 20) {

background-color: red;

}

.math (@a) when (@a < 10),(@a > 20) {

background-color: blue;

}

.math (@a) when not (@a = 10)  {

background-color: yellow;

}

.math (@a) when (@a = 10)  {

background-color: green;

}

.testSmall {.smaller(30, 10) }

.testMath1 {.math(15)}

.testMath2 {.math(7)}

.testMath3 {.math(10)}

转译出来的CSS

.testSmall {

background-color: black;

}

.testMath1 {

background-color: red;

background-color: yellow;

}

.testMath2 {

background-color: blue;

background-color: yellow;

}

.testMath3 {

background-color: green;

}

b)循环语句

Sass和Stylus还辅助for循环语句,而LESS并没帮衬for循环语句,但值得庆幸的是,在LESS中可以运用When来模拟出for循环的特征。

Sass的循环语句

Sass中应用for循环语句必要选拔@for,并且合作“from”和“through”一起使用,其主干语法:

@for $var from through {语句块}

大家来看一个简单易行的事例:

@for $i from 1 through 3 {

.item-#{$i} { width: 2em * $i; }

}

转译出来的CSS代码:

.item-1 {  width: 2em; }

.item-2 {  width: 4em; }

.item-3 {  width: 6em; }

在Sass中循环语句除了@for语句之外,还有@each语句和@while语句

@each循环语法:

@each $var in {语句块}

来看个简易的实例:

@each $animal in puma, sea-slug, egret, salamander {

.#{$animal}-icon {

background-image: url(‘#{$animal}.png’);

}

}

转译出来的CSS

.puma-icon {  background-image: url(‘puma.png’); }

.sea-slug-icon {  background-image: url(‘sea-slug.png’); }

.egret-icon {  background-image: url(‘gret.png’); }

.salamander-icon {  background-image: url(‘salamander.png’) }

@while循环使用和任何编程语言类似:

$i: 6;

@while $i > 0 {

.item-#{$i} { width: 2em * $i; }

$i: $i – 2;

}

转译出来的CSS

.item-6 {  width: 12em; }

.item-4 {  width: 8em; }

.item-2 {  width: 4em; }

Stylus的循环语句

在Stylus样式中经过for/in对表达式举行巡回,情势如下:

for [, ] in

例如:

body

for num in 1 2 3

foo num

转译出来CSS

body {

foo: 1;

foo: 2;

foo: 3;

}

上面那几个例子演示了什么样行使:

body

fonts = Impact Arial sans-serif

for font, i in fonts

foo i font

转译出来的CSS

body {

foo: 0 Impact;

foo: 1 Arial;

foo: 2 sans-serif;

}

LESS的循环语句

在LESS语言中并没有前几天的循环语句,但是像其规格语句一样,通过when来模拟出他的大循环功用。

.loopingClass (@index) when (@index > 0) {

.myclass {

z-index: @index;

}

// 递归

.loopingClass(@index – 1);

}

// 为止循环

.loopingClass (0) {}

// 输出

.loopingClass (3);

转译出的CSS

.myclass {z-index: 3;}

.myclass {z-index: 2;}

.myclass {z-index: 1;}

相对而言,Sass和Stylus对标准语句和循环语句的处理要比LESS语言强大。因为她们有所真正的语言处理能力。

归咎,大家对Sass、LESS和Stylus做一个粗略的比较计算:

三者都是开源项目;

Sass诞生是最早也是最成熟的CSS预处理器,有Ruby社区和Compass帮忙;Stylus早期服务器Node
JS项目,在该社区得到肯定帮忙者;LESS出现于二零零六年,协理者远超于Ruby和Node
JS社区;

Sass和LESS语法较为谨慎、严密,而Stylus语法相对散漫,其中LESS学习起来更快一些,因为她更像CSS的规范;

Sass和LESS互相影响较大,其中Sass受LESS影响,已经发展到了到家合作CSS的SCSS;

Sass和LESS都有第三方工具提供转译,尤其是Sass和Compass是绝配;

Sass、LESS和Stylus都有所变量、效能域、混合、嵌套、继承、运算符、颜色函数、导入和注释等主导特征,而且以“变量”、“混合”、“嵌套”、“继承”和“颜色函数”称为五大基本特性,各自特色落成效益宗旨相似,只是利用规则上有所分化;

Sass和Stylus具有类似于言语处理的能力,比如说条件语句、循环语句等,而LESS需求通过When等重点词模拟那些效应,在这一派略逊一层;

上边是CSS预处理器语言中的Sass、LESS和Stylus在某些地方的自查自纠,相对于CSS来说,上边都是CSS预处理器语言的助益?那么他有没有弱点呢?

万物都有阴阳两极,有圆就有缺,CSS预处理器语言也回避不了那个宿命。个人感觉CSS预处理器语言那是程序员的玩具,想经过编程的办法跨界解决
CSS的难题。能够CSS应该面临的难题一个也少不了,只是增加了一个编译进度而已,简单来讲CSS预处理器语言较CSS玩法变得更高级了,但还要下跌了
自己对最终代码的控制力。更致命的是增长了门槛,首先是左侧门槛,其次是维护门槛,再来是协会完全水平和正规的门槛。那也促成了初学学习开支的高昂。

全文从Sass、LESS和Stylus的背景介绍、安装步骤、转译方法、语法规则、基本特点和高等应用五个方面对脚下场地上流行的四款CSS预处
理器语法做了一个相对而言。他们各有各的优势,也各有各的逆风局。现在大家又重返当初提的标题“我应当拔取哪一类CSS预处理器?”。不明了你是否足以做出接纳?

网站地图xml地图