开头认识,sass的新手统计

起来认识 LESS

2012/09/24 · CSS ·
CSS

来源:申毅&邵华@IBM
DevelopWorks

LESS 背景介绍

LESS 提供了四种方法能平滑的将写好的代码转化成标准 CSS
代码,在重重风行的框架和工具盒中已经能时时看看 LESS 的身影了(例如
推文(Tweet) 提供的 bootstrap 库就动用了 LESS)。那么,LESS
是从何而来呢?它和 SASS 等体制表语言又有什么不同吧?

图 1.LESS 的官网介绍
亚洲必赢官网 1

基于维基百科上的牵线,其实 LESS 是 亚历克西斯 Sellier 受 SASS
的熏陶创立的开源项目。当时 SASS 拔取了缩进作为分隔符来区分代码块,而不是
CSS 中广为使用的括号。为了让 CSS 现有用户使用起来更为有利于,亚历克西斯 开发了
LESS 并提供了近乎的职能。在一上马,LESS 的解释器也同样是由 Ruby
编写,后来才转而利用了 JavaScript. LESS
代码既可以运行在客户端,也得以运行在劳务器端。在客户端只要把 LESS
代码和对应的 JavaScript 解释器在同一页面引用即可;而在劳动器端,LESS
可以运作在 Node.js 上,也得以运作在 Rhino 那样的 JavaScript 引擎上。

说一点题外话,其已毕在的 SASS
已经有了两套语法规则:一个一如既往是用缩进作为分隔符来区分代码块的;另一套规则和
CSS 一样采纳了大括弧作为风格符。后一种语法规则又名 SCSS,在 SASS 3
之后的本子都帮助那种语法规则。SCSS 和 LESS
已经特别像了,它俩之间更详细的比较可以参考 此链接。

LESS 高级特性

俺们领略 LESS
拥有四大特色:变量、混入、嵌套、函数。这几个特征在别的文章中早已拥有介绍,那里就不复述了。其实,LESS
还持有一些很有意思的特点有助于大家的开发,例如方式匹配、条件表达式、命名空间和成效域,以及
JavaScript 赋值等等。让我们来挨家挨户看看那么些特色吧。

形式匹配:

相信大家对 LESS 四大特点中的混入 (mixin)
如故回想深远吧,您用它亦可定义一堆属性,然后轻松的在三个样式集中收录。甚至在概念混入时进入参数使得那一个属性根据调用的参数差别而变更不相同的品质。那么,让大家更进一步,来精通一下
LESS 对混入的更高级帮忙:情势匹配和准星表明式。

首先,让大家来回想一下经常的带参数的混入情势:

清单 1. 带参数(及参数缺省值)的混入

CSS

.border-radius (@radius: 3px) { border-radius: @radius;
-moz-border-radius: @radius; -webkit-border-radius: @radius; } .button {
.border-radius(6px); } .button2 { .border-radius(); }

