如何在js中引入less的變量

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

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

less的定義

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

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

variables.module.less

@color: #FF4754;
// 導出變量
:export {
  color: @color; 
}

2：在js中引入less對象

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

3：輸出結果

使用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)

這個方法也可以應用到主題切換里

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

您可能感興趣的文章:

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