LESS 学习记录(简单入门)

Posted 2020-06-13

　　什么是 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;
		&[email protected]{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 的时候这条注释还在 */