LESS学习笔记

LESS学习笔记

LESS 一种 动态 样式 语言

安装

在服务器端安装 LESS 的最简单方式就是通过 npm(node 的包管理器), 像这样:

$ npm install less

如果你想下载最新稳定版本的 LESS，可以尝试像下面这样操作:

$ npm install less@latest

特性

1.变量：变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了；

 /** less */
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header { color: @light-blue; }

/** css */
#header { color: #6c94be; }

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

2.混合:混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样;

 /** less */
.rounded-corners (@radius: 5px) {
 border-radius: @radius;
 -webkit-border-radius: @radius;
 -moz-border-radius: @radius;
}
#header {
 .rounded-corners;
}
#footer {
 .rounded-corners(10px);
}

/** css */
#header {
 border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
}
#footer {
 border-radius: 10px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
}

/** less */
.mixin (@a) when (lightness(@a) >= 50%) {
 background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
 background-color: white;
}
.mixin (@a) {
 color: @a;
}
.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }

/** css */
.class1 {
 background-color: black;
 color: #ddd;
}
.class2 {
 background-color: white;
 color: #555;
}

常见的检测函式：
iscolor
isnumber
isstring
iskeyword
isurl
如果你想判断一个值是纯数字，还是某个单位量，可以使用下列函式：
ispixel
ispercentage
isem
3.嵌套:我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰;

/** less */
#header {
 h1 {
   font-size: 26px;
   font-weight: bold;
 }
 p { font-size: 12px;
   a { text-decoration: none;
     &:hover { border-width: 1px }
   }
 }
}

/** css */
#header h1 {
 font-size: 26px;
 font-weight: bold;
}
#header p {
 font-size: 12px;
}
#header p a {
 text-decoration: none;
}
#header p a:hover {
 border-width: 1px;
}

4.函数 & 运算:运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。

 /** less */
@the-border: 1px;
@base-color: #111;
@red:        #842210;
#header {
 color: @base-color * 3;
 border-left: @the-border;
 border-right: @the-border * 2;
}
#footer { 
 color: @base-color + #003300;
 border-color: desaturate(@red, 10%);
}

/** css */
#header {
 color: #333;
 border-left: 1px;
 border-right: 2px;
}
#footer { 
 color: #114411;
 border-color: #7d2717;
}

来源：http://www.bootcss.com/p/lesscss/