CSS预处理语言-less 的使用
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。
Less 可以运行在 Node 或浏览器端。
Less的编译处理
作为一门CSS预处理语言,它并不像CSS一样能直接使用,而是需要编译后使用,如何编译呢,下面分node 和浏览器端两种情况解释。
浏览器端:
浏览器端使用less,只需要做如下两步:
1.引如Less
使用link标签引入less,需要注意的是 rel="stylesheet/less"
<link rel="stylesheet/less" type="text/css" href="styles.less" />
2.引入less解析用的js文件
<script src="less.js" type="text/javascript"></script>
3.声明解析,要在引入 less.js前进行声明。
<script> less = { env: "development", async: false, fileAsync: false, poll: 1000, functions: {}, dumpLineNumbers: "comments", relativeUrls: false, rootpath: ":/a.com/" }; </script>
完事,就这么简单,但是 由于编译解析less需要消耗一定的性能,且渲染也会有延迟,所有推荐使用node或其他第三方工具进行编译后使用。
需要注意的是 js文件必须要在less文件后引入。
less.js 下载地址在这里
node端
1. 使用npm安装less
$ npm install -g less
2.编译输出
使用命令行调用less编译器进行编译
$ lessc styles.less
这会输出到stdout编写CSS。将CSS结果保存到所选择使用的文件中
$ lessc styles.less styles.css
输出后你可以使用编译的style.css 啦。
less的使用方法
1.注释
less 的注释分为两种: /* 注释内容 */ 和 // 注释内容 。
/* */ 为块注释 可以注释一行或多行,
// 为行注释,只能注释一行,而且这种注释在编译处理时会被编译掉。
2.变量
less中很方便的一个功能就是定义变量,当css多处用到同一个值的时候,如果不用变量,那么改动它需要改动100处,而使用变量的话,只需要修改变量的值便可以全局修改了,是不是很方便呢。
和PHP类似 变量都是以@开头,无论是定义还是使用,使用如下 :
// 定义变量
@cell_width:100px;
//在使用的时候就可以这样使用
.cell{
width:@cell_width;
}
3.混合
和css差别并不大,同样使用 选择器 后 带大括号 的形式,牛逼的是大括号里还可以写 选择器 +大括号 的形式,
在不考虑渲染优化的情况下可以无限套下去,但是考虑到浏览器渲染任务繁重,往往最多只套4层。
.body{
width:100%;
.section{
border:1px solid #000;
}
}
/*
解析后的效果是下面这样的
*/
.body{
width:100%;
}
.body .section{
border:1px solid #000;
}
除了套用,还可以引用:
.section{
border:1px solid #000;
}
.body{
width:100%;
.section;
} /* 解析后的效果是下面这样的 */
.body{
width:100%;
border:1px solid #000;
}
除了以上的,还能使用传参,哈哈哈
.border_radius(@radius:5px){
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
border-radius:@radius;
}
.cell{
width: 100%;
//可以不传参数,默认用5px
.border_radius(10px)
}
可以说是非常灵活了,随便套随便引。
了解了以上的这些,就可以在实战中使用Less进行项目开发啦!
(完)