澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

澳门新萄京官方网站初步认识,sass的新手总结

2019-10-05 作者:澳门新萄京赌场网址   |   浏览(105)

初步认识 LESS

2012/09/24 · CSS · CSS

来源:申毅&邵华@IBM DevelopWorks

LESS 背景介绍

LESS 提供了多种方式能平滑的将写好的代码转化成标准 CSS 代码,在很多流行的框架和工具盒中已经能经常看到 LESS 的身影了(例如 Twitter 提供的 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 代码中看到每次调用的结果中都包含了第三个混入的属性。

最后,我们把清单 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 的作用域的例子。

清单 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 背景介绍

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

LESS 做为 CSS 的一种形式的扩展,它并没有阉割 CSS 的功能,而是在现有的 CSS 语法上,添加了很多额外的功能,所以学习 LESS 是一件轻而易举的事情,果断学习之!

 

 

}
经过编译生成的 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 是 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 已经越来越像了,它俩之间更详细的对比可以参考 此链接。

变量

}
经过编译生成的 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;

@nice-blue: #5B83AD;

LESS 高级特性

我 们知道 LESS 拥有四大特性:变量、混入、嵌套、函数。这些特性在其他文章中已经有所介绍,这里就不复述了。其实,LESS 还拥有一些很有趣的特性有助于我们的开发,例如模式匹配、条件表达式、命名空间和作用域,以及 JavaScript 赋值等等。让我们来逐一看看这些特性吧。

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

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

 

#header { color: @light-blue; }

#header { color: @light-blue; }

模式匹配:

相信大家对 LESS 四大特性中的混入 (mixin) 依然印象深刻吧,您用它能够定义一堆属性,然后轻松的在多个样式集中重用。甚至在定义混入时加入参数使得这些属性根据调用的参数不同而生成不同的属性。那 么,让我们更进一步,来了解一下 LESS 对混入的更高级支持:模式匹配和条件表达式。

首先,让我们来回顾一下普通的带参数的混入方式:

 

输出:

 

混合

#header { color: #6c94be; }

清单 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;

}

@var: 'I am fnord.';

清单 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来替换。现在,我们更近一步,不仅仅通过参数值来更改最终结果,而是通过传入不同的参数个数来匹配不同的混入。

content: @var;

 

解析后:

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

 

content: "I am fnord.";

 

请注意 LESS 中的变量为完全的 ‘常量’ ,所以只能定义一次.

清单 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 中定义参数是可以用常量的!模式匹配时匹配的方式也会发生相应的变化,让我们看个实例。

混合

 

在 LESS 中我们可以定义一些通用的属性集为一个class,然后在另一个class中去调用这些属性. 下面有这样一个class:

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

 

.bordered {

 

border-top: dotted 1px black;

清单 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 中的代码做略微改动,增加一个无参的混入和一个常量参数的混入,您猜猜看最终的匹配结果会发生什么变化么?

border-bottom: solid 2px black;

 

}

清单 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)一致才会匹配。

那如果我们现在需要在其他class中引入那些通用的属性集,那么我们只需要在任何class中像下面这样调用就可以了:

 

#menua {

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

 

color: #111;

 

.bordered;

条件表达式

有了模式匹配之后是方便了很多,我们能根据不同的需求来匹配不同的混入,但更进一步的就是利用条件表达式来更加准确,更加严格的来限制混入的匹配,实现的方式就是利用了 when这个关键词。

}

 

.posta {

清单 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) }  

 

color: red;

 

.bordered;

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

 

Html代码  澳门新萄京官方网站 15

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

 

 

利用 When 以及 <, >, =, <=, >= 是十分简单和方便的。LESS 并没有停留在这里,而且提供了很多类型检查函数来辅助条件表达式,例如 iscolorisnumberisstringiskeywordisurl等等。

}

 

.borderedclass里面的属性样式都会在#menu a和.post a中体现出来:

清单 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) }  

 

#menua {

 

color: #111;

清单 12. 类型检查匹配后生成的 CSS 代码

 

Html代码  澳门新萄京官方网站 17

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

 

 

另外,LESS 的条件表达式同样支持 AND 和 OR 以及 NOT 来组合条件表达式,这样可以组织成更为强大的条件表达式。需要特别指出的一点是,OR 在 LESS 中并不是用 or 关键字,而是用 , 来表示 or 的逻辑关系。