1
2
3
4
5
6
7
8
9
10
11
.border-radius (@radius: 3px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
.button {
  .border-radius(6px);
}
.button2 {
  .border-radius();
}

清单 2. 混入生成的 CSS 代码

CSS

.button { border-radius: 6px; -moz-border-radius: 6px;
-webkit-border-radius: 6px; } .button2 { border-radius: 3px;
-moz-border-radius: 3px; -webkit-border-radius: 3px; }

1
2
3
4
5
6
7
8
9
10
.button {
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
}
.button2 {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

从地点那些事例可以看看,在混入大家可以定义参数,同时也足以为那些参数指定一个缺省值。那样大家在调用这几个混入时若是指定了参数 .border-radius(6px),LESS
就会用 6px来替换,如若不指定参数来调用 .border-radius(),LESS
就会用缺省的 3px来替换。未来,大家更近一步,不仅仅通过参数值来改变最终结出,而是通过传播区其他参数个数来同盟区其余混入。

清单 3. 应用差其他参数个数来协作不一样的混入

CSS

.mixin (@a) { color: @a; width: 10px; } .mixin (@a, @b) { color:
fade(@a, @b); } .header{ .mixin(red); } .footer{ .mixin(blue, 50%); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.mixin (@a) {
  color: @a;
  width: 10px;
}
.mixin (@a, @b) {
  color: fade(@a, @b);
}
 
.header{
    .mixin(red);
}
.footer{
    .mixin(blue, 50%);
}

清单 4. 不一参数个数调用后转移的 CSS 代码

CSS

.header { color: #ff0000; width: 10px; } .footer { color: rgba(0, 0,
255, 0.5); }

1
2
3
4
5
6
7
.header {
  color: #ff0000;
  width: 10px;
}
.footer {
  color: rgba(0, 0, 255, 0.5);
}

 

本条例子有些像 Java 语言中的方法调用有些近乎,LESS
可以依据调用参数的个数来拔取正确的混入来带走。以后,大家询问到通过传播参数的值,以及传入不同的参数个数可以挑选不一样的混入及变更它的末梢代码。那多少个例证的格局匹配都以格外简单领悟的,让我们换个思路,上边的例子中参数都以由变量构成的,其实在
LESS
中定义参数是可以用常量的!形式匹配时极度的主意也会发生相应的转移,让大家看个实例。

清单 5. 用常量参数来控制混入的情势匹配

CSS

.mixin (dark, @color) { color: darken(@color, 10%); } .mixin (light,
@color) { color: lighten(@color, 10%); } .mixin (@zzz, @color) {
display: block; weight: @zzz; } .header{ .mixin(dark, red); } .footer{
.mixin(light, blue); } .body{ .mixin(none, blue); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.mixin (dark, @color) {
  color: darken(@color, 10%);
}
.mixin (light, @color) {
  color: lighten(@color, 10%);
}
.mixin (@zzz, @color) {
  display: block;
  weight: @zzz;
}
 
.header{
    .mixin(dark, red);
}
.footer{
    .mixin(light, blue);
}
.body{
    .mixin(none, blue);
}

清单 6. 常量参数生成的 CSS 代码

CSS

.header { color: #cc0000; display: block; weight: dark; } .footer {
color: #3333ff; display: block; weight: light; } .body { display:
block; weight: none; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.header {
  color: #cc0000;
  display: block;
  weight: dark;
}
.footer {
  color: #3333ff;
  display: block;
  weight: light;
}
.body {
  display: block;
  weight: none;
}

 

透过那么些事例大家得以看看,当我们定义的是变量参数时,因为 LESS
中对变量并没有项目标概念,所以它只会按照参数的个数来抉择相应的混入来替换。而定义常量参数就差异了,这时候不仅参数的个数要相应的上,而且常量参数的值和调用时的值也要一致才会合作的上。值得注意的是大家在
body 中的调用,它调用时指定的率先个参数 none
并不只怕匹配上前八个混入,而第八个混入 .mixin (@zzz, @color)就分裂了,由于它的三个参数都是变量,所以它承受任何值,由此它对三个调用都能匹配成功,由此大家在最终的
CSS 代码中看看每便调用的结果中都含有了第五个混入的品质。

最后,我们把清单 1
中的代码做略微改动,增添一个无参的混入和一个常量参数的混入,您猜猜看最后的匹配结果会暴发什么样变化么?

清单 7. 无参和常量参数的格局匹配

CSS

.border-radius (@radius: 3px) { border-radius: @radius;
-moz-border-radius: @radius; -webkit-border-radius: @radius; }
.border-radius (7px) { border-radius: 7px; -moz-border-radius: 7px; }
.border-radius () { border-radius: 4px; -moz-border-radius: 4px;
-webkit-border-radius: 4px; } .button { .border-radius(6px); } .button2
{ .border-radius(7px); } .button3{ .border-radius(); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.border-radius (@radius: 3px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
 
.border-radius (7px) {
  border-radius: 7px;
  -moz-border-radius: 7px;
}
.border-radius () {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
 
.button {
  .border-radius(6px);
}
.button2 {
  .border-radius(7px);
}
.button3{
.border-radius();      
}

 

下边的结果大概会胜出您的预想,无参的混入是力所能及包容任何调用,而常量参数分外严厉,必须确保参数的值 (7px)和调用的值(7px)一致才会同盟。

清单 8. 到场了无参混入后生成的 CSS 代码

CSS

.button { border-radius: 6px; -moz-border-radius: 6px;
-webkit-border-radius: 6px; border-radius: 4px; -moz-border-radius: 4px;
-webkit-border-radius: 4px; } .button2 { border-radius: 7px;
-moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px;
-moz-border-radius: 7px; border-radius: 4px; -moz-border-radius: 4px;
-webkit-border-radius: 4px; } .button3 { border-radius: 3px;
-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 4px;
-moz-border-radius: 4px; -webkit-border-radius: 4px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.button {
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
.button2 {
  border-radius: 7px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
.button3 {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

 

规格表明式

有了形式匹配之后是福利了不少,我们能依照区其余急需来合作不相同的混入,但更进一步的就是行使标准表明式来一发准确,越发严酷的来界定混入的匹配,达成的主意就是利用了 when其一十分首要词。

清单 9. 应用标准表明式来控制方式匹配

CSS

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

1
2
3
4
5
6
7
8
.mixin (@a) when (@a >= 10) {
  background-color: black;
}
.mixin (@a) when (@a < 10) {
  background-color: white;
}
.class1 { .mixin(12) }
.class2 { .mixin(6) }

清单 10. 规则表达式生成的 CSS 代码

CSS

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

1
2
3
4
5
6
.class1 {
  background-color: black;
}
.class2 {
  background-color: white;
}

 

使用 When 以及 <, >, =, <=, >= 是非常简便和便利的。LESS
并从未停留在那边,而且提供了广大门类检查函数来帮忙标准表明式,例如 iscolorisnumberisstringiskeywordisurl等等。

清单 11. 条件表达式中扶助的品类检查函数

CSS

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

1
2
3
4
5
6
7
8
.mixin (@a) when (iscolor(@a)) {
  background-color: black;
}
.mixin (@a) when (isnumber(@a)) {
  background-color: white;
}
.class1 { .mixin(red) }
.class2 { .mixin(6) }

清单 12. 门类检查匹配后转移的 CSS 代码

CSS

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

1
2
3
4
5
6
.class1 {
  background-color: black;
}
.class2 {
  background-color: white;
}

 

其余,LESS 的准绳表明式同样支撑 AND 和 OR 以及 NOT
来组成条件表达式,这样可以团体成更为强大的规范表达式。要求特别提出的少数是,OR
在 LESS 中并不是用 or 关键字,而是用 , 来表示 or 的逻辑关系。

清单 13. AND,OR,NOT 条件表明式

CSS

.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)}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.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)}

清单 14. AND,OR,NOT 条件表明式生成的 CSS 代码

CSS

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.testSmall {
  background-color: black;
}
.testMath1 {
  background-color: red;
  background-color: yellow;
}
.testMath2 {
  background-color: blue;
  background-color: yellow;
}
.testMath3 {
  background-color: green;
}

 

命名空间和成效域

LESS 所牵动的变量,混入那一个特色其实很大程度上幸免了古板 CSS
中的多量代码重复。变量可以幸免一个天性数十次重复,混入可以避免属性集的重复。而且动用起来特别灵活,维护起来也方便了广大,只要修改一处定义而无需修改多处引用的地点。将来,让大家更进一步,当自个儿定义好了变量和混入之后,怎么能更好的支配和使用它们啊,怎么幸免和其他地方定义的变量及混入争执?一个鲜明的想法就是像此外语言同样引入命名空间和功用域了。首先我们来看一个
LESS 的功效域的事例。

开头认识,sass的新手统计。清单 15. 变量的成效域

CSS

@var: red; #page { @var: white; #header { color: @var; } } #footer {
color: @var; }

1
2
3
4
5
6
7
8
9
10
@var: red;
#page {
  @var: white;
  #header {
    color: @var;
  }
}
#footer {
  color: @var;
}

 

在这几个事例里,能够看出 header
中的 @var会率先在时下效率域寻找,然后再逐层往父功效域中搜索,一向到顶层的大局意义域中截至。所以
header 的 @var在父成效域中找到之后就告一段落了追寻,最后的值为 white。而
footer
中的 @var在现阶段功用域没找到定义之后就招来到了全局成效域,最后的结果就是大局功能域中的定义值
red。

清单 16. 变量效能域例子生成的 CSS 代码

CSS

#page #header { color: #ffffff; // white } #footer { color:
#ff0000; // red }

1
2
3
4
5
6
#page #header {
  color: #ffffff;  // white
}
#footer {
  color: #ff0000;  // red
}

 

打探了效用域之后让大家再来看一下命名空间,大家可以用命名空间把变量和混入封装起来,避免和别的地点的定义龃龉,引用起来也丰富福利,只要在前边加上相应的命名空间就可以了。

清单 17. 命名空间的例证

CSS

@var-color: white; #bundle { @var-color: black; .button () { display:
block; border: 1px solid black; background-color: @var-color; } .tab() {
color: red } .citation() { color: black} .oops {weight: 10px} } #header
{ color: @var-color; #bundle > .button; #bundle > .oops;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@var-color: white;
#bundle {
  @var-color: black;
 
  .button () {
    display: block;
    border: 1px solid black;
    background-color: @var-color;
  }
  .tab() { color: red }
  .citation() { color: black}
  .oops {weight: 10px}
}
 
#header {
    color: @var-color;
    #bundle > .button;
    #bundle > .oops;

 

此间能够见到,我们运用嵌套规则在 #bundle中确立了一个命名空间,在里面封装的变量以及品质集合都不会揭示到表面空间中,例如 .tab(), .citation()都并未揭发在终极的
CSS 代码中。而值得注意的某些是 .oops 却被暴光在了最终的 CSS
代码中,那种结果大概并不是我们想要的。其实同样的事例大家可以在混入的例子中也得以窥见,即无参的混入 .tab()是和一般性的本性集 .oops今非昔比的。无参的混入是不会揭穿在终极的
CSS
代码中,而寻常的属性集则会以后出来。我们在概念命名空间和混入时要小心处理那样的差距,防止带来潜在的标题。

清单 18. 命名空间例子生成的 CSS 代码

CSS

#bundle .oops { weight: 10px; } #header { color: #ffffff; display:
block; border: 1px solid black; background-color: #000000; weight:
10px; }

1
2
3
4
5
6
7
8
9
10
#bundle .oops {
  weight: 10px;
}
#header {
  color: #ffffff;
  display: block;
  border: 1px solid black;
  background-color: #000000;
  weight: 10px;
}

 

