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

假设我们在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. python UI自动化之鼠标事件

    使用 pyautogui 模块:import pyautogui 1. 鼠标移动至:1629,875是电脑屏幕坐标:0.25是移动时间 pyautogui.moveTo(1629,875, durat ...

  2. linux 源码搭建Kafka集群，100%有效

    kafka源码编译安装 准备三台服务器 192.168.xxx.xxx 192.168.xxx.xxx 192.168.xxx.xxx 安装kafka前需先安装JDK和zookeeper如下步骤: J ...

  3. 5、Python断言及常用断言函数总结

    Python断言 Python assert 语句,又称断言语句,可以看做是功能缩小版的 if 语句,它用于判断某个表达式的值,如果值为真,则程序可以继续往下执行:反之,Python 解释器会报 As ...

  4. shell脚本——awk

    目录 一.awk 1.1.awk简介 1.2.基本格式 1.3.工作原理 1.4.常见的内建变量(可直接用) 按字段输出文本 1.5.awk和getline 有重定向符 无重定向符 1.6.指定分隔符 ...

  5. SpringBoot开发三

    需求介绍-SpringMVC 服务层的三层架构:表现层,业务层,数据层,浏览器访问服务器先访问表现层,期待表现层返回一些数据,表现层呢就访问业务层处理业务,而业务层在处理业务的时候会调用数据层请求数据 ...

  6. CobaltStrike去除流量特征

    CobaltStrike去除流量特征 ​普通CS没有做流量混淆会被防火墙拦住流量,所以偶尔会看到CS上线了机器但是进行任何操作都没有反应.这里尝试一下做流量混淆.参考网上的文章,大部分是两种方法,一种 ...

  7. 一篇文章让你搞懂如何通过Nginx来解决跨域问题

    Nginx跨域实现   首先大家要搞清楚什么是跨域,为什么会有跨域情况的出现.哪些情况属于跨域? 跨域:由于浏览器的同源策略,即属于不同域的页面之间不能相互访问各自的页面内容 注:同源策略,单说来就是 ...

  8. 解密优酷智能生产技术，看 AI 赋能内容数字化

    2021 年,随着社会节奏的加快,用户碎片化消费时间不断增加,当前短视频的消费用户规模已超 7.73 亿人,短视频的市场规模超过 2000 亿元.短视频行业发展迅速,但也存在低质内容泛滥,精品内容稀缺 ...

  9. Linux搭建Snmp服务

    1:安装snmp yum install net-snmp net-snmp-devel net-snmp-libs net-snmp-utils php-snmp 上面的程序首先会校验需要升级的文件 ...

  10. Python3 * 和 ** 运算符

    1.算数运算 *  代表乘法 ** 代表乘方 1>>> 2 * 52103>>> 2 ** 5432 2.函数形参 *args 和 **kwargs 主要用于函数定 ...