一般做共享变量用于主题功能

假设我们在xxx.scss中声明了一个 theme:blue，我们在 js 中该怎么获取这个变量呢？我们可以通过import variables from '@/styles/variables.scss'将变量取出来,然后通过js去改变变量的值即可,在做主题时还需要用到浏览器的cookie缓存,当我们改变主题颜色时在改变sass变量的色值时将颜色储存进cookie中,在下次访问页面时从cookie中取出重新赋给sass即可完成主题的持久化

声明:

取值:

赋值:

sass和js的联动(共享变量)的更多相关文章

  1. [js开源组件开发]js手机联动选择地区仿ios 开源git

    js手机联动选择地区 前言:由于网上找到了一个mobiscrool,比较全,但是不开源,只能试用15天,正式版竟然要三千块钱,穷人只能自己动手,写了个只针对弹窗地区选择的. 本站点所有的资源均在git ...

  2. [js开源组件开发]js手机联动选择日期 开源git

    js手机联动选择日期 这里在前面的<js手机联动选择地区>的基础上,改造数据源之后形成的一个日期的选择器,当然你可以使用之前的PC上模式的<日期控件>,它同时也支持手机端,ht ...

  3. [JS]以下是JS省市联动菜单代码

    以下是JS省市联动菜单代码: 代码一: <html> <head> <title></title> <script language=" ...

  4. JS省市区联动效果

    省市区联动下拉效果在WEB中应用非常广泛,尤其在电商网站最为常见.一般使用Ajax实现无刷新下拉联动.利用jQuery,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果. 首先我们可以看 ...

  5. js 多级联动（省、市、区）

      js 多级联动(省.市.区) CreateTime--2018年4月9日17:10:38 Author:Marydon 方式一: 数据从数据库获取,ajax实现局部刷新 方式二: 数据从json文 ...

  6. 省市区js三级联动（原创）

    看了一些网上的js三级联动,但感觉不是缺这,就是少那,决定亲自操刀写了一个,现记录如下,以备后用! <!DOCTYPE html> <html> <head> &l ...

  7. 原生js二级联动

    今天说的这个是原生js的二级联动,在空白页面里动态添加并作出相对应的效果. 1 //创建两个下拉列表 select标签 是下拉列表 var sel = document.createElement(& ...

  8. 原生js的联动全选

    开发应用中有很多工具可以使用,下面介绍一个原生js写的联动全选思路!!! <!DOCTYPE html> <html lang="en"> <head ...

  9. 前端js 省市联动

    代码下载地址 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

随机推荐

  1. IOC（概念和原理）

    什么是 IOC (1)控制反转,把对象创建和对象之间的调用过程,交给 Spring 进行管理 (2)使用 IOC 目的:为了耦合度降低 (3)做入门案例就是 IOC 实现 IOC 底层原理 xml 解 ...

  2. oracle、postgres、mysql数据库的建库、创建用户、导人导出备份总结

    本文包含的内容:使用命令操作oracle.postgres.mysql的导入导出,登录到数据,创建用户 注:我在公司使用的是Center OS操作系统,所以oracle和postgres均是在Linu ...

  3. Linux 中的虚拟网络接口

    独立博客地址:https://ryan4yin.space/posts/linux-virtual-network-interfaces/ 本文用到的字符画工具:vscode-asciiflow2 L ...

  4. Java 横向技术 Spring框架【笔记】

    Java横向技术 spring框架[笔记] Spring 的两大特性是什么? AOP(Aspect Oriented Programming,面向切面编程)与 IOC(Inverse of Contr ...

  5. JavaSE-方法

    何谓方法 比如之前用到的 System.out.println(); System为一个类:out为这个类的一个输出对象:println()为这个对象的方法 调用System类中out输出对象的pri ...

  6. Pikachu-php反序列化、XXE、SSRF模块

    一.PHP反序列化 理解这个漏洞需要明白php中的两个函数,serialize(),unserialize() 1)序列化serialize()序列化说通俗点就是把一个对象变成可以传输的字符串,比如下 ...

  7. IP实验笔记

    代码: 对LSW1: Vlan 10 Interface ethernet 0/0/1 Port link-type access Port default vlan 10 Interface eth ...

  8. Linux UDP服务器编程

    UDP主要使用sendto()和recvfrom() recvfrom() 函数原型如下: #include <sys/types.h> #include <sys/socket.h ...

  9. JVM快速扫盲篇

    JVM虚拟机基础 JVM虚拟机结构 vm的整体结构大致如下: 类加载器:类加载器用来加载Java类到JVM虚拟机中,源代码程序.java文件在经过编译器编译之后就被转换成字节代码.class文件,类加 ...

  10. LeetCoded第2题题解--两数相加

    2.两数相加 给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表 ...