Vue-less的使用和deep深度选择器

1、导入（1）npm 下载npm install less@3.9.0 less-loader@5.0.0 -s（2）vue 引入// main.jsimport less from 'less'Vue.use(less)（3）使用<style lang="less"></style>2、变量@width: 200px;@height: @width + 100px;@bg

小矮马

13509人浏览 · 2021-07-14 14:40:19

小矮马 · 2021-07-14 14:40:19 发布

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>