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

更新时间：2023年10月21日 09:47:53 作者：小矮马

这篇文章主要介绍了Vue-less的使用和deep深度选择器,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

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>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue获取当前点击的元素并传值的实例
下面小编就为大家分享一篇vue获取当前点击的元素并传值的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
iview Upload组件多个文件上传的示例代码
这篇文章主要介绍了iview Upload组件多个文件上传的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
vue自定义组件search-box示例详解
这篇文章主要介绍了vue自定义组件search-box，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-05-05
Vue如何使用混合Mixins和插件开发详解
这篇文章主要介绍了Vue如何使用混合Mixins和插件开发详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02
vue el-tree 默认展开第一个节点的实现代码
这篇文章主要介绍了vue el-tree 默认展开第一个节点的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-05-05
webstorm添加vue.js支持的方法教程
因为本人使用的是webstorm2016 2.3版本，结果竟然不支持vue文件，所以找到了一个解决方法，下面这篇文章主要给大家介绍了关于webstorm添加vue支持的方法教程，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-07-07
Vue实现验证码登录的方法实例
最近在自己写页面,然后写登录注册UI的时候需要一个验证码组件,去搜一下没找到什么合适的,于是自己写一个,这篇文章主要给大家介绍了关于Vue实现验证码登录的相关资料,需要的朋友可以参考下
2022-03-03
Vue3.0 手写放大镜效果
放大镜在很多购物网站都可以看的到，本文主要实现固定放大两倍,鼠标进入到左侧图片区域的时候,遮罩层显示,离开时,遮罩层隐藏，感兴趣的可以了解一下
2021-07-07
vue获取form表单的值示例
今天小编就为大家分享一篇vue获取form表单的值示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
VUE简单的定时器实时刷新的实现方法
这篇文章主要介绍了VUE简单的定时器实时刷新的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-01-01