我要开始学习LESS啦,初步认识

作者: 前端知识  发布:2019-09-06

发端认知 LESS

2012/09/24 · CSS · CSS

来源:申毅&邵华@IBM DevelopWorks

LESS 背景介绍

LESS 提供了各类形式能平滑的将写好的代码转化成标准 CSS 代码,在比较多风行的框架和工具盒中已经能时时看到 LESS 的人影了(比如推特 提供的 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 和 OLAND 以及 NOT 来组合条件表明式,那样能够协会成更为壮大的法规表明式。供给非常提议的一些是,OEvoque在 LESS 中并不是用 or 关键字,而是用 , 来表示 or 的逻辑关系。

清单 13. AND,OLacrosse,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,OHaval,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 的功能域的事例。

清单 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 代码中见到每一次调用的结果中都满含了第多个混入的天性。

 

最终,大家把清单 第11中学的代码做略微退换,扩充二个无参的混入和多个常量参数的混入,您猜猜看最终的相称结果会时有爆发什么样变化么?

 
清单 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 和 OCR-V 以及 NOT 来组成条件表达式,那样能够团体成更为有力的法则表达式。需求挑升提出的少数是,OTiguan在 LESS 中并不是用 or 关键字,而是用 , 来代表 or 的逻辑关系。

本文由金沙澳门官网发布于前端知识,转载请注明出处:我要开始学习LESS啦,初步认识

关键词: 金沙澳门官网