中文网站:http://www.lesscss.net/
一种 动态 样式 语言.
LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承,运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。
客户端使用
<link rel="stylesheet/less" type="text/css" href="css/c.less" />
<script type="text/javascript" src="js/less/less.js"></script>
字符串插值
一种 动态 样式 语言.
LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承,运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。
客户端使用
<link rel="stylesheet/less" type="text/css" href="css/c.less" />
<script type="text/javascript" src="js/less/less.js"></script>
样式扩展名为.less,在less.js之前引入
基本语法:
变量声明
@color: #fff;
混合
在 LESS 中我们可以定义一些通用的属性集为一个class,然后在另一个class中去调用这些属性. 下面有这样一个class
.borders {
border: 1px solid #0f0;
}
#header {
color:@color;
.borders;
}
带参数混合
在 LESS 中,你还可以像函数一样定义一个带参数的属性集合
.borders(@width) {
border:@width solid #0f0;
}
#header {
color:@color;
.borders(5px);
}
也可以有默认值
.borders(@width: 5px) {
border:@width solid #00f;
}
#header{
.borders; //使用默认值 5px
/*或者*/
.borders(2px);
}
字符串插值
变量可以用类似ruby和php的方式嵌入到字符串中,像@{name}这样的结构
@base-url: "../images";
#header{
background:url("@{base-url}/re.gif") no-repeat;
}
嵌套规则
LESS 可以让我们以嵌套的方式编写层叠样式。添加伪类用&
#header {
color: @color;
span {color:#F00;}
&:hover {color:#00F;} /*伪类*/
}
a {
&.bold {font-weight:bold;}
}
命名空间
为了更好组织CSS或者单纯是为了更好的封装,将一些变量或者混合模块打包起来, 你可以像下面这样在#bundle中定义一些属性集之后可以重复使用
#bundle {
.button {
border:1px solid #f00;
}
}
#header {
#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 }
请关注