在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)
檔案
import style from 'index.scss' export default { computed:{ style(){ return style } } }
實現原理
Webpack:結合css-loader在專案中啟用CSS Modules。
CSS Modules:CSS Modules 內部通過ICSS來解決樣式匯入和匯出這兩個問題。分別對應:import和:export兩個新增的偽類。
附:export之關鍵字
script關鍵字(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 、 whiledebugger 、 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 、 interDGArNoPlTface 、 public 、 transient
const 、float 、 long 、short 、 volatile
總結
到此這篇關於在JS中如何使用css變數的文章就介紹到這了,更多相關JS使用css變數內容請搜尋我們以前的文章或繼www.cppcns.com續瀏覽下面的相關文章希望大家以後多多支援我們!