less

在vue中使用less

依赖下载

// 下载
> npm install --save less less-loader
// 检查版本
> lessc -v

使用

main.js

import less from 'less'
Vue.use(less)

.vue

<style lang='less'>
	/*less内容*/
</style>

less用法

变量

值变量

以 @ 开头定义变量

<style lang='less'>
	@color: #ededed;
	.box {
		border: 1px solid @color;
	}
</style>

选择器变量

以 @ 开头定义变量，变量名必须使用@{}调用

<style lang='less'>
	@wrap: wrap;
	@warp-id: #wrap;
	.@{warp}{
		padding: 10px;
	}
	@{wrap-id}{
		padding: 30px;
	}
</style>

属性变量

以 @ 开头定义变量，变量名必须使用@{}调用

<style lang='less'>
	@color: #ededed;
	@borderTop: border-top;
	.box {
		@{borderTop}: 1px solid @color;
	}
</style>

url变量

以 @ 开头定义变量，变量名必须使用@{}调用

<style lang='less'>
	@img: './assets/image';
	.box {
		background: url('@{img}/logo.png');
	}
</style>

声明变量

结构: @name: {属性: 值;};
使用: @name()

<style lang='less'>
	@border: {border: 1px solid #ededed;};
	.box {
		@border();
	}
</style>

嵌套

&

<style lang='less'>
	.box {
		color: #ccc;
		&:hover {
			color: #999;
		}
		div {
			color: #333;
		}
	}
</style>

混合方法

继承

函数