JavaScript 赋值 (JavaScript Evaluation)

假如能在 CSS 中动用一些 JavaScript 方法确实是可怜令人开心的,而 LESS
真正逐步进入这项功用,如今曾经能选拔字符串及数字的常用函数了,想要在
LESS 中利用 JavaScript
赋值只须要用反引号(`)来含有所要进行的操作即可。让我们看看实例吧。

清单 19. JavaScript 赋值的例证

CSS

.eval { js: `1 + 1`; js: `(1 + 1 == 2 ? true : false)`; js:
`”hello”.toUpperCase() + ‘!’`; title: `process.title`; } .scope {
@foo: 42; var: `this.foo.toJS()`; } .escape-interpol { @world:
“world”; width: ~`”hello” + ” ” + @{world}`; } .arrays { @ary: 1, 2,
3; @ary2: 1 2 3; ary: `@{ary}.join(‘, ‘)`; ary: `@{ary2}.join(‘,
‘)`; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.eval {
    js: `1 + 1`;
    js: `(1 + 1 == 2 ? true : false)`;
    js: `"hello".toUpperCase() + ‘!’`;
    title: `process.title`;
}
.scope {
    @foo: 42;
    var: `this.foo.toJS()`;
}
.escape-interpol {
    @world: "world";
    width: ~`"hello" + " " + @{world}`;
}
.arrays {
    @ary:  1, 2, 3;
    @ary2: 1  2  3;
    ary: `@{ary}.join(‘, ‘)`;
    ary: `@{ary2}.join(‘, ‘)`;
}

 

我们可以看来,在 eval 中大家得以用 JavaScript
做数字运算,布尔表明式;对字符串做大小写转化,串联字符串等操作。甚至最终可以拿到到
JavaScript 的运转环境(process.title)。同样能够观察 LESS
的功效域和变量也同样在 JavaScript 赋值中采取。而最终的例子中,大家看出
JavaScript 赋值同样利用于数组操作当中。其实 LESS 的 JavaScript
赋值还有支撑其他部分艺术,但是当下没有发表出来。

清单 20. JavaScript 赋值生成的 CSS 代码

CSS

.eval { js: 2; js: true; js: “HELLO!”; title:
“/Users/Admin/Downloads/LESS/Less.app/Contents/Resources/engines/bin/node”;
} .scope { var: 42; } .escape-interpol { width: hello world; } .arrays {
ary: “1, 2, 3”; ary: “1, 2, 3”; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.eval {
  js: 2;
  js: true;
  js: "HELLO!";
  title: "/Users/Admin/Downloads/LESS/Less.app/Contents/Resources/engines/bin/node";
}
.scope {
  var: 42;
}
.escape-interpol {
  width: hello world;
}
.arrays {
  ary: "1, 2, 3";
  ary: "1, 2, 3";
}

LESS 开发的实用工具 – LESS.app

在 LESS 开发中,大家得以用 LESS 提供的 JavaScript 脚本来在运作时分析,将
LESS 文件实时翻译成对应的 CSS 语法。如下边这一个例子:

清单 21. helloworld.html

CSS

<link rel=”stylesheet/less” type=”text/css”
href=”helloworld.less”> <script src=”less.js”
type=”text/javascript”></script> <div>Hello
World!</div>

1
2
3
4
<link rel="stylesheet/less" type="text/css" href="helloworld.less">
<script src="less.js" type="text/javascript"></script>
 
<div>Hello World!</div>

 

从上面的演示能够观看,在 helloworld.less 引入之后我们还添加了一个
JavaScript 文件,这几个文件就是 LESS 的解释器,可以在 LESS
的官方网站上下载此文件。需求小心的是,要留意 LESS 文件和 LESS
解释器的引入顺序,确保所有的 LESS 文件都在 LESS 解释器以前。

总的来看那里恐怕有人会说,实时分析的话方便倒是便宜,能够性能上不就有消耗了么?比起一般性
CSS 来说多了一道解释的步骤。或许还有的人对写好的 LESS
文件不太放心,希望能见到解析之后的 CSS
文件来检查下是不是是自个儿愿意的内容。那多个难点实际上都是可以化解的,LESS
提供了服务端的方案,使用 npm 安装 LESS 之后就可以将你有所的 LESS
文件批量转化成 CSS 文件,然后你得到 CSS
文件就可以无限制了,检查生成的内容是或不是有误,也得以直接在 HTML
中引用,再也不用添加 LESS 的 JavaScript
文件来分析它了。关于那部分的详细安装音信,可以一直参考 LESS
官网上的牵线,这里就不复述了。
不过,对于 Mac 用户来说还有一个更方便的工具得以动用,它就是 less.app.
那是一个第三方提供的工具,使用起来相当利于,我们得以在下图所示的界面上添加
LESS 文件所在的目录,此工具就会在右手列出目录中蕴藏的持有 LESS
文件。最酷的是,从此您就不用再想不开牵挂着要把 LESS 文件编译成 CSS
文件了,这么些工具会在你每一遍修改完保存 LESS 文件时本身实施编译,自动生成
CSS 文件。那样,您就可以随时查阅 LESS 代码的末梢效果,检核查象 CSS
是或不是切合您的内需了,实在是太有利了!

图 2. 导入 LESS
文件夹的界面,右边可添加存放在多少个差距途径的文书夹。

亚洲必赢官网 2

图 3. 编译结果界面,在此可手动批量编译所有 LESS 文件。
亚洲必赢官网 3

更值为嘉许的是,LESS.app 依然个免费软件,接受捐赠:)

 

总结

经过地点的粗略介绍,希望大家探听到了 LESS 的重要功用,相信 LESS
会让前端攻城师的干活越是自在,尤其灵活。越来越多的细节可以参照 LESS
官方网站。

赞 3 收藏
评论

亚洲必赢官网 4

先河认识 LESS,我要起来学习LESS啦!,我要less

LESS 是一个风靡的体制表语言,它提供了 CSS3
也尚未已毕的有余功力,让您编写 CSS 越发有益,尤其直观。LESS
已经被普遍利用在种种框架中 ( 例如:BootStrap)。本文将介绍 LESS
爆发的背景、优势、演变与 CSS
之间的转向,及其典型的利用场景,并将其与其他样式表语言进行相比较。相信前端开发工程师会喜欢
LESS,灵活运用 LESS 以增加支付成效。

 

注释

less 是依照CSS的一种 扩充技术
.less 通过解析器 (比如koala)转换文件格式为CSS
@+变量名+值
语法
变量
LESS
允许开发者自定义变量,变量能够在大局样式中采纳,变量使得样式修改起来特别简便易行。
俺们可以从上面的代码领会变量的接纳及成效:
清单 3 LESS 文件
@border-color : #b5bcc7;

LESS 背景介绍

LESS 提供了五种格局能平滑的将写好的代码转化成标准 CSS
代码,在重重风靡的框架和工具盒中已经能平常见到 LESS 的人影了(例如
Twitter 提供的 bootstrap 库就采取了 LESS)。那么,LESS
是从何而来呢?它和 SASS 等体制表语言又有何不同吧?

缓存式注释/*诠释内容*/ 
非缓存式注释//注释内容

.mythemes tableBorder{
border : 1px solid @border-color;
}
透过编译生成的 CSS 文件如下:
清单 4. CSS 文件
.mythemes tableBorder {
border: 1px solid #b5bcc7;
}
从地方的代码中大家能够见见,变量是
VALUE(值)级其他复用,可以将一如既往的值定义成变量统一保管起来。
该性情适用于概念宗旨,我们得以将背景颜色、字体颜色、边框属性等正规样式举办统一定义,那样差距的大旨只要求定义不一致的变量文件就可以了。当然该特性也同样适用于
CSS RESET(重置样式表),在 Web
开发中,我们一再须要遮掩浏览器暗中认同的体裁行为而必要重新定义样式表来覆盖浏览器的暗中认可行为,那里可以动用
LESS
的变量性格,那样就足以在不一样的门类间重用样式表,咱们仅必要在差其余品种样式表中,依照须要再也给变量赋值即可。
LESS
中的变量和其余编程语言一样,能够已毕值的复用,同样它也有生命周期,也等于Scope(变量范围,开发人士惯称之为作用域),简单来讲就是有的变量照旧全局变量的定义,查找变量的一一是先在局部定义中找,若是找不到,则查找上级定义,直至全局。上面大家因此一个简易的事例来解释
Scope。
清单 5. LESS 文件
@width : 20px;
#homeDiv {
@width : 30px;
#centerDiv{
width : @width;// 此处应该取近年来定义的变量 width 的值 30px
}
}
#leftDiv {
width : @width; // 此处应该取最上面定义的变量 width 的值 20px

 

 

}
透过编译生成的 CSS 文件如下:
清单 6. CSS 文件
#homeDiv #centerDiv {
width: 30px;
}
#leftDiv {
width: 20px;
}
Mixins(混入)
Mixins(混入)成效对用开发者来说并不目生,很多动态语言都辅助Mixins(混入)本性,它是密密麻麻继承的一种达成,在 LESS 中,混入是指在一个
CLASS 中引入此外一个早已定义的 CLASS,似乎在时下 CLASS
中追加一个属性一样。
大家先简单看一下 Mixins 在 LESS 中的使用:
清单 7. LESS 文件
// 定义一个体制选用器
.roundedCorners(@radius:5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
// 在其它的样式拔取器中使用
#header {
.roundedCorners;
}
#footer {
.roundedCorners(10px);
}
经过编译生成的 CSS 文件如下:
清单 8. CSS 文件
#header {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#footer {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
从地点的代码大家得以看来:Mixins
其实是一种嵌套,它同意将一个类嵌入到其它一个类中选拔,被平放的类也得以称之为变量,一言以蔽之,Mixins
其实是平整级其他复用。
Mixins 还有一种形式叫做 Parametric Mixins(混入参数),LESS
也接济这一风味:
清单 9. LESS 文件
// 定义一个体裁选拔器
.borderRadius(@radius){
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
// 使用已定义的体制选取器
#header {
.borderRadius(10px); // 把 10px 用作参数传递给样式选取器
}
.btn {
.borderRadius(3px);// // 把 3px 作为参数传递给样式选拔器

图 1.LESS 的官网介绍

亚洲必赢官网 5

根 据维基百科上的介绍,其实 LESS 是 亚历克西斯 Sellier 受 SASS
的熏陶成立的开源项目。当时 SASS 采取了缩进作为分隔符来区分代码块,而不是
CSS 中广为使用的括号。为了让 CSS 现有用户使用起来特别方便,亚历克西斯 开发了
LESS 并提供了看似的功力。在一从头,LESS 的解释器也同等是由 Ruby
编写,后来才转而利用了 JavaScript. LESS
代码既能够运作在客户端,也足以运行在劳务器端。在客户端只要把 LESS
代码和呼应的 JavaScript 解释器在同一页面引用即可;而在服务器端,LESS
可以运作在 Node.js 上,也足以运作在 Rhino 那样的 JavaScript 引擎上。

 

说一点题外话,其实以后的 SASS
已经有了两套语法规则:一个照样是用缩进作为分隔符来区分代码块的;另一套规则和
CSS 一样选用了大括弧作为风格符。后一种语法规则又名 SCSS,在 SASS 3
之后的本子都协理那种语法规则。SCSS 和 LESS
已经特别像了,它俩之间更详细的相比较可以参考 此链接。

变量

}
经过编译生成的 CSS 文件如下:
清单 10. CSS 文件
#header {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.btn {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
我们仍可以给 Mixins 的参数定义一人暗中认可值,如
清单 11. LESS 文件
.borderRadius(@radius:5px){
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
.btn {
.borderRadius;
}
因此编译生成的 CSS 文件如下:
清单 12. CSS 文件
.btn {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
像 JavaScript 中 arguments一样,Mixins
也有如此一个变量:@arguments。@arguments 在 Mixins
中具是一个很特其他参数,当 Mixins
引用那么些参数时,该参数表示所有的变量,很多动静下,那些参数可以省去你多多代码。
清单 13. LESS 文件
.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
box-shadow: @arguments;
}
#header {
.boxShadow(2px,2px,3px,#f36);
}
通过编译生成的 CSS 文件如下:
清单 14. CSS 文件
#header {
-moz-box-shadow: 2px 2px 3px #FF36;
-webkit-box-shadow: 2px 2px 3px #FF36;
box-shadow: 2px 2px 3px #FF36;
}
Mixins 是 LESS
中很重大的特征之一,那里也写了多如牛毛例证,看到那几个事例你是否会有那样的难点:当大家所有了大气拔取器的时候,尤其是团伙共同开发时,怎样保管采取器之间重名难题?借使你是
java 程序员或 C++ 程序员,我猜你势必会想到命名空间 Namespaces,LESS
也应用了命名空间的办法来防止重名难题,于是乎 LESS 在 mixins
的功底上增加了一下,看上边那样一段代码:
清单 15. LESS 文件
#mynamespace {
.home {…}
.user {…}
}
如此那般我们就定义了一个名为 mynamespace 的命名空间,如若我们要复用 user
那些选用器的时候,大家只要求在须求混入这么些接纳器的地点如此使用就足以了。#mynamespace
> .user。
嵌套的平整
在我们书写标准 CSS
的时候,蒙受多层的成分嵌套这种情况时,我们依旧采用从外到内的选用器嵌套定义,要么使用给一定成分加
CLASS 或 ID 的办法。在 LESS 中大家可以那样写:
清单 16. HTML 片段
<div id=”home”>
<div id=”top”>top</div>
<div id=”center”>
<div id=”left”>left</div>
<div id=”right”>right</div>
</div>
</div>
亚洲必赢官网 ,清单 17. LESS 文件
#home{
color : blue;
width : 600px;
height : 500px;
border:outset;
#top{
border:outset;
width : 90%;
}
#center{
border:outset;
height : 300px;
width : 90%;
#left{
border:outset;
float : left;
width : 40%;
}
#right{
border:outset;
float : left;
width : 40%;
}
}
}
由此编译生成的 CSS 文件如下:
清单 18. CSS 文件
#home {
color: blue;
width: 600px;
height: 500px;
border: outset;
}
#home #top {
border: outset;
width: 90%;
}
#home #center {
border: outset;
height: 300px;
width: 90%;
}
#home #center #left {
border: outset;
float: left;
width: 40%;
}
#home #center #right {
border: outset;
float: left;
width: 40%;
}
从地点的代码中我们可以看看,LESS 的嵌套规则的写法是 HTML 中的 DOM
结构相呼应的,那样使大家的样式表书写越发从简和更好的可读性。同时,嵌套规则使得对伪成分的操作更是便利。
清单 19. LESS 文件
a {
color: red;
text-decoration: none;
&:hover {// 有 & 时解析的是同一个成分或此因素的伪类,没有 &
解析是儿孙成分
color: black;
text-decoration: underline;
}
}
通过编译生成的 CSS 文件如下:
清单 20. CSS 文件
a {
color: red;
text-decoration: none;
}
a:hover {
color: black;
text-decoration: underline;
}
运算及函数
在大家的 CSS 中浸透着大批量的数值型的 value,比如 color、padding、margin
等,这么些数值之间在少数意况下是独具一定关系的,那么大家什么样使用 LESS
来社团大家这几个数值之间的涉嫌啊?我们来看那段代码:
清单 21 . LESS 文件
@init: #111111;
@transition: @init*2;
.switchColor {
color: @transition;
}
透过编译生成的 CSS 文件如下:
清单 22. CSS 文件
.switchColor {
color: #222222;
}
地点的事例中选取 LESS 的 operation 是 个性,其实简单来说,就是对数值型的
value(数字、颜色、变量等)进行加减乘除四则运算。同时 LESS
还有一个特别针对 color 的操作提供一组函数。上边是 LESS
提供的针对颜色操作的函数列表:
lighten(@color, 10%); // return a color which is 10% *lighter* than
@color
darken(@color, 10%); // return a color which is 10% *darker* than
@color
saturate(@color, 10%); // return a color 10% *more* saturated than
@color
desaturate(@color, 10%);// return a color 10% *less* saturated than
@color
fadein(@color, 10%); // return a color 10% *less* transparent than
@color
fadeout(@color, 10%); // return a color 10% *more* transparent than
@color
spin(@color, 10); // return a color with a 10 degree larger in hue than
@color
spin(@color, -10); // return a color with a 10 degree smaller hue than
@color
PS: 上述代码引自 LESS CSS 官方网站,详情请见

动用这么些函数和 JavaScript 中选取函数一样。
清单 23 LESS 文件
init: #f04615;
#body {
background-color: fadein(@init, 10%);
}
经过编译生成的 CSS 文件如下:
清单 24. CSS 文件
#body {
background-color: #f04615;
}
从上边的例子大家可以窥见,那组函数像极了 JavaScript
中的函数,它可以被调用和传递参数。那个函数的重点功用是提供颜色变换的功用,先把颜色转换成
HSL 色,然后在此基础上展开操作,LESS
还提供了收获颜色值的法子,在此处就不举例表达了。
LESS
提供的运算及函数天性适用于贯彻页面组件天性,比如组件切换时的渐入渐出。
Comments(注释)
恰当的注释是保障代码可读性的必备手段,LESS
对注释也提供了支撑,首要有三种艺术:单行注释和多行注释,那与 JavaScript
中的注释方法一致,大家那里不做详细的表明,只强调一点:LESS 中单行注释
(// 单行注释 ) 是无法突显在编译后的 CSS
中,所以只要您的笺注是针对性样式表达的请使用多行注释。
LESS VS SASS
同类框架还有 SASS 与 LESS 比较,两者都属于 CSS
预处理器,效用上晋中小异,都以选拔类似程序式语言的章程书写 CSS,
都享有变量、混入、嵌套、继承等性格,最后目标都是便民 CSS
的书写及维护。
LESS 和 SASS 相互促进相互影响,比较之下 LESS 更接近 CSS 语法

 

@nice-blue: #5B83AD;

LESS 高级性子

自个儿 们知道 LESS
拥有四大特色:变量、混入、嵌套、函数。这个特征在其他小说中曾经有所介绍,那里就不复述了。其实,LESS
还具有一些很有意思的特征有助于大家的支付,例如格局匹配、条件表明式、命名空间和作用域,以及
JavaScript 赋值等等。让大家来挨家挨户看看这一个特征吧。

@light-blue: @nice-blue + #111;

 

#header { color: @light-blue; }

情势匹配:

深信不疑我们对 LESS 四大特色中的混入 (mixin)
依旧回想深远吧,您用它可以定义一堆属性,然后轻松的在八个样式集中收录。甚至在概念混入时参与参数使得那些属性依据调用的参数不一样而变化差其余品质。那
么,让大家更进一步,来打探一下 LESS
对混入的更高级支持:情势匹配和条件表明式。

先是,让大家来回看一下无独有偶的带参数的混入格局:

 

 

混合

清单 1. 带参数(及参数缺省值)的混入

 

Html代码  亚洲必赢官网 6

  1. .border-radius (@radius: 3px) {   
  2.  border-radius: @radius;   
  3.  -moz-border-radius: @radius;   
  4.  -webkit-border-radius: @radius;   
  5. }   
  6. .button {   
  7.  .border-radius(6px);   
  8. }   
  9. .button2 {   
  10.  .border-radius();   
  11. }  

 

1.混合类:

.bordered {

border-top: dotted 1px black;

border-bottom: solid 2px black;

}

#menu a {

color: #111;

.bordered;

 
2.混合带参数:

.border-radius (@radius) {

border-radius: @radius;

-moz-border-radius: @radius;

-webkit-border-radius: @radius;

}}

 

#header {

.border-radius(4px);

}

俺们还足以像这么给参数设置默许值:

.border-radius (@radius: 5px) {

border-radius: @radius;

-moz-border-radius: @radius;

-webkit-border-radius: @radius;

}

#header {

.border-radius;

}

 

形式匹配

LESS 提供了经过参数值控制 mixin 行为的效应,让大家先从最简易的事例发轫:

.mixin (@s, @color) { … }

.class {

.mixin(@switch, #888);

}

即便要依照 @switch 的值控制 .mixin 行为,只需根据上面的艺术定义 .mixin:

 

.mixin (dark, @color) {

color: darken(@color, 10%);

}

.mixin (light, @color) {

color: lighten(@color, 10%);

}

.mixin (@_, @color) {

display: block;

}

下一场调用:

@switch: light;

 

.class {

.mixin(@switch, #888);

}

将会赢得以下 CSS:

 

.class {

color: #a2a2a2;

display: block;

}

传给 .mixin 的水彩将举办 lighten 函数,假若 @switch 的值是
dark,那么则会举办 darken 函数输出颜色。

 

运算:

@test:800px;

body{

width:@test – 200; //运算会自动同步单位

}

 

嵌套规则

LESS 可以让咱们以嵌套的法子编写层叠样式

#header {

color: black;

 

.navigation {

font-size: 12px;

}

.logo {

width: 300px;

&:hover { text-decoration: none }

}

}

小心 & 符号的施用 — 假设你想写串联选用器,而不是写后代接纳器,就足以用到
& 了。这一点对伪类特别有用如 :hover 和 :focus。

例如:

.bordered {

&.float {

float: left;

}

.top {

margin: 5px;

}

}

会输出:

 

.bordered.float {

float: left;

}

.bordered .top {

margin: 5px;

}

 

@arguments 变量

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {

box-shadow: @arguments;

-moz-box-shadow: @arguments;

-webkit-box-shadow: @arguments;

}

.box-shadow(2px, 5px);

将会输出:

box-shadow: 2px 5px 1px #000;

-moz-box-shadow: 2px 5px 1px #000;

-webkit-box-shadow: 2px 5px 1px #000;

 

防止编译

~"``样式" 可用单引号或双引号

有时候大家须求输出一些不科学的 CSS 语法可能选用一些 LESS
不认得的专有语法。

 

要出口那样的值大家得以在字符串前增进一个 ~,例如:

.class {

filter: ~”ms:alwaysHasItsOwnSyntax.For.Stuff()”;

}

那叫作“防止编译”,输出结果为:

 

.class {

filter: ms:alwaysHasItsOwnSyntax.For.Stuff();

}

 

作用域

LESS
中的作用域跟任何编程语言分外相近,首先会从本地查找变量可能夹杂模块,尽管没找到的话会去父级效用域中找寻,直到找到截止。

@var: red;

#page {

@var: white;

#header {

color: @var; // white

}

}

#footer {

color: @var; // red

}

 

!important关键字

 

调用时在混合前边加上!important关键字表示将交织带来的富有属性标记为!important:

 

.mixin (@a: 0) {

border: @a;

boxer: @a;

}

.unimportant {

.mixin(1);

}

.important {

.mixin(2) !important;

}

编译成:

 

.unimportant {

border: 1;

boxer: 1;

}

.important {

border: 2 !important;

boxer: 2 !important;

}

清单 2. 混入生成的 CSS 代码

 

Html代码  亚洲必赢官网 7

  1. .button {   
  2.  border-radius: 6px;   
  3.  -moz-border-radius: 6px;   
  4.  -webkit-border-radius: 6px;   
  5. }   
  6. .button2 {   
  7.  border-radius: 3px;   
  8.  -moz-border-radius: 3px;   
  9.  -webkit-border-radius: 3px;   
  10. }  

 

 

从上边那几个事例可以看来,在混入大家得以定义参数,同时也可以为那个参数指定一个缺省值。那样我们在调用这些混入时一旦指定了参数 .border-radius(6px),LESS
就会用 6px来替换,如果不指定参数来调用.border-radius(),LESS
就会用缺省的 3px来替换。将来,我们更近一步,不仅仅通过参数值来改变最终结出,而是经过传播不相同的参数个数来合营差其他混入。

 
清单 3. 利用不一致的参数个数来协作分歧的混入

 

Html代码  亚洲必赢官网 8

  1. .mixin (@a) {   
  2.  color: @a;   
  3.  width: 10px;   
  4. }   
  5. .mixin (@a, @b) {   
  6.  color: fade(@a, @b);   
  7. }   
  8.   
  9. .header{   
  10.    .mixin(red);   
  11. }   
  12. .footer{   
  13.    .mixin(blue, 50%);   
  14. }  

 

 
清单 4. 不等参数个数调用后变化的 CSS 代码

 

Html代码  亚洲必赢官网 9

  1. .header {   
  2.  color: #ff0000;   
  3.  width: 10px;   
  4. }   
  5. .footer {   
  6.  color: rgba(0, 0, 255, 0.5);   
  7. }  

 

 

本条例子有些像 Java 语言中的方法调用有些近乎,LESS
可以按照调用参数的个数来抉择正确的混入来带走。将来,大家了然到通过传播参数的值,以及传入差别的参数个数可以挑选不一致的混入及变更它的末梢代码。那多少个例子的方式匹配都以卓殊不难通晓的,让大家换个思路,上边的事例中参数都以由变量构成的,其实在
LESS
中定义参数是足以用常量的!格局匹配时极度的点子也会发出相应的扭转,让我们看个实例。

 
清单 5. 用常量参数来控制混入的形式匹配

 

Html代码  亚洲必赢官网 10

  1. .mixin (dark, @color) {   
  2.  color: darken(@color, 10%);   
  3. }   
  4. .mixin (light, @color) {   
  5.  color: lighten(@color, 10%);   
  6. }   
  7. .mixin (@zzz, @color) {   
  8.  display: block;   
  9.  weight: @zzz;   
  10. }   
  11.   
  12. .header{   
  13.    .mixin(dark, red);   
  14. }   
  15. .footer{   
  16.    .mixin(light, blue);   
  17. }   
  18. .body{   
  19.    .mixin(none, blue);   
  20. }  

 

 
清单 6. 常量参数生成的 CSS 代码

 

Html代码  亚洲必赢官网 11

  1. .header {   
  2.  color: #cc0000;   
  3.  display: block;   
  4.  weight: dark;   
  5. }   
  6. .footer {   
  7.  color: #3333ff;   
  8.  display: block;   
  9.  weight: light;   
  10. }   
  11. .body {   
  12.  display: block;   
  13.  weight: none;   
  14. }  

 

 

经过那些例子大家得以看到,当大家定义的是变量参数时,因为 LESS
中对变量并不曾项目标概念,所以它只会基于参数的个数来选取相应的混入来替换。而定义常量参数就差异了,那时候不仅参数的个数要对应的上,而且常量参数的
值和调用时的值也要一律才会同盟的上。值得注意的是我们在 body
中的调用,它调用时指定的第二个参数 none
并无法匹配上前八个混入,而第多个混入 .mixin (@zzz, @color)就不相同了,由于它的多少个参数都以变量,所以它接受其余值,由此它对多个调用都能同盟成功,由此大家在最后的
CSS 代码中来看每回调用的结果中都涵盖了首个混入的性质。

 

最后,大家把清单 1
中的代码做略微改动,扩张一个无参的混入和一个常量参数的混入,您猜猜看最后的极度结果会发出什么样变化么?

 
清单 7. 无参和常量参数的形式匹配

 

Html代码  亚洲必赢官网 12

  1. .border-radius (@radius: 3px) {   
  2.  border-radius: @radius;   
  3.  -moz-border-radius: @radius;   
  4.  -webkit-border-radius: @radius;   
  5. }   
  6.   
  7. .border-radius (7px) {   
  8.  border-radius: 7px;   
  9.  -moz-border-radius: 7px;   
  10. }   
  11. .border-radius () {   
  12.  border-radius: 4px;   
  13.  -moz-border-radius: 4px;   
  14.  -webkit-border-radius: 4px;   
  15. }   
  16.   
  17. .button {   
  18.  .border-radius(6px);   
  19. }   
  20. .button2 {   
  21.  .border-radius(7px);   
  22. }   
  23. .button3{   
  24. .border-radius();        
  25. }  

 

 

下边的结果或者会超越您的意料,无参的混入是力所能及包容任何调用,而常量参数非凡严苛,必须保障参数的值(7px)和调用的值 (7px)同等才会合作。

 
清单 8. 进入了无参混入后生成的 CSS 代码

 

Html代码  亚洲必赢官网 13

  1. .button {   
  2.  border-radius: 6px;   
  3.  -moz-border-radius: 6px;   
  4.  -webkit-border-radius: 6px;   
  5.  border-radius: 4px;   
  6.  -moz-border-radius: 4px;   
  7.  -webkit-border-radius: 4px;   
  8. }   
  9. .button2 {   
  10.  border-radius: 7px;   
  11.  -moz-border-radius: 7px;   
  12.  -webkit-border-radius: 7px;   
  13.  border-radius: 7px;   
  14.  -moz-border-radius: 7px;   
  15.  border-radius: 4px;   
  16.  -moz-border-radius: 4px;   
  17.  -webkit-border-radius: 4px;   
  18. }   
  19. .button3 {   
  20.  border-radius: 3px;   
  21.  -moz-border-radius: 3px;   
  22.  -webkit-border-radius: 3px;   
  23.  border-radius: 4px;   
  24.  -moz-border-radius: 4px;   
  25.  -webkit-border-radius: 4px;   
  26. }  

 

 

条件表达式

有了方式匹配之后是便宜了很多,我们能根据区其他须要来同盟区其余混入,但更进一步的就是采纳标准表明式来尤其精确,越发严谨的来限制混入的匹配,落成的措施就是利用了 when本条重点词。

 
清单 9. 用到标准表达式来支配格局匹配

 

Html代码  亚洲必赢官网 14

  1. .mixin (@a) when (@a >= 10) {   
  2.  black;   
  3. }   
  4. .mixin (@a) when (@a < 10) {   
  5.  white;   
  6. }   
  7. .class1 { .mixin(12) }   
  8. .class2 { .mixin(6) }  

 

 
清单 10. 尺码表达式生成的 CSS 代码

 

Html代码  亚洲必赢官网 15

  1. .class1 {   
  2.  black;   
  3. }   
  4. .class2 {   
  5.  white;   
  6. }  

 

 

选用 When 以及 <, >, =, <=, >= 是至极简便和便民的。LESS
并不曾停留在那里,而且提供了许多品类检查函数来援救标准表明式,例如 iscolorisnumberisstringiskeywordisurl等等。

 
清单 11. 尺度表明式中协理的门类检查函数

 

Html代码  亚洲必赢官网 16

  1. .mixin (@a) when (iscolor(@a)) {   
  2.  black;   
  3. }   
  4. .mixin (@a) when (isnumber(@a)) {   
  5.  white;   
  6. }   
  7. .class1 { .mixin(red) }   
  8. .class2 { .mixin(6) }  

 

 
清单 12. 序列检查匹配后转移的 CSS 代码

 

Html代码  亚洲必赢官网 17

  1. .class1 {   
  2.  black;   
  3. }   
  4. .class2 {   
  5.  white;   
  6. }  

 

 

除此以外,LESS 的尺度表明式同样支撑 AND 和 OR 以及 NOT
来整合条件表明式,那样可以团体成更为强劲的准绳表明式。必要专门指出的一些是,OR
在 LESS 中并不是用 or 关键字,而是用 , 来代表 or 的逻辑关系。

 
清单 13. AND,OR,NOT 条件表明式

 

Html代码  亚洲必赢官网 18

  1. .smaller (@a, @b) when (@a > @b) {   
  2.    black;   
  3. }   
  4. .math (@a) when (@a > 10) and (@a < 20) {   
  5.    red;   
  6. }   
  7. .math (@a) when (@a < 10),(@a > 20) {   
  8.    blue;   
  9. }   
  10. .math (@a) when not (@a = 10)  {   
  11.    yellow;   
  12. }   
  13. .math (@a) when (@a = 10)  {   
  14.    green;   
  15. }   
  16.   
  17. .testSmall {.smaller(30, 10) }   
  18. .testMath1 {.math(15)}   
  19. .testMath2 {.math(7)}   
  20. .testMath3 {.math(10)}  

 

 
清单 14. AND,OR,NOT 条件表明式生成的 CSS 代码

 

Html代码  亚洲必赢官网 19

  1. .testSmall {   
  2.  black;   
  3. }   
  4. .testMath1 {   
  5.  red;   
  6.  yellow;   
  7. }   
  8. .testMath2 {   
  9.  blue;   
  10.  yellow;   
  11. }   
  12. .testMath3 {   
  13.  green;   
  14. }  

 

 

命名空间和成效域

LESS 所推动的变量,混入那一个特征其实很大程度上避免了价值观 CSS
中的大量代码重复。变量可以幸免一个属性很多次重复,混入可以幸免属性集的重复。而且选择起来越发灵活,维护起来也方便了许多,只要修改一处定义而无需修改
多处引用的地方。今后,让大家更进一步,当自身定义好了变量和混入之后,怎么能更好的操纵和行使它们啊,怎么幸免和其余地点定义的变量及混入抵触?一个不问可知的想法就是像其余语言同样引入命名空间和功能域了。首先大家来看一个
LESS 的成效域的例证。

 
清单 15. 变量的功效域

 

Html代码  亚洲必赢官网 20

  1. @var: red;   
  2. #page {   
  3.  @var: white;   
  4.  #header {   
  5.    color: @var;   
  6.  }   
  7. }   
  8. #footer {   
  9.  color: @var;   
  10. }  

 

 

在这一个事例里,可以观看 header
中的 @var会率先在脚下功用域寻找,然后再逐层往父功能域中搜寻,向来到顶层的大局意义域中停止。所以
header 的 @var在父作用域中找到之后就告一段落了探寻,最后的值为 white。而
footer
中的 @var在时下效果域没找到定义之后就摸索到了全局功用域,最后的结果就是大局成效域中的定义值
red。

 
清单 16. 变量成效域例子生成的 CSS 代码

 

Html代码  亚洲必赢官网 21

  1. #page #header {   
  2.  color: #ffffff;  // white   
  3. }   
  4. #footer {   
  5.  color: #ff0000;  // red   
  6. }  

 

 

通晓了成效域之后让大家再来看一下命名空间,大家可以用命名空间把变量和混入封装起来,避免和其余地方的定义争执,引用起来也特别惠及,只要在目前加上相应的命名空间就可以了。

 
清单 17. 命名空间的例子

Html代码  亚洲必赢官网 22

  1.  @var-color: white;   
  2.  #bundle {   
  3.   @var-color: black;   
  4.   
  5.   .button () {   
  6.     display: block;   
  7.     border: 1px solid black;   
  8.     @var-color;   
  9.   }   
  10.   .tab() { color: red }   
  11.   .citation() { color: black}   
  12.   .oops {weight: 10px}   
  13.  }   
  14.   
  15.  #header {   
  16.     color: @var-color;   
  17.     #bundle > .button;   
  18.     #bundle > .oops;  
  19. }  

 

此间可以看看,大家使用嵌套规则在 #bundle中创设了一个命名空间,在中间封装的变量以及品质集合都不会暴露到表面空间中,例如 .tab(), .citation()都尚未暴光在结尾的
CSS 代码中。而值得注意的少数是 .oops 却被爆出在了最后的 CSS
代码中,那种结果可能并不是大家想要的。其实同样的例子我们得以在混入的例证中也足以发现,即无参的混入 .tab()是和平常的本性集 .oops不一样的。无参的混入是不会揭示在结尾的
CSS
代码中,而常见的性情集则会未来出去。大家在概念命名空间和混入时要小心处理这样的异样,避免带来潜在的标题。

 
清单 18. 命名空间例子生成的 CSS 代码

Html代码  亚洲必赢官网 23

  1. #bundle .oops {   
  2.  weight: 10px;   
  3. }   
  4. #header {   
  5.  color: #ffffff;   
  6.  display: block;   
  7.  border: 1px solid black;   
  8.  #000000;   
  9.  weight: 10px;   
  10. }  

 

JavaScript 赋值 (JavaScript Evaluation)

如 果能在 CSS 中利用一些 JavaScript 方法确实是那多少个令人高兴的,而 LESS
真正逐步进入那项功用,近来一度能动用字符串及数字的常用函数了,想要在
LESS 中动用 JavaScript
赋值只必要用反引号(`)来含有所要进行的操作即可。让大家看看实例吧。

 
清单 19. JavaScript 赋值的事例

