来自 软件资讯 2019-09-19 08:22 的文章
当前位置: 威尼斯国际官方网站 > 软件资讯 > 正文

发轫认知

起来认知 LESS

2012/09/24 · CSS · CSS

来源:申毅&邵华@IBM DevelopWorks

LESS 背景介绍

LESS 提供了两种措施能平滑的将写好的代码转化成规范 CSS 代码,在看不尽风靡的框架和工具盒中已经能时有时见到 LESS 的身影了(比如Facebook 提供的 bootstrap 库就应用了 LESS)。那么,LESS 是从何而来呢?它和 SASS 等体制表语言又有什么分歧吧?

图 1.LESS 的官方网站介绍
图片 1

依赖维基百科上的牵线,其实 LESS 是 Alexis Sellier 受 SASS 的震慑创建的开源项目。当时 SASS 采取了缩进作为分隔符来区分代码块,并不是CSS 吉林中国广播公司为使用的括号。为了让 CSS 现成客商使用起来更为便利,Alexis 开辟了 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 代码中来看每一次调用的结果中都蕴含了第八个混入的习性。

最终,大家把清单 第11中学的代码做略微改变,增添三个无参的混入和贰个常量参数的混入,您猜猜看最终的合作结果会时有暴发什么样变化么?

清单 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 和 OQashqai 以及 NOT 来整合条件表明式,那样能够团体成更为强劲的原则表明式。须要特地提议的一点是,ORubicon在 LESS 中并非用 or 关键字,而是用 , 来表示 or 的逻辑关系。

清单 13. AND,OPAJERO,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,OEscort,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 中的大批量代码重复。变量能够幸免三本性子数十回重复,混入可防止止属性集的双重。并且动用起来更为灵敏,维护起来也方便了无数,只要修改一处定义而不供给修改多处援用的地点。今后,让我们更进一竿,当自己定义好了变量和混入之后,怎么能更加好的垄断(monopoly)和选择它们啊,怎么制止和别的地方定义的变量及混入争执?多个明显的主见正是像其余语言同样引进命名空间和功能域了。首先大家来看三个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中树立了三个命名空间,在其中封装的变量以及品质集结都不会暴光到表面空间中,举个例子 .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 背景介绍

LESS 提供了多种主意能平滑的将写好的代码转化成规范 CSS 代码,在非常多流行的框架和工具盒中已经能平常来看 LESS 的人影了(举例照片墙 提供的 bootstrap 库就接纳了 LESS)。那么,LESS 是从何而来呢?它和 SASS 等体制表语言又有啥区别呢?

 
图 1.LESS 的官方网站介绍

图片 5

根 据维基百科上的介绍,其实 LESS 是 Alexis Sellier 受 SASS 的熏陶创建的开源项目。当时 SASS 选拔了缩进作为分隔符来区分代码块,并不是CSS 福建中国广播公司为使用的括号。为了让 CSS 现成顾客接纳起来特别方便,Alexis 开采了 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. 带参数(及参数缺省值)的混入

 

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

 

 
清单 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 和 O福特Explorer 以及 NOT 来构成条件表明式,那样可以团体成更为强劲的尺度表明式。要求特地提议的有些是,O索罗德在 LESS 中并非用 or 关键字,而是用 , 来代表 or 的逻辑关系。

本文由威尼斯国际官方网站发布于软件资讯,转载请注明出处:发轫认知

关键词: