在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变量内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JavaScript检测浏览器是否支持CSS变量代码实例

    JavaScript可以同样式进行交互,你可以通过编写程序来动态改变文档上元素的样式. 有三种方法可以实现这样的效果: 控制样式表-可以添加.删除.修改样式表. 控制样式规则-可以添加.删除.修改样式规则. 控制DOM中的单个元素-可以不依赖样式表来修改元素样式. JavaScript 检测浏览器是否支持 CSS 变量: const isSupported = window.CSS && window.CSS.supports && window.CSS.supports(

  • 小程序中使用css var变量(使js可以动态设置css样式属性)

    使用sass,stylus可以很方便的使用变量来做样式设计,其实css也同样可以定义变量,在小程序中由于原生不支持动态css语法,so,可以使用css变量来使用开发工作变简单. 基本用法 基础用法 <!--web开发中顶层变量的key名是:root,小程序使用page--> page { --main-bg-color: brown; } .one { color: white; background-color: var(--main-bg-color); margin: 10px; } .

  • 在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; $sideBarW

  • 原生js中ajax访问的实例详解

    原生js中ajax访问的实例详解 form表单中 登录名: 失去光标即触发事件 function createXmlHttp() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { try {// Internet Explorer xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (

  • Node.Js中实现端口重用原理详解

    本文介绍了Node.Js中实现端口重用原理详解,分享给大家,具体如下: 起源,从官方实例中看多进程共用端口 const cluster = require('cluster'); const http = require('http'); const numCPUs = require('os').cpus().length; if (cluster.isMaster) { console.log(`Master ${process.pid} is running`); for (let i =

  • js中Object.create实例用法详解

    1.用Object.create()方法创建新对象,并使用现有对象提供新对象的proto. 2.提供两个参数,第一个是新创建的原型对象,第二个是为新创建的对象添加属性的对象. 实例 // father 对象 let father = { name: 'father', friend: ['abby', 'bob'] } // 生成新实例对象 child1 let child1 = Object.create(father) // 更改值类型属性 child1.name = '修改了name' c

  • JS中自定义事件与观察者模式详解

    目录 一.前言 二.观察者模式优缺点 三.代码实现 四.DOM自定义事件API 一.前言 观察者模式 也称发布-订阅模式 . 模型-视图模式 .当对象间存在一对多关系时,则使用观察者模式(Observer Pattern).比如,当一个对象被修改时,则会自动通知依赖它的对象.观察者模式属于行为型模式. 观察者模式: 类似我们在微信平台订阅了公众号 , 当它有新的文章发表后,就会推送给我们所有订阅的人. 我们作为订阅者不必每次都去查看这个公众号有没有新文章发布,公众号作为发布者会在合适时间通知我们

  • JS中offset和匀速动画详解

    offset简介 我们知道,三大家族包括:offset/scroll/client.今天来讲一下offset,以及与其相关的匀速动画. offset的中文是:偏移,补偿,位移. js中有一套方便的获取元素尺寸的办法就是offset家族.offset家族包括: offsetWidth offsetHight offsetLeft offsetTop offsetParent 下面分别介绍. 1.offsetWidth 和 offsetHight 用于检测盒子自身的宽高+padding+border

  • Angular.js中控制器之间的传值详解

    前言 每个controller都会有自己的scope,所有的scope都是属于 $rootScope的子或者子的子... 那么问题就好解决了,通过 $rootScope.$broadcast 广播的事件每个controller都能收到事件 另外,我的经验是,尽量不要用event传数据.应该建立一个service来保存数据,并且设置相应getter/setter,具体如下: 每个controller依赖service, call service.setter(...) 统一的service.set

  • Vue.js中数组变动的检测详解

    前言 最近在尝试用Vue.js重构公司的现有业务代码,组件化的设计思路和MVVM的思想让我深深沉迷于其中.但是是踩到了不少坑,就比如这篇文章介绍的数组绑定后的更新检测. 相信大家都知道Observer,Watcher,vm 可谓 Vue 中比较重要的部分,检测数据变动后视图更新的重要环节.在 vue.js中$watch的用法示例 中,我们讨论了如何实现基本的 watch . 接下来,我们来看看如何实现数组变动检测. 例子: // 创建 vm let vm = new Vue({ data: {

  • js中 javascript:void(0) 用法详解

    javascript:void(0)表示不做任何动作.如: 复制代码 代码如下: <a href="javascript:void(0);" onclick="alert('ok');"></a> 这里表示这个链接不做跳转动作,执行onClick事件. 我想使用过ajax的都常见这样的代码: 复制代码 代码如下: <a href="javascript:doTest2();void(0);">here</

  • js中的preventDefault与stopPropagation详解

    首先讲解一下js中preventDefault和stopPropagation两个方法的区别:preventDefault方法的起什么作用呢?我们知道比如<a href="http://www.baidu.com">百度</a>,这是html中最基础的东西,起的作用就是点击百度链接到http://www.baidu.com,这是属于<a>标签的默认行为,而preventDefault方法就是可以阻止它的默认行为的发生而发生其他的事情.看一段代码大家就

随机推荐