LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承,运算, 函数. LESS 既可以在 客户端 上运行 (要在服务器中运行,不能再本地运行),也可以借助Node.js或者Rhino在服务端运行。
在使用less前,你要为你的HTML文件引入相应的文件
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.min.js" type="text/javascript"></script>
其中styles.less是我们自己写的样式文件。style.less的引入必须在less.min.js前面。
一、变量
变量允许我们单独定义一系列通用的样式,然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
|
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
|
二、混合(继承)
@color: #4D926F;
.common-div(@radius: 5px, @margin: 10px) {
border: 1px solid @color;
border-radius: @radius;
display: inline-block;
margin: @margin;
}
.div1 {
.common-div;
}
.div2 {
.common-div(2px);
}
|
.div1 {
border: 1px solid #4d926f;
border-radius: 5px;
display: inline-block;
margin: 10px;
}
.div2 {
border: 1px solid #4d926f;
border-radius: 2px;
display: inline-block;
margin: 10px;
}
|
三、嵌套
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
|
#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;
}
|
四、运算
less还提供了一个强大的功能——运算。运算提供了加,减,乘,除操作;我们可以做属性值和颜色的运算,这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码,如果你愿意的话可以操作属性值。
@color: #4D9261;
@border: 1px;
@div_display: inline-block;
.div1 {
display: @div_display;
border: @border * 2 solid @color + #111;
}
|
.div1 {
display: inline-block;
border: 2px, solid, #5ea372;
}
|
五、 @augmentums
@arguments包含了所有传递进来的参数. 如果你不想单独处理每一个参数的话就可以像这样写:
@div_display: inline-block;
.box-shodow (@x: 1px, @y: 2px, @blur: 1px, @color: rgb(246, 184, 195)) {
box-shadow: @arguments;
}
.div1 {
display: @div_display;
.box-shodow;
}
|
.div1 {
display: inline-block;
box-shadow: 1px 2px 1px #f6b8c3;
}
|
六、匹配模式
根据传入的参数,我们将会匹配不同的样式。如:
.mixin (dark, @color) {
color: darken(@color, 10%);
}
.mixin (light, @color) {
color: lighten(@color, 10%);
}
.mixin (@_, @color) {
display: block;
}
@switch: light;
.class {
.mixin(@switch, #888);
}
|
.class {
color: #a2a2a2;
display: block;
}
|
具体实现如下:
第一个混合定义并未被匹配,因为它只接受dark做为首参
第二个混合定义被成功匹配,因为它只接受light
第三个混合定义被成功匹配,因为它接受任意值
less还会根据参数个数进行匹配
.div-content (@display, @color: #FF0000) {
display: @display;
color: @color;
}
.div-content (@display) {
display: @display;
}
.div1 {
.div-content(inline-block);
}
|
.div1 {
display: inline-block;
}
|
七、引导
当我们想根据表达式进行匹配,而非根据值和参数匹配时,导引就显得非常有用。如果你对函数式编程非常熟悉,那么你很可能已经使用过导引。其实在我看来,引导最主要的就是if/else判断。
.max-div (@width) when (@width > 150) {
background-color: pink;
}
.max-div (@width) when (@width =< 150) {
background-color: green;
}
.div1 {
width: 100px;
.max-div(100px);
}
.div2 {
width: 200px;
.max-div(200px);
}
|
.div1 {
width: 100px;
background-color: green;
}
.div2 {
width: 200px;
background-color: pink;
}
|
when关键字用以定义一个导引序列。导引中可用的全部比较运算有: >, >=, =, =<, <。此外,只有关键字true表示布尔真值,除去关键字true以外的值都被视示布尔假。
此外,less css提供
- iscolor
- isnumber
- isstring
- iskeyword
- isurl
来判断类型。
提供
来判断单位,如
.btn-gb (@c) when(iscolor(@c)) {
color: @c;
}
.btn-gb (@c) when(isnumber(@c)) {
width: @c;
}
.div1 {
.btn-gb(#FF0000);
}
.div2 {
.btn-gb(200px);
}
|
.div1 {
color: #ff0000;
}
.div2 {
width: 200px;
}
|
八、Math 函数
LESS提供了一组方便的数学函数,你可以使用它们处理一些数字类型的值:
round(1.67); // returns `2`
ceil(2.4); // returns `3`
floor(2.6); // returns `2`
.div1 {
width: round(2.34)px;
}
.div2 {
width: ceil(3.55)px;
}
|
.div1 {
width: 2 px;
}
.div2 {
width: 4 px;
}
|
九、作用域
LESS 中的作用域跟其他编程语言非常类似,首先会从本地查找变量或者混合模块,如果没找到的话会去父级作用域中查找,直到找到为止.
@color: #FF0000;
#div-common {
@color: #00FF00;
.div-child {
color: @color;
}
}
.div-common2 {
color: @color;
}
.div1 {
#div-common > .div-child;
}
.div2 {
.div-common2;
}
|
#div-common .div-child {
color: #00ff00;
}
.div-common2 {
color: #ff0000;
}
.div1 {
color: #00ff00;
}
.div2 {
color: #ff0000;
}
|
十、Importing
我们可以通过importing关键字引入less文件或css文件。引入less文件时后缀名可带可不带。
@import "lib.less"; /* 或@import "lib"; */
@import "lib.css";
十一、字符串插值
变量可以用类似ruby和php的方式嵌入到字符串中,像@{name}这样的结构:
@base-url: "http://assets.fnord.com";
.div1 {
background-image: url("@{base-url}/images/bg.png");
}
|
.div1 {
background-image: url("http://assets.fnord.com/images/bg.png");
}
|
如果安装了node.js,那我们可以安装less将less文件解析成css文件。
1. npm install -g less
2. lessc styles.less > styles.css
3. 如果想要压缩版的css, 使用命令: lessc -x styles.less > style.css