How to use css variable in JS
This article mainly introduces how to use css variables in JS, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.
How to use css variables in JS
Use the: export keyword to export a js object in the less/scss file.
$menuText:#bfcbd9;$menuActiveText:#409EFF;$subMenuActiveText:#f4f4f5;// $menuBg:#304156;$menuBg:#304156;$menuHover:#263445;$subMenuBg:#1f2d3d;$subMenuHover:#001528;$backWhite:#ffffff;$sideBarWidth: 210pxteric export {menuText: $menuText; menuActiveText: $menuActiveText; subMenuActiveText: $subMenuActiveText; menuBg: $menuBg; menuHover: $menuHover; subMenuBg: $subMenuBg; subMenuHover: $subMenuHover; sideBarWidth: $sideBarWidth; backWhite: $backWhite;}
Refer to it in the required js file or module.
Import style from 'index.scss'console.log (style.menuText)
Vue file
Import style from 'index.scss'export default {computed: {style () {return style}
Realization principle
Webpack: enable CSS Modules in the project with css-loader.
CSS Modules:CSS Modules solves the two problems of style import and export through ICSS internally. Corresponding to: import and: export, two new pseudo-classes.
Attached: javascript keyword of export
The Javascript keyword (Reserved Words) refers to those words that have a specific meaning in the Javascript language and become part of the Javascript syntax. The Javascript keyword cannot be used as variable and function names. Using the Javascript keyword as the variable name or function name will cause Javascript to have compilation errors during loading.
Javascript keyword list:
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 future keyword list:
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
Thank you for reading this article carefully. I hope the article "how to use css variables in JS" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!
