目前有关less,作者要从头上学LESS啦

开首认识 LESS

2012/09/24 · CSS ·
CSS

来源:申毅&邵华@IBM
DevelopWorks

LESS 背景介绍

LESS 提供了两种格局能平滑的将写好的代码转化成标准 CSS
代码,在重重风行的框架和工具盒中已经能时时看到 LESS 的人影了(例如
Twitter 提供的 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 和 OPAJERO 以及 NOT
来整合条件表明式,那样可以团体成更为强大的原则表明式。要求尤其建议的一些是,OLacrosse在 LESS 中并不是用 or 关键字,而是用 , 来代表 or 的逻辑关系。

清单 13. AND,OLX570,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,OMurano,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
中的大批量代码重复。变量可以幸免1特性质数十次重复,混入可以防止属性集的重新。而且拔取起来更为灵敏,维护起来也有利了重重,只要修改一处定义而无需修改多处引用的地点。将来,让我们更进一步,当自己定义好了变量和混入之后,怎么能更好的决定和接纳它们啊,怎么幸免和此外地点定义的变量及混入冲突?贰个显眼的想法就是像任何语言一样引入命名空间和作用域了。首先大家来看一个LESS 的功用域的例证。

清单 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中创建了3个命名空间,在里头封装的变量以及质量集合都不会暴光到表面空间中,例如 .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 引入之后我们还添加了2个JavaScript 文件,那些文件就是 LESS 的解释器,能够在 LESS
的官方网站上下载此文件。需求注意的是,要留意 LESS 文件和 LESS
解释器的引入顺序,确保全数的 LESS 文件都在 LESS 解释器之前。

看样子那里或然有人会说,实时分析的话方便倒是便宜,能够质量上不就有消耗了么?比起家常
CSS 来说多了一道解释的手续。或许还有的人对写好的 LESS
文件不太放心,希望能观察解析之后的 CSS
文件来检查下是还是不是是本身盼望的故事情节。那多个难题莫过于都以能够缓解的,LESS
提供了服务端的方案,使用 npm 安装 LESS 之后就可以将你有所的 LESS
文件批量转化成 CSS 文件,然后您得到 CSS
文件就足以随意了,检查生成的内容是不是有误,也可以一贯在 HTML
中援引,再也不用添加 LESS 的 JavaScript
文件来分析它了。关于那部分的详尽安装新闻,可以一直参考 LESS
官网上的牵线,那里就不复述了。
可是,对于 Mac 用户来说还有多个更便于的工具得以应用,它就是 less.app.
那是1个第2方提供的工具,使用起来十三分惠及,我们得以在下图所示的界面上添加
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(变量范围,开发人士惯称之为效率域),简单来讲就是部分变量依然全局变量的定义,查找变量的一一是先在有的定义中找,假如找不到,则查找上级定义,直至全局。上面大家通过1个简易的例证来分解
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;
}
#目前有关less,作者要从头上学LESS啦。footer {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
从地点的代码我们可以看到:Mixins
其实是一种嵌套,它同意将3个类嵌入到其它1个类中使用,被内置的类也得以称之为变量,简单来说,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 是 Alexis 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
也有那般3个变量:@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
中很重大的性状之1、那里也写了不可计数例子,看到那么些事例你是不是会有那般的问号:当大家拥有了多量选拔器的时候,尤其是团队联手开发时,怎样保险采用器之间重名难题?借使你是
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
还有1个专门针对 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
中的代码做略微改动,扩张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 和 O中华V 以及 NOT
来整合条件表明式,那样可以团体成更为强大的准绳表明式。需求尤其指出的一点是,OQX56在 LESS 中并不是用 or 关键字,而是用 , 来代表 or 的逻辑关系。

 
清单 13. AND,OCRUISER,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,ORAV4,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
中的大批量代码重复。变量可以避免三天性质数10回重复,混入可以避免属性集的再一次。而且使用起来更为灵敏,维护起来也有益了过多,只要修改一处定义而无需修改
多处引用的地点。未来,让大家更进一步,当本身定义好了变量和混入之后,怎么能更好的支配和应用它们啊,怎么幸免和其它地点定义的变量及混入冲突?贰个总而言之的想法就是像其余语言同样引入命名空间和效用域了。首先大家来看1个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中建立了1个命名空间,在中间封装的变量以及品质集合都不会暴光到表面空间中,例如 .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 方法确实是那2个令人欢快的,而 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 引入之后我们还添加了1个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,二〇一三 年 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地图