Html代码  亚洲必赢官网 24

  1. .eval {   
  2.     js: `1 + 1`;   
  3.     js: `(1 + 1 == 2 ? true : false)`;   
  4.     js: `”hello”.toUpperCase() + ‘!’`;   
  5.     title: `process.title`;   
  6.  }   
  7.  .scope {   
  8.     @foo: 42;   
  9.     var: `this.foo.toJS()`;   
  10.  }   
  11.  .escape-interpol {   
  12.     @world: “world”;   
  13.     width: ~`”hello” + ” ” + @{world}`;   
  14.  }   
  15.  .arrays {   
  16.     @ary:  1, 2, 3;   
  17.     @ary2: 1  2  3;   
  18.     ary: `@{ary}.join(‘, ‘)`;   
  19.     ary: `@{ary2}.join(‘, ‘)`;   
  20.  }  

 

俺们可以看来,在 eval 中大家得以用 JavaScript
做数字运算,布尔表明式;对字符串做大小写转化,串联字符串等操作。甚至最终可以取得到JavaScript 的运作环境(process.title)。同样可以见见 LESS
的功用域和变量也同样在 JavaScript 赋值中运用。而最后的例证中,大家看看
JavaScript 赋值同样使用于数组操作当中。其实 LESS 的 JavaScript
赋值还有支撑任何一些办法,可是当下尚未发表出来。

 
清单 20. JavaScript 赋值生成的 CSS 代码

