How to use css variables in JS

How to use css variables in JS

Use the :export keyword to export a js object in a less/scss file.

$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;
}

Reference 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
        }
    }
}

Implementation principle

Webpack: Combine with css-loader to enable CSS Modules in your project.

CSS Modules: CSS Modules uses ICSS internally to solve the problems of style import and export. They correspond to the two newly added pseudo-classes: :import and :export.

Appendix: export javascript keyword

Javascript keywords (Reserved Words) refer to those words that have specific meanings in the Javascript language and become part of the Javascript syntax. Javascript keywords cannot be used as variable names or function names. Using Javascript keywords as variable names or function names will cause compilation errors during the Javascript loading process.

Javascript Keywords 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 keywords 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

Summarize

This is the end of this article about how to use css variables in JS. For more relevant content about using css variables in JS, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!