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