当前位置 博文首页 > 文章内容

    在JS中如何使用css变量详解

    作者:shunshunshun18 栏目:未分类 时间:2021-09-02 14:44:52

    本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
    说我们IIS7站长博客,有一篇博文用了他们的图片。
    要求我们给他们一张图片6000元。要不然法院告我们

    为避免不必要的麻烦,IIS7站长博客,全站内容图片下架、并积极应诉
    博文内容全部不再显示,请需要相关资讯的站长朋友到必应搜索。谢谢!

    另祝:版权碰瓷诈骗团伙,早日弃暗投明。

    相关新闻:借版权之名、行诈骗之实,周某因犯诈骗罪被判处有期徒刑十一年六个月

    叹!百花齐放的时代,渐行渐远!



    在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 

    总结