参考链接：http://www.lesscss.net/features/
/** 在页面引入自己编写的less文件和 less.js
** less会在页面创建<style></style>节点，包含编译后的样式
<link rel="stylesheet/less" href="style.less" type="text/css" />
<script src="less.js" type="text/javascript"></script>
*/
/*变量*/
/*注意，由于变量只能定义一次，实际上他们就是“常量”.*/
@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;}
/*~~嵌入 其他样式*/
/*混合*/
/*混合就是一种将一系列属性从一个规则集引入(“混合”)到另一个规则集。*/
#menu a{
color:#111;
.bordered;
.txt-none
}
.post a{
color:red;
.bordered;
.txt-none;
}
/*~~包含 内部样式定义*/
/*嵌套 样式规则 这样的代码更简洁, 它模仿了 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{
.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;
[email protected]{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;
}
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;
}