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-cli与webpack处理静态资源的方法及webpack打包的坑
这篇文章主要介绍了vue-cli与webpack处理静态资源的方法,需要的朋友可以参考下2018-05-05vue基础之使用get、post、jsonp实现交互功能示例
这篇文章主要介绍了vue基础之使用get、post、jsonp实现交互功能,结合实例形式分析了vue.js中get、post及jsonp针对本地文件、网络接口实现交互功能相关操作技巧,需要的朋友可以参考下2019-03-03详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
本篇文章主要介绍了详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持,非常具有实用价值,需要的朋友可以参考下2017-10-10Vue报错:Uncaught TypeError: Cannot assign to read only propert
这篇文章主要给大家介绍了关于Vue报错:Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>' 的解决方法,文中介绍的非常详细,需要的朋友们下面来一起看看吧。2017-06-06
最新评论