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

假设我们在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. 如何根治慢SQL？

    本文摘自:CodeSheep 今天和大家聊一个常见的问题:慢SQL. 包括以下内容: 慢SQL的危害 SQL语句的执行过程 存储引擎和索引的那些事儿 慢SQL解决之道 后续均以MySQL默认存储引擎I ...

  2. Check Directory Existence in Shell

    The following command in one line can check if a directory exists. You can check the return value (& ...

  3. tomcat及springboot实现Filter、Servlet、Listener

    tomcat实现: 核心类org.apache.catalina.startup.ContextConfig //支持注解 see:org.apache.catalina.deploy.WebXml ...

  4. Sqli-Labs less32-37

    Less-32 前置基础知识:宽字节注入 参考链接: https://blog.csdn.net/helloc0de/article/details/76180190 https://blog.csd ...

  5. SQL 练习20

    查询各科成绩前三名的记录 select a.sid,a.cid,a.score from sc a left join sc b on a.cid = b.cid and a.score<b.s ...

  6. SpringBoot启动异常 Process finished with exit code 1

    记录一下一个报错 : < Springboot项目启动之后直接 Process finished with exit code 1 1. 是否有spring-boot-starter-web依赖 ...

  7. NOIP 模拟 $38\; \rm b$

    题解 \(by\;zj\varphi\) 考虑转化问题,将计算最大公约数换为枚举最大公约数. 设 \(sum_i\) 为最大公约数为 \(i\) 的方案数,可以容斥求解,\(sum_i=f_i-\su ...

  8. NOIP 模拟 $30\; \rm 毛二琛$

    题解 \(by\;zj\varphi\) 原题问的就是对于一个序列,其中有的数之间有大小关系限制,问有多少种方案. 设 \(dp_{i,j}\) 表示在前 \(i\) 个数中,第 \(i\) 个的排名 ...

  9. 如何快速排查发现redis的bigkey？4种方案一次性给到你！

    本篇文章将以redis的bigkey为主题进行技术展开,通过从认识redis的高性能,bigkey的危害.存在原因.4种解决方案,到模拟实战演练的介绍方式,来跟大家一起认识.探讨和学习redis. 先 ...

  10. 从元素抽取属性，文本和HTML

    问题 在解析获得一个Document实例对象,并查找到一些元素之后,你希望取得在这些元素中的数据. 方法 要取得一个属性的值,可以使用Node.attr(String key) 方法 对于一个元素中的 ...