js教程 less基本规则以及在vue中使用

less的基本概念

Less 是一门 CSS 预处理语言，为CSS赋予了动态语言的特征。它扩展了 CSS 语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护和扩展。

---

vue中使用less

• 第一步: npm install less-loader less -D
• 第二步: 在vue文件中的< style>上写上 < style type=“text/less” lang=“less”>

在VUE-CLI脚手架建立的工程中，在vue文件中的< style type='text/less' lang='less'>< /style>中如果编写less代码，如果开启了eslint会造成很大的困扰。可以使用如下方式：

#test.vue文件中
<style scoped lang='less' type='text/less'>
	@import './test.less'
</style>

#test.less文件中
可以编写less代码，且能被webstrom和eslint识别。		

---

less的注释

• // less中的行注释，不会被编译到css文件中。
• /* */ less中的块注释，会被编译到css文件中。

---

less的嵌套规则与&

less对于串行选择器的嵌套规则

• 后台选择器嵌套

	.one {
   
		background-color : red;
		.two {
   
			height: 30px;
			widtgh: 30px;
		}
	}

• 儿子选择器嵌套

	.one {
   
		background-color : red;
		> .two {
   
				height: 300px;
				width:  300px;
		}
	}

• 相邻兄弟选择器

.one {
   
	+ div {
   
		height: 300px;
		width:  300px;
		border: 1px solid #ddd;
	}	
}

• 兄弟选择器

.one {
   
	~ div {
   
		height: 300px;
		width:  300px;
		border: 1px solid #ddd;
	}
}

表示外部串行选择器的&标识符

串行的选择器，都可以用嵌套规则完成。但是有一种特殊情况： 当对元素的伪元素进行处理的时候，需要在嵌套内部调用 外部串行的选择器。 这是时候&符号能完成此工作。

.one {
   
	.two:hover {
   
		#此时的.three的选择器为: (.one .two:hover .three)
		.three {
   
		}		
	}
	
	.four: {
   
		#此时的选择器为 ( .one .four:hover )
		&:hover {
   
		}
		#此时的选择器为 ( .one .four .five )
		.five {
   
		}