border-top: dotted 1px black;

 

border-bottom: solid 2px black;

清单 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)}  

 

}

 

.posta {

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

 

color: red;

 

border-top: dotted 1px black;

命名空间和作用域

LESS 所带来的变量,混入这些特性其实很大程度上避免了传统 CSS 中的大量代码重复。变量能够避免一个属性多次重复,混入能够避免属性集的重复。而且使用起来更加灵活,维护起来也方便了许多,只要修改一处定义而无需修改 多处引用的地方。现在,让我们更进一步,当我定义好了变量和混入之后,怎么能更好的控制和运用它们呢,怎么避免和其他地方定义的变量及混入冲突?一个显而 易见的想法就是像其他语言一样引入命名空间和作用域了。首先我们来看一个 LESS 的作用域的例子。

border-bottom: solid 2px black;

 

}

清单 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。

任何 CSSclass,id或者元素属性集都可以以同样的方式引入.

 

带参数混合

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

 

Html代码  澳门新萄京官方网站 21

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

 

 

了解了作用域之后让我们再来看一下命名空间,我们可以用命名空间把变量和混入封装起来,避免和其他地方的定义冲突,引用起来也十分方便,只要在前面加上相应的命名空间就可以了。

在 LESS 中,你还可以像函数一样定义一个带参数的属性集合:

 

.border-radius (@radius) {

清单 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 代码中,而普通的属性集则会现在出来。我们在定义命名空间和混入时要小心处理这样的差别,避免带来潜在的问题。

border-radius: @radius;

 

-moz-border-radius: @radius;

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

-webkit-border-radius: @radius;

 

}

JavaScript 赋值 (JavaScript Evaluation)

