在JS中如何使用css變量詳解
在JS中如何使用css變量
使用:export關鍵字在less/scss文件中導出一個js對象。
$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 } } }
實現原理
Webpack:結合css-loader在項目中啟用CSS Modules。
CSS Modules:CSS Modules 內部通過 ICSS 來解決樣式導入和導出這兩個問題。分別對應 :import 和 :export 兩個新增的偽類。
附:export之javascript關鍵字
Javascript關鍵字(Reserved Words)是指在Javascript語言中有特定含義,成為Javascript語法中一部分的那些字。Javascript關鍵字是不能作為變量名和函數名使用的。使用Javascript關鍵字作為變量名或函數名,會使Javascript在載入過程中出現編譯錯誤。
Javascript關鍵字列表:
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未來關鍵字列表:
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
總結
到此這篇關于在JS中如何使用css變量的文章就介紹到這了,更多相關JS使用css變量內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
JavaScript中const、var和let區(qū)別淺析
在JavaScript中有三種聲明變量的方式:var、let、const。但是有朋友不清楚這三種聲明變量的區(qū)別,下面腳本之家小編給大家詳細介紹下js中const、var和let的區(qū)別,感興趣的朋友一起看看吧2016-10-10實例詳解JavaScript中setTimeout函數的執(zhí)行順序
關于javascript的運行機制大家都應該有所了解了吧,其實javascript是一個單線程的機制,但是因為隊列的關系它的表現會讓我們感覺是一個多線程的錯覺。下面這篇文章通過實例主要給大家介紹了關于JavaScript中setTimeout函數執(zhí)行順序的相關資料,需要的朋友可以參考下。2017-07-07