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