Less的常用语法
学前端的同学可能都知道less，为了方便学习less ，这里给大家总结了几个常用的语法。
变量
/*变量*//*注意，由于变量只能定义一次，实际上他们就是“常量”.*/
@base: #f938ab;
函数
/*函数 .box-shadow(), iscolor(), isnumber(), 函数重载*/
.box-shadow(@style, @c) when(iscolor(@c)){
-webkit-box-shadow:@style @c;
box-shadow:@style @c;
}
.box-shadow(@style, @alpha:50%) when(isnumber(@alpha)){
.box-shadow(@style, rgba(0,0,0, @alpha));
}
/*使用变量，调用函数*/
.box{ color:saturate(@base, 5%);
border-color:lighten(@base, 30%);
div{
.box-shadow(0 0 5px, 30%)
}
}
变量和运算符
/*定义变量，使用运算符*/
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
/*使用变量*/#header{ color: @light-blue;
.nav{ font-size:20px;
}
.logo{ width:200px; height:100px; float:left; background:#aaa;
}
}
.bordered{ border-top:dotted 1px green; border-bottom:dashed 2px blue;
}
.txt-none{ text-decoration:none;
}
混合 mixin
/*~~嵌入 其他样式*//*混合*//*混合就是一种将一系列属性从一个规则集引入(“混合”)到另一个规则集。*/#menu a{ color:#111;
.bordered;
.txt-none
}
.post a{ color:red;
.bordered;
.txt-none;
}
嵌套 nest
/*~~包含 内部样式定义*/
/*嵌套 样式规则 这样的代码更简洁, 它模仿了 HTML 的结构. & 表示当前选择器的父选择器*/
.clearfix{ display:block; zoom:1;
&:after{ content:''; display:block; clear:both; visibility:hidden; font-size:0; line-height:0; height:0;
}
}
/*上面等价于*/
.clearfix{ display:block; zoom:1;
}
.clearfix:after{ content:''; display:block; clear:both; visibility:hidden; font-size:0; line-height:0; height:0;
}
#header { color: black;
.logo { width: 300px;
}
}
/*等价于*/#header { color: black;
}#header .logo { width: 300px;
}
包含媒体查询的嵌套
/*~~包含 媒体查询*//*嵌套 媒体查询*/
.screencolor{
@media screen{ color: green;
@media (min-width:768px){ color:red;
}
}
@media tv{ color:black;
}
}
运算
/*定义变量 变量运算和赋值*/
@baseAlpha: 30%;
@filler: @baseAlpha * 2;
@other: @baseAlpha + @filler;
@var: 5px + 10;
/*变量直接作为属性值，或运算后作为属性值*/.test{
padding-top: @var;
color:#888 / 4;
background-color: @base + #111;
height: 100% /2 + @filler
}
bundle(只minxin bundle的一部分)
/*包含 内部元素样式定义*/#bundle{
.button{ display:block; border:1px solid hotpink; background:grey;
&:hover{ background-color:#fff;
}
}
}
/*嵌入 包含定义的样式*/#header a{ color: skyblue;
#bundle > .button;
}
变量的作用域
/*变量作为样式属性值,注意变量的作用域 {}*//*变量可以在最外层声明，也可以在样式定义{}中声明*/@varcolor: red;
#footer{
color: @varcolor;
@varcolor: green;
}
变量插值(插值到选择器或样式属性)
/*变量作为插值表达式 使用在选择器中,注意格式@{varname}*/
@myselector: banner;
.@{myselector}hihi{
font-weight:bold;
line-height:40px;
}
变量作为
@img: "../images";.test-img{
color:#444;
background-image:url("@{img}/white-brand.jpg");
}
动态变量(变量的值作为另一个变量的名)
.test-var{
@found: "i am found";
@varfnd: "found";
content:@@varfnd;
}
变量顺序解析 同名覆盖
.test-lazy{ width: @var2;
@a2: 9%; height:@a2;
}
@var2: @a2;@a2: 100%;
.test-lazy2{ width: @var2; height:@a2;
}
@var3 : 0;
.class{
@var3:1;
.blass{
@var3:2; three: @var3;
@var3:3;
} one: @var3;
}
@import "other";@base-color: green;
.test-import{
font-size:20px; background: @base-color; color:@dark-color;
}
继承 extend
nav ul{
&:extend(.inline); background:blue;
}
.inline{ color:red;
}
.a:extend(.inline){ font-size:18px;
}
.bucket{
tr & { color:blue;
}
}
.some-class:extend(tr .bucket){ border:1px dotted green;
}
原文来自：博客园/stephenykk