1、导入
(1)npm 下载
npm install less@3.9.0 less-loader@5.0.0 -s
(2)vue 引入
// main.js
import less from 'less'
Vue.use(less)
(3)使用
<style lang="less"></style>
2、变量
@width: 200px;
@height: @width + 100px;
@bgColor: yellow;
@bgImg: "../assets/logo.png";
.hello
width: @width;
height: @height;
background-color: @bgColor;
}
// 字符串拼接变量使用方式
.pic {
background-image: url("@{bgImg}");
}
3、嵌套
.hello{
background-color: silver;
.qt{
width: 100px;
height: 100px;
background-color: @bgColor;
}
&:hover{
background-color: skyblue;
}
}
4、混合
// 定义一个函数
.hunhfun(@color:red,@size:14px) {
background: @color;
font-size: @size;
}
// 不传参,使用默认的
.box1 {
.hunhfun();
}
// 给函数传参
.hunhfun{
.hunhfun(@color:green,@size:30px);
}
5、deep深度选择器
在vue中,我们为了避免父组件的样式影响到子组件的样式,会在style中加<style scoped>,这样父组件中如果有跟子组件相同的class名称或者使用选择器的时候,就不会影响到子组件的样式。但是这样存在着一个问题,比如你使用了别人的组件或者自己开发一个组件,有时候你修改一处就可能影响到别的地方,所以就需要有一个方法或者方式,既不影响到别的地方,又能修改子组件在当前的样式,可以使用 /deep/ 深度选择器。
<style scoped lang='less'>
/deep/ .h-page-content {
padding: 0;
}
</style>
<style scoped lang='scss'>
::v-deep .h-page-content {
padding: 0;
}
</style>