JavaScript 如何与 CSS 和 Sass 共享数据

更新日期: 2020-02-19阅读: 2.4k标签: 数据
来源:css-tricks.com
作者:Marko Ilic
编译:大道至简

JavaScript 与 CSS 已经相生相伴 20 年了,但是要在它们之间共享数据却非常困难。当然,这方面肯定有过一些尝试,不过我想到的是简单而又直观的做法:不需要做代码结构上的改动,而是利用 CSS 自定义属性,甚至是 Sass 变量。


CSS 自定义属性

CSS 自定义属性现在也不算什么稀罕物了。自从浏览器开始支持以来,就能通过 JavaScript 操作自定义属性值。

具体来说,用 JavaScript 操作自定义属性有以下几种方式。第一个是 setProperty :

document.documentElement.style.setProperty("--padding", 124 + "px"); // 124px

还可以用 getComputedStyle ,原因很简单:自定义属性也是样式的一部分,因此也属于计算样式的一部分。

getComputedStyle(document.documentElement).getPropertyValue('--padding') // 124px

同样,还可以用 getPropertyValue 。它可以获取 html 元素的行内样式值:

document.documentElement.style.getPropertyValue("--padding'"); // 124px

注意,自定义属性是有作用域的。也就是说必须从指定元素获取计算后的样式。前面由于我们是 在 :root 里定义的变量,因此要从这个 HTML 元素上获取。


Sass 变量

Sass 是预处理语言,最终要转换成 CSS 才能应用到网站页面上。所以,像 CSS 自定义属性那样用 JavaScript 直接操作是行不通的。

为此,我们需要修改下构建流程。这一步可能不是必须的,因为大部分构建流程配置都已经包含了这些 loader。如果你的项目配置里没有的话,就需要加上如下的 webpack 配置:

module.exports = {
// ...
module: {
rules: [
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader"]
},
// ...
]
}
};

为了让 Sass(准确地说这里是 SCSS)变量在 JavaScript 里可用,我们需要将其导出( export ):

// variables.scss
$primary-color: #fe4e5e;
$background-color: #fefefe;
$padding: 124px;

:export {
primaryColor: $primary-color;
backgroundColor: $background-color;
padding: $padding;
}

这里的 :export 部分是黑魔法所在,webpack 就是用它来导入变量的。这种方法的妙处是可以用 camelCase 格式重命名变量,并可以选择要导出的变量。

然后把 Sass 文件( variables.scss )导入到 JavaScript,这样就可以访问文件里的变量了。神不神奇,意不意外?

import variables from './variables.scss';

/*
{
primaryColor: "#fe4e5e"
backgroundColor: "#fefefe"
padding: "124px"
}
*/

document.getElementById("app").style.padding = variables.padding;

值得一提的是, :export 语法有一些限制:

  • 可以在文件里的任何位置,但必须位于顶层

  • 如果文件里有多个,这些键和值会合并在一起导出

  • 如果某个 exportedKey 有重复,后面的会覆盖前面的

  • exportedValue 可以包含 CSS 声明中的任意有效字符(包括空格)

  • exportedValue 不需要加引号,因为它已经被处理成字符串了。

在 JavaScript 中访问 Sass 变量的应用场景有哪些呢?其中一个是共享媒体查询中的断点配置。比如这里的 breakpoints.scs 文件,可以用于 JavaScript 中的  matchMedia() 方法,来保持断点设置的一致性。

//定义断点的 Sass 变量
$breakpoints: (
mobile: 375px,
tablet: 768px,
// etc.
);

// 用于媒体查询的 Sass variables
$media: (
mobile: '(max-width: #{map-get($breakpoints, mobile)})',
tablet: '(max-width: #{map-get($breakpoints, tablet)})',
// etc.
);

// 导出部分
:export {
breakpointMobile: unquote(map-get($media, mobile));
breakpointTablet: unquote(map-get($media, tablet));
// etc.
}

动画是另一个应用场景。动画的持续时间通常保存在 CSS 中,但是更复杂的动画可能需要 JavaScript 来实现。

// animation.scss
$global-animation-duration: 300ms;
$global-animation-easing: ease-in-out;

:export {
animationDuration: strip-unit($global-animation-duration);
animationEasing: $global-animation-easing;
}

注意,这里在导出变量时用了 strip-unit 函数,目的是为了去掉单位,方便在 JavaScript 里转换数字。

// main.js
document.getElementById('image').animate([
{ transform: 'scale(1)', opacity: 1, offset: 0 },
{ transform: 'scale(.6)', opacity: .6, offset: 1 }
], {
duration: Number(variables.animationDuration),
easing: variables.animationEasing,
});

还有一个是 echarts 图系列的颜色列表。比如饼图的各个部分用的颜色序列,可能也要在图之外使用。为了便于维护,最好是定义在同一个地方。

总之,这样就可以轻松地实现 CSS、Sass 和 JavaScript 之间交换数据,确实挺不错。变量共享让代码变得更简单,实现了 DRY(Dont' Repeat Yourself)。


链接: https://www.fly63.com/article/detial/8671

双向数据绑定与单向数据绑定的各自优势和关系

在react中是单向数据绑定,而在vue和augular中的特色是双向数据绑定。为什么会选择两种不同的机制呢?我猜测是两种不同的机制有不同的适应场景,查了一些资料后,总结一下。

原生JS数据绑定的实现

双向数据绑定是非常重要的特性 —— 将JS模型与HTML视图对应,能减少模板编译时间同时提高用户体验。我们将学习在不使用框架的情况下,使用原生JS实现双向绑定 —— 一种为Object.observe

JavaScript判断数据类型的多种方法【 js判断一个变量的类型】

js判断数据类型的多种方法,主要包括:typeof、instanceof、 constructor、 prototype.toString.call()等,下面就逐一介绍它们的异同。

javascript中的typeof返回的数据类型_以及强制/隐式类型转换

由于js为弱类型语言拥有动态类型,这意味着相同的变量可用作不同的类型。 typeof 运算符返回一个用来表示表达式的数据类型的字符串,目前typeof返回的字符串有以下这些: undefined、boolean、string、number、object、function、“symbol

使用typeof obj===‘object’潜在的问题,并不能确定obj是否是一个对象?

在js中我们直接这样写typeof obj===‘object’有什么问题呢?发现Array, Object,null都被认为是一个对象了。如何解决这种情况,能保证判断obj是否为一个对象

js进制数之间以及和字符之间的转换

js要处理十六进制,十进制,字符之间的转换,发现有很多差不多且书写不正确的方法.一个一个实践才真正清楚如何转换,现在来记录一下它们之间转换的方法。

js判断数字是奇数还是偶数的2种方法实现

奇数和偶数的判断是数学运算中经常碰到的问题,这篇文章主要讲解通过JavaScript来实现奇偶数的判断。2种判断方法:求余% 、&1

js算法_判断数字是否为素数/质数

质数又称素数。指在一个大于1的自然数中,除了1和此整数自身外,没法被其他自然数整除的数。比如100以内共25个,js实现代码如下。

Js数据类型转换_JavaScript 那些不经意间发生的数据类型自动转换

JavaScript自动类型转换真的非常常见,常用的一些便捷的转类型的方式,都是依靠自动转换产生的。比如 转数字 : + x 、 x - 0 , 转字符串 : \\\"\\\" + x 等等。现在总算知道为什么可以这样便捷转换。

Js中实现XML和String相互转化

XML是标准通用标记语言 (SGML) 的子集,非常适合 Web 传输。XML 提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。 这篇文章主要介绍Js中实现XML和String相互转化

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!