Less简介

官方网站

        http://lesscss.cn/ 

        Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS更易维护和扩展。

        Less可以运行在Node或浏览器端。也可运行在桌面客户端（考拉 ）。

编译工具

1. Node.js库
2. 浏览器端使用 
3. koala（推荐）

        koala是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。

        下载地址：http://koala-app.com/index-zh.html          

基本语法 

• 注释 

1. /**/，不会被编译
2. //，被编译

• 变量

         Less中声明变量的话，一定要用@开头，例如：“@变量名：值；”        

/*声明变量*/

//main.less
@text_width:300px;
.box{
	width: @text_width;
	height: @text_width;
	background-color: yellow;
}

//main.css
.box {
  width: 300px;
  height: 300px;
  background-color: yellow;
}

• 混合 

/*混合*/

//main.less
@text_width:300px;
.box{
	width: @text_width;
	height: @text_width;
	background-color: yellow;
	.border;
}
.border{
	border: solid 5px pink;
}

//main.css
.box {
  width: 300px;
  height: 300px;
  background-color: yellow;
  border: solid 5px pink;
}
.border {
  border: solid 5px pink;
}

• 混合-带参数

/*混合-带参数*/

//main.less
.border_02(@border_width){
	border: solid yellow @border_width;
}
.border_mixin{
	.border_02(30px;)
}

//main.css
.border_mixin {
  border: solid #ffff00 30px;
}

• 混合-带默认值

/*混合-带默认值*/

//main.less
.border_03(@border_width:10px){
	border: solid yellow @border_width;
}
.border_mixin_03{
	.border_03();//传参使用新参数
}

//main.css
.border_mixin_03 {
  border: solid #ffff00 10px;
}

• 混合-一个例子

/*混合-一个例子*/

//main.less
.border_radius(@radius:5px){
	-webkit-border-radius:@radius;
	-moz-border-radius:@radius;
	border-radius:@radius;
}
.radius_test{
	width: 100px;
	height: 100px;
	background-color: green;
	.border_radius();
}

//main.css
.radius_test {
  width: 100px;
  height: 100px;
  background-color: green;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

• 匹配模式

/*匹配模式*/

//main.less
.sanjiao{	
	.triangle(top,100px);	
}
.triangle(@_,@w:5px,@c:#ccc){//@_表示此处样式全包括在内，后三个参数必须有
	width: 0;
	height: 0;
	overflow: hidden;//处理ie6最小高度问题
}
.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;
}

//main.css
.sanjiao {
  width: 0;
  height: 0;
  overflow: hidden;
  border-width: 100px;
  border-color: transparent transparent #cccccc transparent;
  border-style: dashed dashed solid dashed;
}

• 运算

/*运算*/

//mian.less
@test_01:300px;
.box_02{
	width: @test_01 + 20;
}

//mian.css
.box_02 {
  width: 320px;
}

• 嵌套规则

        & 代表上一层选择器

/*嵌套规则*/

//main.html
  <ul class="list">
		<li><a href="">这是一个list</a><span>2017-8-20</span></li>
  </ul>

//main.less
.list{
	width: 600px;
	margin:30px auto;
	padding: 0 10px;
	list-style: none;
	li{
		height: 30px;
		line-height: 30px;
		background-color: #eee;
		margin-bottom: 5px;
	}
	a{
		float: left;
		//& 代表上一层选择器
		&:hover{
			color: red;
		}
	}
	span{
		float: right;
	}
}

//main.css
.list {
  width: 600px;
  margin: 30px auto;
  padding: 0 10px;
  list-style: none;
}
.list li {
  height: 30px;
  line-height: 30px;
  background-color: #eee;
  margin-bottom: 5px;
}
.list a {
  float: left;
}
.list a:hover {
  color: red;
}
.list span {
  float: right;
}

• @arguments变量

        @arguments包含了所有传递进来的参数，用的不多，了解即可。

/*@arguments变量*/

//main.less
.border_arg(@w:30px,@c:red,@xx:solid){
	border:@arguments;
}
.test_arguments{
	.border_arg(40px);
}

//mian.css
.test_arguments {
  border: 40px #ff0000 solid;
}

• 避免编译

        有时候我们需要输出不正确的CSS语法，或者使用一些LESS不认识的专有语法，我们可以在字符串前加“~”，例如：width:~'calc(100%-35)';

/*避免编译*/

//main.less
.test_03{
	width:~'calc(100%-35)'; //不加~效果：width: calc(65%);
}

//main.css
.test_03 {
  width: calc(100%-35);
}

•  !important

        优先级最高，可在调试时使用。 

/*!important*/

//main.less
.test_important{
	.border_radius() !important;
}

//main.css
.test_important {
  -webkit-border-radius: 5px !important;
  -moz-border-radius: 5px !important;
  border-radius: 5px !important;
}

• @ import

        可以使用@ import，在一个less文件中导入less文件和css文件。

1. @ import  "ku"  //此处为导入Less文件，可以把.less省略；
2. @ import  (less) "a.css"  //此处为导入Css文件；

参考资料 

1. 快速入门 http://less.bootcss.com/ 

转载于:https://my.oschina.net/stefanieliang/blog/1513891