Html代码  亚洲必赢官网 25

  1. .eval {   
  2.  js: 2;   
  3.  js: true;   
  4.  js: “HELLO!”;   
  5.  title: “/Users/Admin/Downloads/LESS/Less.app/Contents/Resources/engines/bin/node”;   
  6. }   
  7. .scope {   
  8.  var: 42;   
  9. }   
  10. .escape-interpol {   
  11.  width: hello world;   
  12. }   
  13. .arrays {   
  14.  ary: “1, 2, 3”;   
  15.  ary: “1, 2, 3”;   
  16. }  

 

LESS 开发的实用工具 – LESS.app

在 LESS 开发中,大家得以用 LESS 提供的 JavaScript 脚本来在运作时分析,将
LESS 文件实时翻译成对应的 CSS 语法。如上边那个例子:

 
清单 21. helloworld.html

Html代码  亚洲必赢官网 26

  1. <link rel=”stylesheet/less” type=”text/css” href=”helloworld.less”>   
  2. <script src=”less.js” type=”text/javascript”></script>   
  3.   
  4. <div class=”helloworld”>Hello World!</div>  

 

从上 面的示范可以见见,在 helloworld.less 引入之后我们还添加了一个
JavaScript 文件,那几个文件就是 LESS 的解释器,可以在 LESS
的官方网站上下载此文件。需求注意的是,要留意 LESS 文件和 LESS
解释器的引入顺序,确保所有的 LESS 文件都在 LESS 解释器此前。

 

