官方网站
Less是一门CSS预处理语言,它扩展了CSS语言,增加了变量、Mixin、函数等特性,使CSS更易维护和扩展。
Less可以运行在Node或浏览器端。也可运行在桌面客户端(考拉 )。
编译工具
- Node.js库
- 浏览器端使用
- koala(推荐)
koala是一个前端预处理器语言图形编译工具,支持Less、Sass、Compass、CoffeeScript,帮助web开发者更高效地使用它们进行开发。跨平台运行,完美兼容windows、linux、mac。
下载地址:http://koala-app.com/index-zh.html
基本语法
-
注释
- /**/,不会被编译
- //,被编译
-
变量
Less中声明变量的话,一定要用@开头,例如:“@变量名:值;”
/*声明变量*/
//main.less
@text_width:300px;
.box{
width: @text_width;
height: @text_width;
background-color: yellow;
}
//main.css
.box {
width: 300px;
height: 300px;
background-color: yellow;
}
-
混合
/*混合*/
//main.less
@text_width:300px;
.box{
width: @text_width;
height: @text_width;
background-color: yellow;
.border;
}
.border{
border: solid 5px pink;
}
//main.css
.box {
width: 300px;
height: 300px;
background-color: yellow;
border: solid 5px pink;
}
.border {
border: solid 5px pink;
}
-
混合-带参数
/*混合-带参数*/
//main.less
.border_02(@border_width){
border: solid yellow @border_width;
}
.border_mixin{
.border_02(30px;)
}
//main.css
.border_mixin {
border: solid #ffff00 30px;
}
-
混合-带默认值
/*混合-带默认值*/
//main.less
.border_03(@border_width:10px){
border: solid yellow @border_width;
}
.border_mixin_03{
.border_03();//传参使用新参数
}
//main.css
.border_mixin_03 {
border: solid #ffff00 10px;
}
-
混合-一个例子
/*混合-一个例子*/
//main.less
.border_radius(@radius:5px){
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
border-radius:@radius;
}
.radius_test{
width: 100px;
height: 100px;
background-color: green;
.border_radius();
}
//main.css
.radius_test {
width: 100px;
height: 100px;
background-color: green;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
-
匹配模式
/*匹配模式*/
//main.less
.sanjiao{
.triangle(top,100px);
}
.triangle(@_,@w:5px,@c:#ccc){//@_表示此处样式全包括在内,后三个参数必须有
width: 0;
height: 0;
overflow: hidden;//处理ie6最小高度问题
}
.triangle(top,@w:5px,@c:#ccc){
border-width: @w;
border-color: transparent transparent @c transparent; //上右下左
border-style: dashed dashed solid dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){
border-width: @w;
border-color: @c transparent transparent transparent; //上右下左
border-style: solid dashed dashed dashed;
}
//main.css
.sanjiao {
width: 0;
height: 0;
overflow: hidden;
border-width: 100px;
border-color: transparent transparent #cccccc transparent;
border-style: dashed dashed solid dashed;
}
-
运算
/*运算*/
//mian.less
@test_01:300px;
.box_02{
width: @test_01 + 20;
}
//mian.css
.box_02 {
width: 320px;
}
-
嵌套规则
& 代表上一层选择器
/*嵌套规则*/
//main.html
<ul class="list">
<li><a href="">这是一个list</a><span>2017-8-20</span></li>
</ul>
//main.less
.list{
width: 600px;
margin:30px auto;
padding: 0 10px;
list-style: none;
li{
height: 30px;
line-height: 30px;
background-color: #eee;
margin-bottom: 5px;
}
a{
float: left;
//& 代表上一层选择器
&:hover{
color: red;
}
}
span{
float: right;
}
}
//main.css
.list {
width: 600px;
margin: 30px auto;
padding: 0 10px;
list-style: none;
}
.list li {
height: 30px;
line-height: 30px;
background-color: #eee;
margin-bottom: 5px;
}
.list a {
float: left;
}
.list a:hover {
color: red;
}
.list span {
float: right;
}
-
@arguments变量
@arguments包含了所有传递进来的参数,用的不多,了解即可。
/*@arguments变量*/
//main.less
.border_arg(@w:30px,@c:red,@xx:solid){
border:@arguments;
}
.test_arguments{
.border_arg(40px);
}
//mian.css
.test_arguments {
border: 40px #ff0000 solid;
}
-
避免编译
有时候我们需要输出不正确的CSS语法,或者使用一些LESS不认识的专有语法,我们可以在字符串前加“~”,例如:width:~'calc(100%-35)';
/*避免编译*/
//main.less
.test_03{
width:~'calc(100%-35)'; //不加~效果:width: calc(65%);
}
//main.css
.test_03 {
width: calc(100%-35);
}
-
!important
优先级最高,可在调试时使用。
/*!important*/
//main.less
.test_important{
.border_radius() !important;
}
//main.css
.test_important {
-webkit-border-radius: 5px !important;
-moz-border-radius: 5px !important;
border-radius: 5px !important;
}
-
@ import
可以使用@ import,在一个less文件中导入less文件和css文件。
- @ import "ku" //此处为导入Less文件,可以把.less省略;
- @ import (less) "a.css" //此处为导入Css文件;
参考资料