Less基础教程

Less基础教程

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

安装和使用

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

npm install less -g
bower install less

新版的chrome能直接解析less样式，不进行预编译的情况下，可以在页面引入 自己写的less文件 和 less.js

less会在页面创建<style>节点，包含编译后的样式

<link rel="stylesheet/less" href="style.less" type="text/css" />
<script src="less.js" type="text/javascript"></script>

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