如何在js中引入less的變量
更新時間：2023年07月18日 11:22:48 作者：曹小維
這篇文章主要介紹了如何在js中引入less的變量,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
less的定義
less 是一門 CSS 預(yù)處理語言，可以通過預(yù)處理器把less文件編譯成css，less增加了變量、混合（mixin）、函數(shù)等功能，彌補(bǔ)了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瀏覽器內(nèi)置的四大Web Worker的使用詳解
webwork是通過js的方式喚起瀏覽器的內(nèi)置api使用,輔助前端計算的一種方式,就像fetch、ajaix那樣喚起瀏覽器的接口查詢一樣,下面小編就為大家簡單介紹一下吧2025-11-11
這篇文章主要介紹了js實現(xiàn)緩沖運(yùn)動效果的方法,涉及javascript操作元素運(yùn)動的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
webpack4 配置 ssr 環(huán)境遇到“document is not defined”
這篇文章主要介紹了webpack4 配置 ssr 環(huán)境遇到“document is not defined”，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
Mock.js的安裝與使用教程(擺脫后端同學(xué)的束縛)
Mock功能可以根據(jù)接口/數(shù)據(jù)結(jié)構(gòu)定義、Mock規(guī)則配置、Mock?期望配置，自動生成模擬數(shù)據(jù),且使用者可以根據(jù)需要靈活構(gòu)造各種結(jié)構(gòu)的接口數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于Mock.js的安裝與使用的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)容器模塊左右拖動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要介紹了antd項目如何實現(xiàn)彩蛋效果,首先在components目錄下創(chuàng)建Transform目錄，包括index.css、index.js，index.js是主要的邏輯代碼，下面對代碼進(jìn)行分析，需要的朋友可以參考下2022-09-09
js 通用javascript函數(shù)庫整理，學(xué)習(xí)js的朋友可以參考下。2011-08-08
借助script進(jìn)行Http跨域請求:JSONP實現(xiàn)原理及代碼
script元素的src屬性能設(shè)置URL并發(fā)起HTTP GET請求實現(xiàn)腳本操作HTTP可以跨域通信而不受限與同源策略，接下來為大家詳細(xì)介紹下Http跨域請求實現(xiàn)，感興趣的你可以參考下哈2013-03-03
在開始描述touch事件之前，需要先描述一下多觸式系統(tǒng)中特有的touch對象（android和iOS乃至nokia最新的meego系統(tǒng)都模擬了類 似的對象）。這個對象封裝一次屏幕觸摸，一般來自于手指。它在touch事件觸發(fā)的時候產(chǎn)生，可以 通過touch event handler的event對象取到2015-04-04
這篇文章主要介紹了JS eval代碼快速解密實例解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-04-04