Less

网站重构用到了Less。
what is this?

LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。

1 变量

@color:#826650; // 主色调 @color0:rgba(0,0,0,0.5);

.page{color:@color;background-color:@color0;}

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

#header { color: @light-blue; }

2 混合

//定义圆角
.rounded-corners (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}

#header {
    .rounded-corners;
}
#footer {
    .rounded-corners(10px);
}

3 嵌套

  p {
        font-size: 12px;
        a {
            text-decoration: none;
            &:hover {
                border-width: 1px } } }

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

@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%); }

5 引用

#bundle {
    .button () {
        display: block;
        border: 1px solid black;
        background-color: grey;
        &:hover { background-color: white }
    }
    .tab { ... }
    .citation { ... }
}


#header a {
    color: orange;
    #bundle > .button; // 看，引用了#bundle 里button的全部样式
}

6 关于注释

less有两种注释 ，// 以及 /* 注释内容*/

但是双斜线的注释，在编译成 CSS 的时候自动过滤掉。

以上是Less 的基本的用法。

我是用的一个Less 编辑器，Koala 。这是开发的LESSCSS/SASS编译工具。下载地址：http://koala-app.com/index-zh.html。

使用到其余一些语法函数,挑出一些可能会用到的

1 颜色透明

fadein(@color, 10%)

降低颜色的透明度（或增加不透明度），令其更不透明，对不透明的颜色无效。如果要增加颜色的透明度，使用 fadeout() 函数。

fadein(#ccc,90%)

2 convert 转换数字单位

第一个参数为带单位的数值，第二个参数为单位。如果两个参数的单位是兼容的，则数字的单位被转换。如果两个参数的单位不兼容，则原样返回第一个参数。

convert(9s, "ms")  // 你可以在做过渡效果的时候使用呀

3 rgb 通过十进制红色、绿色、蓝色三种值 (RGB) 创建不透明的颜色对象。

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

5 !important关键字

调用时在混合后面加上!important关键字表示将混合带来的所有属性标记为!important：

.mixin (@a: 0) {
    border: @a;
    boxer: @a;
}
.important {
    .mixin(2) !important; 
}

编译成：

.important { border: 2 !important; boxer: 2 !important; }

查看参考文档