Shulou(Shulou.com)06/03 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.