来看那里大概有人会说,实时分析的话方便倒是便宜,可以质量上不就有消耗了么?比起一般性
CSS 来说多了一道解释的步骤。恐怕还有的人对写好的 LESS
文件不太放心,希望能来看解析之后的 CSS
文件来检查下是不是是本身愿意的始末。这七个难点其实都以可以消除的,LESS
提供了服务端的方案,使用 npm 安装 LESS 之后就可以将你抱有的 LESS
文件批量转化成 CSS 文件,然后您得到 CSS
文件就可以随便了,检查生成的情节是不是有误,也足以平素在 HTML
中引用,再也不用添加 LESS 的 JavaScript
文件来分析它了。关于这一部分的详细安装消息,可以直接参考 LESS
官网上的牵线,那里就不复述了。

 

只是,对于 Mac 用户来说还有一个更有利于的工具得以动用,它就是 less.app.
那是一个第三方提供的工具,使用起来格外便利,我们得以在下图所示的界面上添加
LESS 文件所在的目录,此工具就会在左侧列出目录中蕴藏的具有 LESS
文件。最酷的是,从此您就不要再想不开想念着要把 LESS 文件编译成 CSS
文件了,那个工具会在你每一次修改完保存 LESS 文件时自身执行编译,自动生成
CSS 文件。那样,您就能够随时查阅 LESS 代码的末梢效果,检核对象 CSS
是不是吻合您的急需了,实在是太便宜了!

 
图 2. 导入 LESS 文件夹的界面,左边可添加存放在八个例外途径的文书夹。