如 果能在 CSS 中使用一些 JavaScript 方法无疑是十分令人兴奋的,而 LESS 真正逐步加入这项功能,目前已经能使用字符串及数字的常用函数了,想要在 LESS 中运用 JavaScript 赋值只需要用反引号(`)来包含所要进行的操作即可。让我们看看实例吧。

然后在其他class中像这样调用它:

 

#header {

清单 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 赋值还有支持其他一些方式,不过目前尚未公布出来。

.border-radius(4px);

 

}

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

.button {

 

.border-radius(6px);

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 是否符合您的需要了,实在是太方便了!

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

 

border-radius: @radius;

图 2. 导入 LESS 文件夹的界面,左侧可添加存放在多个不同路径的文件夹。

澳门新萄京官方网站 27

-moz-border-radius: @radius;

 

-webkit-border-radius: @radius;

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

澳门新萄京官方网站 28

更值为称道的是,LESS.app 还是个免费软件,接受捐赠:)

}

 

所以现在如果我们像这样调用它的话:

总结

通过上面的简单介绍,希望大家了解到了 LESS 的主要功能,相信 LESS 会让前端攻城师的工作更为轻松,更加灵活。更多的细节可以参考 LESS 官方网站。

#header {

 

.border-radius;

参考资料

}

学习

  • “LESS CSS 框架简介”(developerWorks,2012 年 7 月):LESS 是动态的样式表语言,通过简洁明了的语法定义,使编写 CSS 的工作变得非常简单。本文将通过实例,为大家介绍这一框架。
  • LESS 官方网站: 包括官方参考文档库,示例代码等相关资料。
  • 维基百科上的 LESS 条目包括了 LESS 的历史,功能介绍,与其他样式语言的对比等资料。
  • LESS.app 官方网站LESS.app 的官方网站,提供了 LESS.app 的下载,视频介绍,相关问题回答等资料。
  • twitter提供的 bootstrap由 Twitter 共享出的 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 相关的知识和动向。

radius的值就会是5px.

讨论

  • 加入 developerWorks 中文社区。查看开发人员推动的博客、论坛、组和维基,并与其他 developerWorks 用户交流。

LESS,我要开始学习LESS啦!,我要less LESS 是一个流行的样式表语言,它提供了 CSS3 也未曾实现的多种功能,让您编写 CSS 更加方便,...

你也可以定义不带参数属性集合,如果你想隐藏这个属性集合,不让它暴露到CSS中去,但是你还想在其他的属性集合中引用,你会发现这个方法非常的好用:

.wrap () {

text-wrap: wrap;

white-space: pre-wrap;

white-space: -moz-pre-wrap;

word-wrap: break-word;

}

pre { .wrap }

输出:

pre {

text-wrap: wrap;

white-space: pre-wrap;

white-space: -moz-pre-wrap;

word-wrap: break-word;

}

@arguments变量

@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;

模式匹配和导引表达式

有些情况下,我们想根据传入的参数来改变混合的默认呈现,比如下面这个例子:

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

.class {

.mixin(@switch, #888);

}

如果想让.mixin根据不同的@switch值而表现各异,如下这般设置:

.mixin (dark, @color) {

color: darken(@color, 10%);

}

.mixin (light, @color) {

color: lighten(@color, 10%);

}

.mixin (@_, @color) {

display: block;

}

澳门新萄京官方网站初步认识,sass的新手总结。现在,如果运行:

@switch: light;

.class {

.mixin(@switch, #888);

}

就会得到下列CSS:

.class {

color: #a2a2a2;

display: block;

}

如上,.mixin就会得到传入颜色的浅色。如果@switch设为dark,就会得到深色。

具体实现如下:

第一个混合定义并未被匹配,因为它只接受dark做为首参

第二个混合定义被成功匹配,因为它只接受light

第三个混合定义被成功匹配,因为它接受任意值

只有被匹配的混合才会被使用。变量可以匹配任意的传入值,而变量以外的固定值就仅仅匹配与其相等的传入值。

我们也可以匹配多个参数:

.mixin (@a) {

color: @a;

}

.mixin (@a, @b) {

color: fade(@a, @b);

}

Now if we call.mixinwith a single argument, we will get the output of the first definition, but if we call it withtwoarguments, we will get the second definition, namely@afaded to@b.

引导

当我们想根据表达式进行匹配,而非根据值和参数匹配时,导引就显得非常有用。如果你对函数式编程非常熟悉,那么你很可能已经使用过导引。

为了尽可能地保留CSS的可声明性,LESS通过导引混合而非if/else语句来实现条件判断,因为前者已在@media query特性中被定义。

以此例做为开始:

.mixin (@a) when (lightness(@a) >= 50%) {

background-color: black;

}

.mixin (@a) when (lightness(@a) < 50%) {

background-color: white;

}

.mixin (@a) {

color: @a;

}

when关键字用以定义一个导引序列(此例只有一个导引)。接下来我们运行下列代码:

.class1 { .mixin(#ddd) }

.class2 { .mixin(#555) }

就会得到:

.class1 {

background-color: black;

color: #ddd;

}

.class2 {

background-color: white;

color: #555;

}

导引中可用的全部比较运算有:> >= = =< <。此外,关键字true只表示布尔真值,下面两个混合是相同的:

.truth (@a) when (@a) { ... }

.truth (@a) when (@a = true) { ... }

除去关键字true以外的值都被视示布尔假:

.class {

.truth(40); // Will not match any of the above definitions.

}

导引序列使用逗号‘,’—分割,当且仅当所有条件都符合时,才会被视为匹配成功。

.mixin (@a) when (@a > 10), (@a < -10) { ... }

导引可以无参数,也可以对参数进行比较运算:

@media: mobile;

.mixin (@a) when (@media = mobile) { ... }

.mixin (@a) when (@media = desktop) { ... }

.max (@a, @b) when (@a > @b) { width: @a }

.max (@a, @b) when (@a < @b) { width: @b }

最后,如果想基于值的类型进行匹配,我们就可以使用is*函式:

.mixin (@a, @b: 0) when (isnumber(@b)) { ... }

.mixin (@a, @b: black) when (iscolor(@b)) { ... }

下面就是常见的检测函式:

iscolor

isnumber

isstring

iskeyword

isurl

如果你想判断一个值是纯数字,还是某个单位量,可以使用下列函式:

ispixel

ispercentage

isem

最后再补充一点,在导引序列中可以使用and关键字实现与条件:

.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }

使用not关键字实现或条件

.mixin (@b) when not (@b > 0) { ... }

嵌套规则

LESS 可以让我们以嵌套的方式编写层叠样式. 让我们先看下下面这段 CSS:

#header { color: black; }

#header.navigation {

font-size: 12px;

}

#header.logo {

width: 300px;

}

#header.logo:hover {

text-decoration: none;

}

在 LESS 中, 我们就可以这样写:

#header {

color: black;

.navigation {

font-size: 12px;

}

.logo {

width: 300px;

&:hover { text-decoration: none }

}

}

或者这样写:

#header        { color: black;

.navigation  { font-size: 12px }

.logo        { width: 300px;

&:hover    { text-decoration: none }

}

}

代码更简洁了,而且感觉跟DOM结构格式有点像.

注意&符号的使用—如果你想写串联选择器,而不是写后代选择器,就可以用到&了. 这点对伪类尤其有用如:hover和:focus.

例如:

.bordered {

&.float {

float: left;

}

.top {

margin: 5px;

}

}

会输出

.bordered.float {

float: left;

}

.bordered.top {

margin: 5px;

}

运算

任何数字、颜色或者变量都可以参与运算. 来看一组例子:

@base: 5%;

@filler: @base * 2;

@other: @base @filler;

color: #888 / 4;

background-color: @base-color #111;

height: 100% / 2 @filler;

LESS 的运算已经超出了我们的期望,它能够分辨出颜色和单位。如果像下面这样单位运算的话:

@var: 1px 5;

LESS 会输出6px.

括号也同样允许使用:

width: (@var 5) * 2;

并且可以在复合属性中进行运算:

border: (@width * 2) solid black;

Color 函数

LESS 提供了一系列的颜色运算函数. 颜色会先被转化成HSL色彩空间, 然后在通道级别操作:

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

fade(@color, 50%);        // return @color with 50% transparency

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

mix(@color1, @color2);    // return a mix of @color1 and @color2

使用起来相当简单:

@base: #f04615;

.class {

color: saturate(@base, 5%);

background-color: lighten(spin(@base, 8), 25%);

}

你还可以提取颜色信息:

hue(@color);        // returns the `hue` channel of @color

saturation(@color); // returns the `saturation` channel of @color

lightness(@color);  // returns the 'lightness' channel of @color

如果你想在一种颜色的通道上创建另一种颜色,这些函数就显得那么的好用,例如:

@new: hsl(hue(@old), 45%, 90%);

@new将会保持@old的色调, 但是具有不同的饱和度和亮度.

Math 函数

LESS提供了一组方便的数学函数,你可以使用它们处理一些数字类型的值:

round(1.67); // returns `2`

ceil(2.4);  // returns `3`

floor(2.6);  // returns `2`

如果你想将一个值转化为百分比,你可以使用percentage函数:

percentage(0.5); // returns `50%`

命名空间

有时候,你可能为了更好组织CSS或者单纯是为了更好的封装,将一些变量或者混合模块打包起来, 你可以像下面这样在#bundle中定义一些属性集之后可以重复使用:

#bundle {

.button () {

display: block;

border: 1px solid black;

background-color: grey;

&:hover { background-color: white }

}

.tab { ... }

.citation { ... }

}

你只需要在#header a中像这样引入.button:

#headera {

color: orange;

#bundle > .button;

}

作用域

LESS 中的作用域跟其他编程语言非常类似,首先会从本地查找变量或者混合模块,如果没找到的话会去父级作用域中查找,直到找到为止.

@var: red;

#page {

@var: white;

#header {

color: @var; // white

}

}

#footer {

color: @var; // red

}

注释

CSS 形式的注释在 LESS 中是依然保留的:

/* Hello, I'm a CSS-style comment */.class { color: black }

LESS 同样也支持双斜线的注释, 但是编译成 CSS 的时候自动过滤掉:

// Hi, I'm a silent comment, I won't show up in your CSS.class { color: white }

Importing

你可以在main文件中通过下面的形势引入.less文件,.less后缀可带可不带:

@import "lib.less";

@import "lib";

如果你想导入一个CSS文件而且不想LESS对它进行处理,只需要使用.css后缀就可以:

@import "lib.css";

这样LESS就会跳过它不去处理它.

字符串插值

变量可以用类似ruby和php的方式嵌入到字符串中,像@{name}这样的结构:

@base-url: "";

background-image: url("@{base-url}g.png");

避免编译

有时候我们需要输出一些不正确的CSS语法或者使用一些 LESS不认识的专有语法.

要输出这样的值我们可以在字符串前加上一个~, 例如:

.class {

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

}

我们可以将要避免编译的值用 “”包含起来,输出结果为:

.class {  filter: ms:alwaysHasItsOwnSyntax.For.Stuff();}

其他的详见less中国官网:

http://www.lesscss.net/

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:澳门新萄京官方网站初步认识,sass的新手总结

关键词: