CSS和JavaScript与Sass的交互示例

　　介绍

这篇“JavaScript与CSS和Sass的交互示例“除了程序员外大部分人都不太理解,今天小编为了让大家更加理解“JavaScript与CSS和Sass的交互示例”,给大家总结了以下内容,具有一定借鉴价值,内容详细步骤清晰,细节处理妥当,希望大家通过这篇文章有所收获、下面让我们一起来看看具体内容吧。

JavaScript是什么

JavaScript是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器的一部分,JavaScript是被广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能。

JavaScript和CSS已经并存超过了20年。但是在它们之间共享数据非常困难。当然也有大量的尝试。但是我所想到的是一些简单而直观的内容,不涉及结构更改,而是使用CSS自定义属性甚至Sass变量。

CSS自定义属性和JavaScript

自定义属性在这里应该不会令人感到惊讶。自浏览器提供支持以来? ?,他们一直在做的一件事就是与JavaScript协同工作以设置和操作值。

不过具体来说,我们可以通过几种方式使JavaScript与自定义属性一起工作。可以使用<代码> setProperty 设置自定义属性的值:

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

我们还可以用JavaScript中的<代码> getComputedStyle> getComputedStyle (document.documentElement) .getPropertyValue(& # 39;——填充# 39;),//,124 px

与<代码> getPropertyValue 一样。这样我们就可以从HTML标记的内联样式中获得自定义属性值。

document.documentElement.style.getPropertyValue(“——填充# 39;“),,//,124 px

请注意,自定义属性是有作用域的。这意味着我们需要从特定元素获取计算样式。正如我们之前在<代码>:根>

Sass变量和JavaScript

Sass是一种预处理语言,这意味着它在成为网站的一部分之前就已经变成了CSS。所以无法用与CSS自定义属性相同的方式从JavaScript访问它们(可以在DOM中以计算样式访问它们)。

我们需要通过修改自己的构建过程来改变这一点。我怀疑在大多数情况下并不需要做太多,因为装载程序通常已经是构建过程的一部分。但是如果你的项目并非如此,则我们需要三个模块,这些模块能够导入和翻译Sass模块。

在Webpack配置中看上去是这样:

module.exports =, { 　　,//? 　　,模块:{ 　　规则:,才能 　　,,{ 　　,,,测试:,/\ .scss/美元, 　　,,,使用:,(“style-loader",,“css-loader",,“sass-loader"】 　　,,},//,,,… 　　,,) 　　,} 　　};

为了使Sass(或者在这种情况下,具体来说是SCSS)变量可用于JavaScript,我们需要“出口”它们。

//,variables.scss 　　美元的原色:# fe4e5e; 　　美元background - color: # fefefe; 　　填充:美元,124 px; 　　 　　:export  { 　　,,primaryColor:美元的原色; 　　background - color,,写成backgroundColor:美元; 　　,,填充:$填充; 　　}

<代码>:出口>

然后,把Sass文件(<代码>变量。scss> import  variables 得到& # 39;。/variables.scss& # 39;;/* 　　,{ 　　primaryColor才能:“# fe4e5e" 　　写成backgroundColor才能:“# fefefe" 　　填充才能:“124 px" 　　,} 　　*/. getelementbyid (“app") .style.padding =, variables.padding;

值得一提的是对<代码>:出口语法的一些限制:

<李>

它必须在顶层,但可以在文件中的任何位置。

<李>

如果文件中有多个,则将键和值组合在一起一并导出。

<李>

如果特定的<代码> exportedKey> <李>

<代码> exportedValue> <李>

<代码> exportedValue>

有很多方法可以方便地访问JavaScript中的Sass变量。我倾向于使用这种共享断点的方法。下面是我的

CSS和JavaScript与Sass的交互示例