金沙澳门官网网址:预处理器,less和stylus的安装

作者: 前端知识  发布:2019-08-22

浅谈 CSS 预处理器(一):为什么要使用预处理器?

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

本文作者: 伯乐在线 - CSS魔法 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

前言

你好,我是魔法哥。我是一名传统的前端开发者,我的很大一部分工作就是为各种类型的网页写 CSS,写了很多年。

我从三年前开始接触并使用 CSS 预处理,如鱼得水,相见恨晚。因此,我感觉有必要写些文章来总结一下这方面的心得。如果你是一位还没有接触预处理器的 CSS 开发者,希望我的文章能够帮助你轻松开始!

(注:本文的示例代码均采用 Stylus 作为 CSS 预处理语言。)

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

背景

CSS 自诞生以来,基本语法和核心机制一直没有本质上的变化,它的发展几乎全是表现力层面上的提升。最开始 CSS 在网页中的作用只是辅助性的装饰,轻便易学是最大的需求;然而如今网站的复杂度已经不可同日而语,原生 CSS 已经让开发者力不从心。

当一门语言的能力不足而用户的运行环境又不支持其它选择的时候,这门语言就会沦为 “编译目标” 语言。开发者将选择另一门更高级的语言来进行开发,然后编译到底层语言以便实际运行。

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

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

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

简单梳理一下,CSS 预处理器为我们带来了几项重要的能力,由浅入深排列如下。(不用在意你用到了多少,无论深浅,都是获益。)

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

文件切分

页面越来越复杂,需要加载的 CSS 文件也越来越大,我们有必要把大文件切分开来,否则难以维护。传统的 CSS 文件切分方案基本上就是 CSS 原生的 @import 指令,或在 HTML 中加载多个 CSS 文件,这些方案通常不能满足性能要求。

CSS 预处理器扩展了 @import 指令的能力,通过编译环节将切分后的文件重新合并为一个大文件。这一方面解决了大文件不便维护的问题,另一方面也解决了一堆小文件在加载时的性能问题。

五、Sass、LESS和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语法

选择符嵌套

选择符嵌套是文件内部的代码组织方式,它可以让一系列相关的规则呈现出层级关系。在以前,如果要达到这个目的,我们只能这样写:

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 中的所有属性值都是 “幻数”。你不知道这个值是怎么来的、它的什么样的意义。有了变量之后,我们就可以给这些 “幻数” 起个名字了,便于记忆、阅读和理解。

接下来我们会发现,当某个特定的值在多处用到时,变量就是一种简单而有效的抽象方式,可以把这种重复消灭掉,让你的代码更加 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新版语法规则*/

运算

光有变量还是不够的,我们还需要有运算。如果说变量让值有了意义,那么运算则可以让值和值建立关联。有些属性的值其实跟其它属性的值是紧密相关的,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{

函数

把常用的运算操作抽象出来,我们就得到了函数。

开发者可以自定义函数,预处理器自己也内置了大量的函数。最常用的内置函数应该就是颜色的运算函数了吧!有了它们,我们甚至都不需要打开 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;

Mixin

Mixin 是 CSS 预处理器提供的又一项实用功能。Mixin 的形态和用法跟函数十分类似——先定义,然后在需要的地方调用,在调用时可以接受参数。它与函数的不同之处在于…………

……

……

1 赞 1 收藏 评论

background-color:#333;

关于作者:CSS魔法

金沙澳门官网网址 1

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

金沙澳门官网网址 2

}

正如你所看到的,在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

六、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的运算示例,声明一下,在取得“@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的补色 */

本文由金沙澳门官网发布于前端知识,转载请注明出处:金沙澳门官网网址:预处理器,less和stylus的安装

关键词: 金沙澳门官网