Less随笔

Less是什么？

1.Less类似于jQuery( css中的jQuery )

LessCss是一种动态样式语言，属于css预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。

LessCss可以再多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。

本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件.

这里用 sublime编辑器+koala编译工具

新建main.less,输入 @charset"utf-8"; 保存。

将项目文件（这里命名为Less,其中包括img与style文件夹），托到koala中，执行编译。

它将自动生成main.css文件，在sublime中打开，（准备完成）

Less中的注释：

/*我是被编译的*/  （显示在css中）

//我是不被编译的  （不显示）

内容：变量、混合、匹配模式、运算 嵌套规则、@arguments变量、避免编译、！important关键字

1.变量

@width:30px;

2.混合

<span style="font-family:Microsoft YaHei;">@test_width:300px; 
.box{
	width:@test_width;
	height:@test_width; 
	background-color:yellow; 	//2.混合	
        .border;
} //混合
.border{
	border:solid 5px pink;
}</span>

3.混合 - 可带参数的(必填)

<span style="font-family:Microsoft YaHei;">.border_02(@border_width){
	border:solid yellow @border_width;
} 
.test_hunhe{
	.border_02(30px);
}</span>

4.混合 — 默认带值

<span style="font-family:Microsoft YaHei;">.border_03(@border_width:10px){
	border:solid green @border_width;
}

.test_hunhe_03{
	.border_03(20px);
}</span>

5.匹配模式 (@_ ：无论选谁都必须带上我 )

<span style="font-family:Microsoft YaHei;">.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;
}
.triangle(left,@w:5px,@c:#ccc){
	border-width: @w;
	border-color: transparent @c transparent transparent;
	border-style: dashed solid dashed dashed;
}
.triangle(right,@w:5px,@c:#ccc){
	border-width: @w;
	border-color: transparent transparent transparent @c;
	border-style: dashed dashed dashed solid;
}
// @_ : 无论上面选谁，都必须带上我
.triangle(@_,@w: 5px,@c: #ccc){
	width: 0;
	height: 0;
	overflow: hidden;
}
.sanjiao{
	.triangle(right,100px);
}</span>

6.匹配模式的定位

<span style="font-family:Microsoft YaHei;">.pos(r){
	position: relative;
}
.pos(a){
	position: absolute;
}
.pos(f){
	position: fixed;
}

.pipei{
	width: 200px;
	height: 200px;
	background-color:green;
	.pos(r);
}</span>

 7.运算

<span style="font-family:Microsoft YaHei;">@test_01:300px;
.box_02{
	width:@test_01 + 20;
	color:#ccc - 10;
}</span>

8.嵌套规则 （& : 代表上一层选择器）

<span style="font-family:Microsoft YaHei;">.list{
	width:600px;
	li{
		height:30px;
	}
	a{
		float: left;
		//& 代表上一层选择器
		&:hover{
			color:red;
		}
	}
	span{
		float:right;
	}
}</span>

9. @arguments变量

<span style="font-family:Microsoft YaHei;">.border-arg(@w:30px,@c:red,@xx:solid){
	border:@arguments; //带上了所有默认值
} 
.test_arguments{
	.border-arg(40px);   //更改了第一个变量的值
}</span>

10.避免编译

1. 有时候我们需要输出一些不正确的css语法或者使用一些LESS不认识的专有语法。
2. 要输出这样的值我们可以在字符串前加上一个 ~
例如： width:~''

<span style="font-family:Microsoft YaHei;">.test_03{
	height:calc(300px-30px);    //返回 270px	                                                                                                                                                                                           width:~'calc(300px-30px)';  //返回 300px-30px
}</span>

11. !important关键字

.test_important{ .border_03()!important;}

小技巧总结：

@_ : 无论选谁都必须带上我

& ：代表上一层选择器

@arguments : 可变参（代表所有）

~‘’： 避免编译

自己感觉less还是很好用的，方便了css结构的编写，推荐哟。

想了解更多，访问http://lesscss.net