Vue-less的使用和deep深度選擇器詳解
更新時間：2023年10月21日 09:47:53 作者：小矮馬
這篇文章主要介紹了Vue-less的使用和deep深度選擇器,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
1、導(dǎo)入
（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、混合
// 定義一個函數(shù)
.hunhfun(@color:red,@size:14px) {
background: @color;
font-size: @size;
}
// 不傳參，使用默認的
.box1 {
.hunhfun();
}
// 給函數(shù)傳參
.hunhfun{
.hunhfun(@color:green,@size:30px);
}5、deep深度選擇器
在vue中，我們?yōu)榱吮苊飧附M件的樣式影響到子組件的樣式，會在style中加<style scoped>，這樣父組件中如果有跟子組件相同的class名稱或者使用選擇器的時候，就不會影響到子組件的樣式。
但是這樣存在著一個問題，比如你使用了別人的組件或者自己開發(fā)一個組件，有時候你修改一處就可能影響到別的地方，所以就需要有一個方法或者方式，既不影響到別的地方，又能修改子組件在當前的樣式，可以使用 /deep/ 深度選擇器。
<style scoped lang='less'>
/deep/ .h-page-content {
padding: 0;
}
</style>
<style scoped lang='scss'>
::v-deep .h-page-content {
padding: 0;
}
</style>總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
下面小編就為大家分享一篇vue獲取當前點擊的元素并傳值的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了iview Upload組件多個文件上傳的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue自定義組件search-box，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了Vue如何使用混合Mixins和插件開發(fā)詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
vue el-tree 默認展開第一個節(jié)點的實現(xiàn)代碼
這篇文章主要介紹了vue el-tree 默認展開第一個節(jié)點的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-05
因為本人使用的是webstorm2016 2.3版本，結(jié)果竟然不支持vue文件，所以找到了一個解決方法，下面這篇文章主要給大家介紹了關(guān)于webstorm添加vue支持的方法教程，需要的朋友可以參考借鑒，下面來一起看看吧。2017-07-07
最近在自己寫頁面,然后寫登錄注冊UI的時候需要一個驗證碼組件,去搜一下沒找到什么合適的,于是自己寫一個,這篇文章主要給大家介紹了關(guān)于Vue實現(xiàn)驗證碼登錄的相關(guān)資料,需要的朋友可以參考下2022-03-03
放大鏡在很多購物網(wǎng)站都可以看的到，本文主要實現(xiàn) 固定放大兩倍,鼠標進入到左側(cè)圖片區(qū)域的時候,遮罩層顯示,離開時,遮罩層隱藏，感興趣的可以了解一下2021-07-07
今天小編就為大家分享一篇vue獲取form表單的值示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了VUE簡單的定時器實時刷新的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-01-01