如何使用less(变量,混合,匹配,运算,嵌套...)

如何使用less及一些常用的(变量,混合,匹配,运算,嵌套...)

less的介绍及编译工具

什么是less

1.LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。
LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。

less的编译工具

Koala 考拉 --编译的时候如果没有建CSS文件夹 Koala会自动给你生成一个
如何设置语言

如何编译
-
让webstorm支持less编译:
- 安装node.js --- 这是一个包管理工具以后还会用到
- WIN+R
- 输入 npm install less
.....

less的语法

Ps:下面的知识点会用到上面的知识点 (比如说在混合中会用到变量加深印象^_)

注释
- // 只在less中显示
- /**/ 会在编译好的css文件中显示
变量
- 定义变量用@
  - less中的写法
```
@ly_100px;
.box {
	@ly_width;
}
```
  - 编译后在css中显示的是
```
.box {
	100px;
}
```

混合

不带参数的混合

先上less中的代码如果想在.one中应用.border的样式怎么办?

@ly_100px;
@ly_height:200px;
@ly_color:green;
.border {
	border:1px solid red;
}
.one {
	@ly_width;
	height:@ly_height;
	background-color:@ly_color;
}

写成下面的样子

@ly_100px;
@ly_height:200px;
@ly_color:green;
.border {
	border:1px solid red;
}
.one {
	@ly_width;
	height:@ly_height;
	background-color:@ly_color;
	.border;
}

编译后在css中显示的是

.border {
  	border:1px solid red;
}
.one {
  	 100px;
  	height: 200px;
  	background-color: #008000;
  	border: 1px solid red;
}
        ```

带参数的混合---不带默认值 (可以传多个参数,以逗号或者分号隔开,推荐用分号下面以一个参数为例)

less中的写法

@ly_100px;
@ly_height:200px;
@ly_color:green;
.border(@border_width) {
	border:@border_width solid red;
}
.one {
	@ly_width;
	height:@ly_height;
	background-color:@ly_color;
	.border(1px);
}

编译后在css中显示的是

.one {
  	 100px;
  	height: 200px;
  	background-color: #008000;
  	border: 1px solid #ff0000;
}

带参数的混合---带默认值 (可以传多个参数下面以一个参数为例)

less中的写法

@ly_100px;
@ly_height:200px;
@ly_color:green;
.border(@border_3px;) {
	border:@border_width solid red;
}
.one {
	@ly_width;
	height:@ly_height;
	background-color:@ly_color;
	.border();
}

编译后在css中显示的是

.one {
  	 100px;
  	height: 200px;
  	background-color: #008000;
  	border: 3px solid #ff0000;
}

在解决css3兼容性时候经常用到

解决border-radius兼容

.border_radius (@radius: 5px) {
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
	-ms-border-radius: @radius;
	-o-border-radius: @radius;
	border-radius: @radius;
}

匹配模式

可以理解成if 和上面的混合有些相似

less中的写法

//定义上,下,左,右边框的样式
.border(top;@border_5px;@border_color:red){
	border-top:@border_width solid @border_color;
}
.border(bottom;@border_5px;@border_color:red){
	border-bottom:@border_width solid @border_color;
}
.border(left;@border_5px;@border_color:red){
	border-left:@border_width solid @border_color;
}
.border(right;@border_5px;@border_color:red){
	border-right:@border_width solid @border_color;
}
//如果想写通用的样式 可以在下面的代码中写 格式是固定的 
.border(@_,@border_5px;@border_color:red){
	border-color:yellow;
}
.border_use1 {
	//选择和if差不多 如果是left就调用上面对应的
	.border(left);
}
.border_use2 {
	//选择和if差不多 如果是right就调用上面对应的
	.border(right);
}

编译后在css中显示的是

.border_use1 {
	border-left:5px solid #ff0000;
	border-color:yellow;
}
.border_use2 {
	border-right:5px solid #ff0000;
	border-color:yellow;
}

运算
- 运算提供了加,减,乘,除操作,还可以做属性值和颜色的运算...
  - less中的写法
```
@ly_100px;
.one {
	@ly_widht + 100;
}
```
  - 编译后在css中显示的是
```
.one {
	200px;
}
```

嵌套

可以在一个选择器中嵌套另一个选择器,代码看起来层次分明,提高代码可维护性

html结构

<div class="one">
	<div class="two"></div>
</div>

less中的写法

@ly_100px;
@ly_height:200px;
@ly_color:red;
.one {
	@ly_width;
	height:@ly_height;
	background-color:@ly_color;
	.two {
		background-color: green;
	}
}

编译后在css中显示的是

.one {
 100px;
height: 200px;
background-color: #ff0000;
}
.one .two {
  background-color: green;
}

@arguments变量

可以包含所有的变量,将变量一起处理

less中的写法

//和前面提到的混合一起举个栗子  
.border(@border_width;@border_style;@border_color){
	border:@arguments;
}
.one {
	.border(1px;solid;red);
}

编译后在css中显示的是

.one {
	border:1px solid #ff0000;
}