如何在js中引入less的變量
更新時間：2023年07月18日 11:22:48 作者：曹小維
這篇文章主要介紹了如何在js中引入less的變量,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
less的定義
less 是一門 CSS 預(yù)處理語言，可以通過預(yù)處理器把less文件編譯成css，less增加了變量、混合（mixin）、函數(shù)等功能，彌補了css的不足，讓編寫css更加方便
1：首先創(chuàng)建一個以.module.less為后綴的文件，在通過:export導(dǎo)出
variables.module.less
@color: #FF4754;
// 導(dǎo)出變量
:export {
color: @color;
}2：在js中引入less對象
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)這個方法也可以應(yīng)用到主題切換里
到此這篇關(guān)于如何在js中引入less的變量的文章就介紹到這了,更多相關(guān)js引入less變量內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JavaScript常用8種數(shù)組去重代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-09-09
JavaScript 未結(jié)束的字符串常量常見解決方法
做JavaScript的時候,發(fā)現(xiàn)老是出現(xiàn)錯誤：“未結(jié)束的字符串常量”. 自己找了下應(yīng)該是傳參數(shù)的時候,有特殊字符引起的.網(wǎng)上也找了下,也有好多出現(xiàn)這種情況.做下總結(jié),以方便以后查閱.2010-01-01
常見的重復(fù)提交問題如點擊提交按鈕兩次、點擊刷新按鈕等等，下面為大家整理了防止表單重復(fù)提交的方法，感興趣的朋友可以參考下2013-11-11
在vue項目中,和后臺交互獲取數(shù)據(jù)這塊,我們通常使用的是axios庫,下面這篇文章主要給大家介紹了關(guān)于ts封裝axios并處理返回值的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
微信小程序?qū)崿F(xiàn)頂部普通選項卡效果(非swiper)
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)頂部普通選項卡效果，非swiper，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
篇文章主要為大家詳細介紹了JavaScript?異步ajax，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下嗎，希望能夠給你帶來幫助2022-03-03
和同事討論js時，我說較為理想的狀態(tài)是，把js當(dāng)一把好用的匕首，隨手拿來，捅一刀子就走。話雖如此，但現(xiàn)實生活中大部分時候的情況是不理想的。2009-06-06
本文主要介紹了快速排序思想與冒泡排序思想。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
瀏覽器是否支持html5的canvas,我們可以使用js來判斷下，具體如下，喜歡的朋友可以收藏2013-11-11
JavaScript數(shù)據(jù)類型轉(zhuǎn)換簡單方法舉例
JavaScript是一種無類型語言，但同時JavaScript提供了一種靈活的自動類型轉(zhuǎn)換的處理方式,下面這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)據(jù)類型轉(zhuǎn)換的相關(guān)資料,需要的朋友可以參考下2023-12-12