Less基础教程

Less基础教程

less是较早出现的css预处理器。 LESS API 参考

安装和使用

安装比较简单,通过nmp或bower安装即可.

npm install less -g
bower install less

新版的chrome能直接解析less样式，不进行预编译的情况下，可以在页面引入 自己写的less文件 和 less.js
less会在页面创建<style>节点，包含编译后的样式

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;
}