less CSS预编译器使用方法

一、lesscss

1、官方网站：http://www.lesscss.net/article/home.html

2、crunchCSS编写工具：http://crunchapp.net/ 与lessWin配合使用

 

一、什么是Lesscss

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码。

 

二、less变量

@color: #4D926F;　　　　// 定义一个变量名为color

#header {
    color: @color;　　 // 这里输出的时候就是#4D926F
}
h2 {
    color: @color;
}

 

三、混合

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

less源码

.rounded-corners (@radius: 5px) {　　　　// 定义一个类，参数如果另一个类调用的时候不写参数刚默认为5
    -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);　　　　// 如果追加参数的值，会改变参数的值
}

　　

编译后的：

#header {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
#footer {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

　　

四、嵌套

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;
}

　　

五、运算符

　　运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。

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

　　

编译后

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

　　

二、使用GUI编译工具

koala：(Win/Mac/Linux)国人开发的LESSCSS/SASS编译工具。下载地址：http://koala-app.com/index-zh.html

 

http://less.bootcss.com/ 官方文档

浏览器使用：

1、下载LESSCSS的.js文件，例如lesscss-1.4.0.min.js。

2、在页面中引入.less文件  <link rel="stylesheet/less" href="example.less"/>需要注意rel属性的值是stylesheet/less，而不是stylesheet。

3、引入第1步下载的.js文件 <script src="lesscss-1.4.0.min.js"></script>