Less的简单使用

在浏览器中使用LESSCSS

浏览器端使用是在使用LESS开发时最直观的一种方式。如果是在生产环境中，尤其是对性能要求比较高的场合，建议使用node或者其它第三方工具先编译成CSS再上线使用。

浏览器端使用方法：

  1. 使用link引入.less文件，注意将rel设为stylesheet/less:

    <link rel="stylesheet/less" type="text/css" href="styles.less" />

  2. 在本站下载less.js，将它引入页面的<head>元素中，像这样：

    <script src="less.js" type="text/javascript"></script>

需要注意.less文件要在脚本文件之前引入。

 

基本用法如下：

/*定义一个color变量*/
@red: #e74c3c;
#header{
    color: @red;//引用之前定义好的变量,  变量是“按需加载”（lazy loaded）的，因此不必强制在使用之前声明。所以@red在后面定义也是可以的

}
h2{
    color: @red;
}



/* 定义一个warning类 
 * 可以像函数一样向类传递参数*/
.warning (@warning:orange){
    background-color:@warning;
}

#warning{
    .warning;
}
#error{
    .warning(red);
}


/* 当然， 还可以嵌套 */
#footer{
    h2{
        color:blue;
    }
    p{
        color:grren;        
        a{
            background-color:orange;
            &:hover{
                background-color:red;                
            }
        }
    }
}


/* 函数和运算 */
@the-border: 1px;
@base-color: #111;

#header{
    color:(@base-color * 3);
    boder-left:@the-border;
    boder-right:(@the-border * 10);
    
}

#footer{
    background-color: desaturate(@red, 30%);//降低饱和度：desaturate(color, x%);
}

 

posted @ 2013-09-22 14:43  CodingMonkey  阅读(372)  评论(0)  编辑  收藏  举报