在JS中如何使用css變量詳解
在JS中如何使用css變量
使用:export關(guān)鍵字在less/scss文件中導(dǎo)出一個(gè)js對(duì)象。
$menuText:#bfcbd9; $menuActiveText:#409EFF; $subMenuActiveText:#f4f4f5; // $menuBg:#304156; $menuBg:#304156; $menuHover:#263445; $subMenuBg:#1f2d3d; $subMenuHover:#001528; $backWhite:#ffffff; $sideBarWidth: 210px; :export { menuText: $menuText; menuActiveText: $menuActiveText; subMenuActiveText: $subMenuActiveText; menuBg: $menuBg; menuHover: $menuHover; subMenuBg: $subMenuBg; subMenuHover: $subMenuHover; sideBarWidth: $sideBarWidth; backWhite: $backWhite; }
在需要的js文件或模塊中引用。
import style from 'index.scss' console.log(style.menuText)
vue文件
import style from 'index.scss' export default { computed:{ style(){ return style } } }
實(shí)現(xiàn)原理
Webpack:結(jié)合css-loader在項(xiàng)目中啟用CSS Modules。
CSS Modules:CSS Modules 內(nèi)部通過(guò) ICSS 來(lái)解決樣式導(dǎo)入和導(dǎo)出這兩個(gè)問(wèn)題。分別對(duì)應(yīng) :import 和 :export 兩個(gè)新增的偽類(lèi)。
附:export之javascript關(guān)鍵字
Javascript關(guān)鍵字(Reserved Words)是指在Javascript語(yǔ)言中有特定含義,成為Javascript語(yǔ)法中一部分的那些字。Javascript關(guān)鍵字是不能作為變量名和函數(shù)名使用的。使用Javascript關(guān)鍵字作為變量名或函數(shù)名,會(huì)使Javascript在載入過(guò)程中出現(xiàn)編譯錯(cuò)誤。
Javascript關(guān)鍵字列表:
break 、 delete 、 function 、 return 、 typeof
case 、 do 、 if 、switch 、 var
catch 、 else 、 in 、 this 、void
continue 、 false 、 instanceof 、 throw 、 while
debugger 、 finally 、 new 、 true 、 with
default 、 for 、 null 、 try
Javascript未來(lái)關(guān)鍵字列表:
abstract 、 double 、 goto 、 native 、 static
boolean 、enum 、implements 、package 、 super
byte 、 export 、 import 、 private 、 synchronized
char 、 extends 、 int 、 protected 、 throws
class 、final 、 interface 、 public 、 transient
const 、float 、 long 、short 、 volatile
總結(jié)
到此這篇關(guān)于在JS中如何使用css變量的文章就介紹到這了,更多相關(guān)JS使用css變量?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
layer.js之回調(diào)銷(xiāo)毀對(duì)話框的例子
今天小編就為大家分享一篇layer.js之回調(diào)銷(xiāo)毀對(duì)話框的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09自己使用js/jquery寫(xiě)的一個(gè)定制對(duì)話框控件
自己做一個(gè)通用的控件,雖然不是絕對(duì)通用啦,但在我這個(gè)項(xiàng)目里還是可以隨意調(diào)用的,思想的話也可以借鑒到別的項(xiàng)目中2014-05-05JavaScript中const、var和let區(qū)別淺析
在JavaScript中有三種聲明變量的方式:var、let、const。但是有朋友不清楚這三種聲明變量的區(qū)別,下面腳本之家小編給大家詳細(xì)介紹下js中const、var和let的區(qū)別,感興趣的朋友一起看看吧2016-10-10實(shí)例詳解JavaScript中setTimeout函數(shù)的執(zhí)行順序
關(guān)于javascript的運(yùn)行機(jī)制大家都應(yīng)該有所了解了吧,其實(shí)javascript是一個(gè)單線程的機(jī)制,但是因?yàn)殛?duì)列的關(guān)系它的表現(xiàn)會(huì)讓我們感覺(jué)是一個(gè)多線程的錯(cuò)覺(jué)。下面這篇文章通過(guò)實(shí)例主要給大家介紹了關(guān)于JavaScript中setTimeout函數(shù)執(zhí)行順序的相關(guān)資料,需要的朋友可以參考下。2017-07-07js局部刷新頁(yè)面時(shí)間具體實(shí)現(xiàn)
這篇文章介紹了js局部刷新頁(yè)面時(shí)間具體實(shí)現(xiàn),需要的朋友可以參考一下2013-07-07

JS實(shí)現(xiàn)萬(wàn)億數(shù)字轉(zhuǎn)中文的代碼詳解