如何在js中引入less的變量

更新時(shí)間：2023年07月18日 11:22:48 作者：曹小維

這篇文章主要介紹了如何在js中引入less的變量,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

less的定義

less 是一門 CSS 預(yù)處理語言，可以通過預(yù)處理器把less文件編譯成css，less增加了變量、混合（mixin）、函數(shù)等功能，彌補(bǔ)了css的不足，讓編寫css更加方便

1：首先創(chuàng)建一個(gè)以.module.less為后綴的文件，在通過:export導(dǎo)出

variables.module.less

@color: #FF4754;
// 導(dǎo)出變量
:export {
  color: @color; 
}

2：在js中引入less對(duì)象

import variables from '@/variables.module.less'
console.log(variables)

3：輸出結(jié)果

使用JS更改全局樣式.less

最近公司里在做H5頁面,需要吧頁面分別展現(xiàn)到iOS,和Android上面所以說兼容成了問題,經(jīng)過我不斷百度終于找到了解決方案

1,在全局.less里先定義變量

:root {
  --top: 0px;
}

2,在全局去引用

.indexPage{
 padding-top: var(--top);
}

3,在js中控制變量

document.documentElement.style.setProperty('--top', top)

這個(gè)方法也可以應(yīng)用到主題切換里

到此這篇關(guān)于如何在js中引入less的變量的文章就介紹到這了,更多相關(guān)js引入less變量內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

JavaScript常用8種數(shù)組去重代碼實(shí)例
這篇文章主要介紹了JavaScript常用8種數(shù)組去重代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-09-09
JavaScript 未結(jié)束的字符串常量常見解決方法
做JavaScript的時(shí)候,發(fā)現(xiàn)老是出現(xiàn)錯(cuò)誤：“未結(jié)束的字符串常量”. 自己找了下應(yīng)該是傳參數(shù)的時(shí)候,有特殊字符引起的.網(wǎng)上也找了下,也有好多出現(xiàn)這種情況.做下總結(jié),以方便以后查閱.
2010-01-01
常見表單重復(fù)提交問題整理及解決方法
常見的重復(fù)提交問題如點(diǎn)擊提交按鈕兩次、點(diǎn)擊刷新按鈕等等，下面為大家整理了防止表單重復(fù)提交的方法，感興趣的朋友可以參考下
2013-11-11
ts封裝axios并處理返回值的實(shí)戰(zhàn)案例
在vue項(xiàng)目中,和后臺(tái)交互獲取數(shù)據(jù)這塊,我們通常使用的是axios庫,下面這篇文章主要給大家介紹了關(guān)于ts封裝axios并處理返回值的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-08-08
微信小程序?qū)崿F(xiàn)頂部普通選項(xiàng)卡效果(非swiper)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)頂部普通選項(xiàng)卡效果，非swiper，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
JavaScript的異步ajax詳解
篇文章主要為大家詳細(xì)介紹了JavaScript?異步ajax，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下嗎，希望能夠給你帶來幫助
2022-03-03
犀利的js 函數(shù)集合
和同事討論js時(shí)，我說較為理想的狀態(tài)是，把js當(dāng)一把好用的匕首，隨手拿來，捅一刀子就走。話雖如此，但現(xiàn)實(shí)生活中大部分時(shí)候的情況是不理想的。
2009-06-06
詳解JS中的快速排序與冒泡
本文主要介紹了快速排序思想與冒泡排序思想。具有一定的參考價(jià)值，下面跟著小編一起來看下吧
2017-01-01
js判讀瀏覽器是否支持html5的canvas的代碼
瀏覽器是否支持html5的canvas,我們可以使用js來判斷下，具體如下，喜歡的朋友可以收藏
2013-11-11
JavaScript數(shù)據(jù)類型轉(zhuǎn)換簡(jiǎn)單方法舉例
JavaScript是一種無類型語言，但同時(shí)JavaScript提供了一種靈活的自動(dòng)類型轉(zhuǎn)換的處理方式,下面這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)據(jù)類型轉(zhuǎn)換的相關(guān)資料,需要的朋友可以參考下
2023-12-12