LESS 学习记录(简单入门)

　　什么是 LESS

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

 

　　使用 LESS

 　　　　在开发环境下的时候，推荐直接使用浏览器使用 LESS。

1. 　　下载 LESS.js 文件。
2. 　　页面中引入 styles.less 文件所有 .less 必须在 LESS.js 前引入。(服务器必须设置 .less 文件的 MIME 为 text/css)
3. 　　引入 JS 文件

 　　　　开发完毕后,推荐使用 node.js 进行预编译，将 .less 编译成 .css

1. 　　通过 npm 安装

   　　npm install -g less

2. 　　安装完毕后，将 .less 编译成 .css

   　　lessc style.less > style.css

3. 　　引入该 style.css 文件

　　以下是自己尝试的玩意.

　　.less 文件

@red:red;	// 设置变量
@blue:blue;	// 变量放顶部,以后调整的时候直接调整变量
@size:22px;
@darkblue:darken(@blue,10%);	// 执行函数,返回加深后的颜色
@url:"http://static.cnblogs.com/images/adminlogo.gif";
@name:active;

#div{
	h3{	// 嵌套
		@size:32px;
		color:@red;	// 调用变量
		font-size:@size;
		&.@{name} {	// 选择器插值
			font-size:@size+10;
			background:url("@{url}") no-repeat;	// 字符串插值
		}
	}
	h4 {
		color:@blue;
		font-size:@size+10;	// 运算
		&:hover {	// 调用变量
			.h4-hover(#333);	// 调用属性集合 将参数传进去
		}
		&:before{
			@var: ~`"hello".toUpperCase() + ','`;
			content:"@{var}";
		}
	}
}
.h4-hover(@color){	// 属性集合,可接受一个参数
	border:1px solid @color;
	color:@darkblue;
}
/* 当 .less 文件被编译成 .css 的时候这条注释还在 */
// 当 .less 文件被编译成 .css 的时候这条注释不见了

　　编译后的 css 

#div h3 {
  color: red;
  font-size: 32px;
}
#div h3.active {
  font-size: 42px;
  background: url("http://static.cnblogs.com/images/adminlogo.gif") no-repeat;
}
#div h4 {
  color: blue;
  font-size: 32px;
}
#div h4:hover {
  border: 1px solid #333;
  color: #0000cc;
}
#div h4:before {
  content: "HELLO,";
}
/* 当 .less 文件被编译成 .css 的时候这条注释还在 */