less css

中文网站：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,在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 }

请关注