Vue-less的使用和deep深度選擇器詳解
更新時(shí)間：2023年10月21日 09:47:53 作者：小矮馬
這篇文章主要介紹了Vue-less的使用和deep深度選擇器,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(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中安裝使用vux的教程，本文給大家記錄了vuex的安裝使用過程，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-09-09
在最近一個(gè)項(xiàng)目的后臺(tái)管理系統(tǒng)中，寫前端界面時(shí)用到了ElementUI，但是發(fā)現(xiàn)導(dǎo)入數(shù)據(jù)表格之后表頭的高度一直很高，那么如何解決，本文就來詳細(xì)的介紹一下2021-09-09
vue input標(biāo)簽通用指令校驗(yàn)的實(shí)現(xiàn)
這篇文章主要介紹了vue input標(biāo)簽通用指令校驗(yàn)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
今天小編就為大家分享一篇解決VUE雙向綁定失效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要為大家詳細(xì)介紹了如何利用Vue和Echarts實(shí)現(xiàn)繪制折線圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2023-05-05
本文介紹Vue嵌套路由的實(shí)現(xiàn)方式,通過動(dòng)態(tài)URL路徑嵌套組件展示,涉及修改路由配置及創(chuàng)建子組件Son1/Son2,結(jié)合ElementUI菜單組件應(yīng)用2025-08-08
Vue $router.push打開新窗口的實(shí)現(xiàn)方法
在Vue中,$router.push方法默認(rèn)不支持在新窗口中打開頁面,但通過結(jié)合window.open方法和$router.resolve方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-09-09
這篇文章主要介紹了Vue3使用router,params傳參為空問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
ant-design-vue的form表單全局禁用不生效問題及解決
文章描述了在使用ant-design-vue開發(fā)表單時(shí)遇到的編輯與查看需求,由于官方?jīng)]有提供全局disabled屬性,作者通過自定義CSS類來實(shí)現(xiàn)表單項(xiàng)的禁用狀態(tài),文章還提到,從ant-design-vue 4.0開始,官方支持在a-form組件上直接設(shè)置disabled屬性,從而簡(jiǎn)化了操作2026-03-03
Vue.js中extend選項(xiàng)和delimiters選項(xiàng)的比較
這篇文章主要介紹了Vue.js中extend選項(xiàng)和delimiters選項(xiàng)的比較的相關(guān)資料,需要的朋友可以參考下2017-07-07