详解如何在Javascript和Sass之间共享变量

在环境之间共享变量是编程的圣杯。以下是在Javascript和

Sass（或CSS！）之间共享变量的方法。

随着大型单页应用程序的兴起，Javascript和CSS越来越交织在一起。通常在两个值之间复制值（例如，与React的CSSTransitionGroup一起使用的动画持续时间或将品牌颜色传递到图形库中）。但是，保持两个具有相同值的副本不可避免地导致仅更新一个副本并最终导致令人沮丧的错误。幸运的是，使用webpack和CSS模块，有更好的方法。在此博客文章中，我们将通过上述示例为共享动画持续时间，探讨如何在脚本和样式之间共享变量CSSTransitionGroup。

第一步是安装我们的依赖项：

npm install sass-loader node-sass webpack --save-dev

接下来，我们需要配置webpack以便使用，sass-loader以便我们可以从Javascript访问我们的Sass代码。

  // webpack.config.js
  module.exports = {
   module: {
    rules: [
     {
      test: /\.css$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
     }
    ]
   }
  }

现在开始有趣的部分。我们在Sass中定义实际的变量值，并将其导出到Javascript。CSS模块有一个名为的简洁实用程序:export。该:export指令的工作原理基本上类似于ES6的export关键字。您的Sass代码将导出一个对象，其中包含要在Javascript中使用的变量名称及其关联的值。这些值都导出为字符串。

  // styles/animation.scss
  $animation-length: 250;
  $animation-length-ms: $animation-length + 0ms;

  :export {
   animationMillis: $animation-length-ms;
  }

  .component-enter {
   ...

   transition: all $animation-length-ms ease-in;
  }

您会注意到，我们首先在一个变量中声明整数值，然后在另一个变量中将0ms其添加。这样一来，我们就只能导出，"250"而不是"250ms"在Javascript方面更容易解析（将0ms数字强制将其“类型”插入ms）。

现在，在Javascript中，我们只需要从样式表中导入样式，然后从导出的变量中解析出一个int即可！

// js/animation.js
import styles from '../styles/animation.scss'
import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup'

const millis = parseInt(styles.animationMillis)

...

<CSSTransitionGroup
 transitionName="component"
 transitionEnterTimeout={millis}
 transitionLeaveTimeout={millis}
/>

...