亚洲必赢官网 27

 
图 3. 编译结果界面,在此可手动批量编译所有 LESS 文件。

亚洲必赢官网 28

更值为嘉许的是,LESS.app 依然个免费软件,接受捐赠:)

 

总结

经过地点的简练介绍,希望大家探听到了 LESS 的重点功效,相信 LESS
会让前端攻城师的行事尤其自在,越发灵敏。更加多的细节可以参考 LESS
官方网站。

 

参考资料

学习

  • “LESS CSS 框架简介”(developerWorks,2012 年 7 月):LESS
    是动态的体裁表语言,通过简洁明了的语法定义,使编写 CSS
    的行事变得分外不难。本文将通过实例,为大家介绍这一框架。
  • LESS 官方网站: 包涵官方参考文档库,示例代码等有关材料。
  • 维基百科上的 LESS 条目包蕴了 LESS
    的历史,功用介绍,与此外样式语言的对峙统一等材料。
  • LESS.app 官方网站LESS.app 的官方网站,提供了 LESS.app
    的下载,录制介绍,相关难题回复等资料。
  • twitter提供的 bootstrap由 推文(Tweet) 共享出的 CSS
    工具包,使开发者可以轻松的创设出良好的界面。其中不少地方都选用了
    LESS。
  • SASS官方网站包含了 SASS 和 SCSS
    的下载,帮忙文档,以及在线教程等材料。
  • developerWorks Web development 专区:通过专门关于 Web
    技术的稿子和课程,扩张您在网站开发方面的技术。
  • developerWorks Ajax 资源中央:那是关于 Ajax
    编程模型音讯的一站式宗旨,包涵不少文档、教程、论坛、blog、wiki
    和情报。任何 Ajax 的新新闻都能在此处找到。
  • developerWorks Web 2.0 资源中央,那是关于 Web 2.0
    相关音讯的一站式宗旨,包蕴大气 Web 2.0
    技术文章、教程、下载和连锁技术资源。您还足以由此 Web 2.0
    新手入门栏目,快捷掌握 Web 2.0 的连带概念。
  • 翻看 HTML5 专题,驾驭愈来愈多和 HTML5 相关的知识和趋势。

讨论

  • 参与 developerWorks
    粤语社区。查看开发人士拉动的博客、论坛、组和维基,并与其他developerWorks 用户交换。

LESS,我要从头读书LESS啦!,我要less LESS
是一个盛行的体裁表语言,它提供了 CSS3 也从未完毕的多样效应,让您编写 CSS
特别方便,…

网站地图xml地图