Less Less基础 - 技术栈

1.less

less是一种动态样式语言，属于CSS预处理器的范畴，它扩展了CSS语言，增加了变量，Mixin，函数等特性，使CSS更易维护和扩展。Less既可以在客户端上运行，也可以借助Node.js在服务端运行。

2.Less中的注释

(1).以//开头的注释，不会被编译到css文件中

(2).以/**/包裹的注释会被编译到css文件中

3.Less中的变量

(1).使用@来声明一个变量：@pink：pink，@selector:#box;

(2).作为普通属性值来使用：直接使用@pink

(3).作为选择器、属性名和url：使用@{selector}的形式

@color:deeppink;

@idname:#box;

@optionName:width;

.......................

@{idname}{

position: relative;

@{optionName}: 300px;

..........................

.inner{

..........................

background-color: @color;

...........................

}

}

(4).变量的延迟加载

@color:deeppink;

@idname:#box;

@optionName:width;

@var:1;

@{idname}{

...........................

.inner{

...........................

background-color: @color;

@var:0.5;

opacity: @var; // opacity: 0.3;

@var:0.3;

}

opacity: @var; // opacity: 1;

}

4.less的嵌套规则

(1).基本嵌套规则

LESS 嵌套遵循 "父级选择器包含子级选择器" 的逻辑，对应 HTML 中的父子元素关系。

(2).&的使用

用 & 避免生成后代选择器。

@color:deeppink;

@idname:#box;

@optionName:width;

@var:1;

@{idname}{

position: relative;

@{optionName}: 300px;

height: 400px;

border: 1px solid #000;

margin: auto;

.inner{

..........................

background-color: @color;

..........................

&:hover{ // 生成#box .inner:hover,不使用&则生成#box .inner :hover

background-color: pink;

}

}

5.避免编译

#box{

width: ~"calc(100px + 100px)"; //提示less这里不用编译，让原生css计算

// height: 100px + 100px; //less编译过后为200px

height: 100px + 100em; //less编译过后为200px,less运行出的单位是less遇到的第一个单位，是纯数值运算，不考虑单位转换

background: red;

}

css 复制代码

@color:deeppink;
@idname:#box;
@optionName:width;
@var:1;
*{
	margin: 0;
	padding: 0;
}
@{idname}{
	position: relative;
	@{optionName}: 300px;
	height: 400px;
	border: 1px solid #000;
	margin: auto;
	background-color: skyblue;
	.inner{
		width: 100px;
		height: 100px;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: @color;
		margin: auto;
		@var:0.5;
		opacity: @var;
		@var:0.3;
		
		&:hover{
			background-color: pink;
		}
	}
	opacity: @var;
}