这种方法非常简单，但是当您避免在Javascript和Sass之间同步更改的麻烦时，它会成倍地回报。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Javascript面象对象成员、共享成员变量实验

    Javascript面象对象成员、共享成员变量实验

    1)Javascript对象成员实验: 复制代码 代码如下: var f = function d() { this.a = "a";/*这句运行后不存在f.a也不存在d.a存在一个window.a*/ var b = "b";/*局部变量*/ }; var o = { ff: function () { var a = "a"; /*局部变量*/ this.b = "b"; /*这句运行后存在o.b*/ } }; funct

  • 详解如何在Javascript和Sass之间共享变量

    在环境之间共享变量是编程的圣杯.以下是在Javascript和 Sass(或CSS!)之间共享变量的方法. 随着大型单页应用程序的兴起,Javascript和CSS越来越交织在一起.通常在两个值之间复制值(例如,与React的CSSTransitionGroup一起使用的动画持续时间或将品牌颜色传递到图形库中).但是,保持两个具有相同值的副本不可避免地导致仅更新一个副本并最终导致令人沮丧的错误.幸运的是,使用webpack和CSS模块,有更好的方法.在此博客文章中,我们将通过上述示例为共享动画持

  • 详解如何在Javascript中使用Object.freeze()

    Object.freeze() Object.freeze() 方法可以冻结一个对象.一个被冻结的对象再也不能被修改:冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性.可配置性.可写性,以及不能修改已有属性的值.此外,冻结一个对象后该对象的原型也不能被修改.freeze() 返回和传入的参数相同的对象 用法 const objectExample = { prop1: 20, prop2: "羊先生" }; // 默认情况下,我们可以根据需

  • 详解如何在JavaScript中使用装饰器

    目录 安装 vite配置 webpack配置 使用 语法: @+函数名 类装饰器 带参数的修饰器 类成员装饰器 多个装饰器的执行顺序 应用 延迟 节流 防抖 Decorator装饰器是ES7的时候提案的特性,目前处于Stage 3候选阶段(2022年10月). 装饰器简单来说就是修改类和类方法的语法糖,很多面向对象语言都有装饰器这一特性. 为了使用装饰器特性,我们需要用进行babel转义.这里需要用到的是@babel/plugin-proposal-decorators. 安装 npm inst

  • 详解如何在C#/.NET Core中使用责任链模式

    最近我有一个朋友在研究经典的"Gang Of Four"设计模式.他经常来询问我在实际业务应用中使用了哪些设计模式.单例模式.工厂模式.中介者模式 - 都是我之前使用过,甚至写过相关文章的模式.但是有一种模式是我还没有写过文章,即责任链模式. 什么是责任链?# 责任链模式(之前我经常称之为命令链模式)是一种允许以使用分层方式"处理"对象的模式.在维基百科中的经典定义是 在面向对象设计中,责任链模式是一种由命令对象源及其一系列处理对象组成的设计模式.每个处理对象包含了

  • 详解如何在Ubuntu 20.04上安装Xrdp服务器(远程桌面)

    Xrdp 是一个微软远程桌面协议(RDP)的开源实现,它允许你通过图形界面控制远程系统.通过 RDP,你可以登录远程机器,并且创建一个真实的桌面会话,就像你登录本地机器一样. 这篇指南讲解如何在 Ubuntu 20.04 上安装和配置 Xrdp 服务器. 一.安装桌面环境 Ubuntu 服务器通常使用命令行进行管理,并且默认没有安装桌面环境.如果你正在运行 Ubuntu 桌面版,忽略这一步. 在 Ubuntu 源仓库有很多桌面环境供你选择.一个选择是安装 Gnome,它是 Ubuntu 20.0

  • 详解React Native与IOS端之间的交互

    详解React Native与IOS端之间的交互

    前置准备 首先最好了解一点关于 oc 的语法知识 1.创建声明文件nativeModule.h #import <Foundation/Foundation.h> #import <React/RCTBridgeModule.h> @interface nativeModule : NSObject <RCTBridgeModule> @end 2.创建文件nativeModule.m #import <Foundation/Foundation.h> #i

  • 详解如何在Go服务中做链路追踪

    目录 1. 使用全局 map 来实现 2. 使用 Context 来实现 3. 小结 使用 Go 语言开发微服务的时候,需要追踪每一个请求的访问链路,这块在 Go 中目前没有很好的解决方案. 在 Java 中解决这个问题比较简单,可以使用 MDC,在一个进程内共享一个请求的 RequestId. 在 Go 中实现链路追踪有两种思路:一种是在项目中使用一个全局的 map, key 是 goroutine 的唯一 Id,value 是 RequestId,另一种思路可以使用 context.Cont

  • 详解如何利用JavaScript绘制堆叠柱状图

    详解如何利用JavaScript绘制堆叠柱状图

    效果图 this.state.workChartList的数据结构 const workChartList = [ { name: "居民热线", chartData: [5, 8, 8, 7, 0, 5, 6, 5, 9, 5, 4, 7] }, { name: "日常调度类", chartData: [5, 6, 8, 8, 5, 8, 5, 9, 8, 7, 3, 6] }, { name: "调度预警类", chartData: [6,

  • 详解如何在Vue3使用＜script lang=“ts“ setup＞语法糖

    目录 迁移组件 隐式返回 defineProps defineEmits 默认关闭和defineExpose Vue 3.2 引入了语法,这是一种稍微不那么冗长的声明组件的方式.您可以通过向 SFC 的元素添加属性来启用它,然后可以删除组件中的一些样板.script setupsetupscript 让我们举一个实际的例子,并将其迁移到这个语法! 迁移组件 以下组件有两个道具(要显示的和一个标志).基于这两个道具,计算模板中显示的小马图像的URL(通过另一个组件).该组件还会在用户单击它时发出一

  • 详解如何在Vue中动态添加类名

    目录 静态和动态类 有条件的类名 使用数组语法 使用对象语法 与自定义组件一起使用 快速生成类名 使用计算属性来简化类 能够向组件添加动态类名是非常强大的功能.它使我们可以更轻松地编写自定义主题,根据组件的状态添加类,还可以编写依赖于样式的组件的不同变体. 添加动态类名与在组件中添加 prop :class="classname"一样简单.无论classname的计算结果是什么,都将是添加到组件中的类名. 当然,对于Vue中的动态类,我们可以做的还有很多.在本文中,我们将讨论很多内容:

随机推荐