vue2中l(wèi)ess的安裝以及使用教程
更新時(shí)間：2022年12月12日 08:53:22 作者：m0_63466615
less是css預(yù)處理器,對原先css進(jìn)行了擴(kuò)展和補(bǔ)充,下面這篇文章主要給大家介紹了關(guān)于vue2中l(wèi)ess的安裝以及使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
1.安裝
1.1 在vue cli2 使用vue init webpack xxx 創(chuàng)建的項(xiàng)目
webpack安裝要考慮less-loader的兼容問題，
npm install less-loader@7.0.0
如果7.0.0不行，就一步一步下探，6.0.0 5.0.0
安裝less-loader成功后，
npm install --save less
安裝less
在webpack.base.config.js的rules里添加
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
}
在.vue文件的style區(qū)，加上lang='less'
1.2 在vue cli3中（vue create xxx）
npm install less-loader -- save-dev
npm install less --save-dev
在.vue文件的style區(qū)，加上lang='less'
2.使用
2.1定義變量
@width: 500px; @height: @width+10px; @red: #f00; @transparent: 0.5; @radius: 30px;
注意變量也可以引用變量
2.2 在屬性中使用變量
#app {
width: @width;
height: @height;
background-color: @red;
}
2.3混合（Mixin）
.border() {
border-radius: @radius;
border-color: @red;
}
.colors() {
primary: #3385ff;
secondary: green;
}
#app {
width: @width;
height: @height;
background-color: @red;
.border();
}編譯出來就是
#app {
width: 500px;
height: 510px;
background-color: #f00;
border-radius: 30px;
border-color: #f00;
}
2.4在引用變量時(shí)，做一些運(yùn)算
.inner-app {
width: @width / 2;
height: @height / 2;
background-color: #00f;
}
編譯出來是
.inner-app {
width: 500px / 2;
height: 510px / 2;
background-color: #00f;
}
2.5可以以屬性名作為變量
.app2 {
@width: 200px;
width: @width;
height: $width;
background-color: .colors[secondary]; // .colors在上邊Mixin里定義的
}
編譯出來是
.app2 {
width: 200px;
height: 200px;
background-color: green;
}
2.6引用父元素以及祖先元素（&）
#app {
width: @width;
height: @height;
background-color: @red;
&:hover {
opacity: @transparent;
&::after {
content: "anc";
}
&::before {
content: "xyt";
}
}
}
編譯出來是
#app:hover {
opacity: 0.5;
}
#app:hover::after {
content: "anc";
}
#app:hover::before {
content: "xyt";
}
注意 &引用的是所有父元素和祖先元素
總結(jié)
到此這篇關(guān)于vue2中l(wèi)ess的安裝以及使用教程的文章就介紹到這了,更多相關(guān)vue2 less安裝使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
淺析vue-router jquery和params傳參(接收參數(shù))$router $route的區(qū)別
今天做項(xiàng)目時(shí)踩到了vue-router傳參的坑（jquery和params），所以決定總結(jié)一下二者的區(qū)別。感興趣的朋友跟隨腳本之家小編一起看看吧2018-08-08
關(guān)于Vue.nextTick()的正確使用方法淺析
最近在項(xiàng)目中遇到了一個(gè)需求，我們通過Vue.nextTick()來解決這一需求，但發(fā)現(xiàn)網(wǎng)上這方面的資料較少，所以自己來總結(jié)下，下面這篇文章主要給大家介紹了關(guān)于Vue.nextTick()正確使用方法的相關(guān)資料，需要的朋友可以參考下。2017-08-08
vue自動路由-單頁面項(xiàng)目（非build時(shí)構(gòu)建）
這篇文章主要介紹了vue自動路由-單頁面項(xiàng)目（非build時(shí)構(gòu)建）,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
VUE使用echarts?5.0以上版本渲染器未導(dǎo)入錯(cuò)誤問題
這篇文章主要介紹了VUE使用echarts?5.0以上版本渲染器未導(dǎo)入錯(cuò)誤問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
解決vue3中使用echart報(bào)錯(cuò):Cannot read properties of&n
在Vue項(xiàng)目中使用Echarts進(jìn)行數(shù)據(jù)可視化是非常常見的需求,然而有時(shí)候在引入Echarts的過程中可能會遇到報(bào)錯(cuò),本文主要介紹了解決vue3中使用echart報(bào)錯(cuò):Cannot read properties of undefined (reading ‘type‘),感興趣的可以了解一下2024-01-01
解決vue路由組件vue-router實(shí)例被復(fù)用問題
這篇文章介紹了解決vue路由組件vue-router實(shí)例被復(fù)用的問題，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
本篇文章主要介紹了Vue中如何實(shí)現(xiàn)輪播圖的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
vue動態(tài)設(shè)置路由權(quán)限的主要思路
這篇文章主要給大家介紹了關(guān)于vue動態(tài)設(shè)置路由權(quán)限的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
Electron也可以快速地將你的網(wǎng)站打包成一個(gè)原生應(yīng)用發(fā)布,下面這篇文章主要給大家介紹了關(guān)于Vue和React中快速使用Electron的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
vue中多個(gè)倒計(jì)時(shí)實(shí)現(xiàn)代碼實(shí)例
這篇文章主要介紹了vue中多個(gè)倒計(jì)時(shí)實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03