JavaScript und CSS existieren seit über 20 Jahren nebeneinander. Der Datenaustausch zwischen ihnen ist jedoch sehr schwierig. Natürlich gibt es viele Versuche. Was ich jedoch im Sinn hatte, war etwas Einfaches und Intuitives – ohne strukturelle Änderungen, sondern mit benutzerdefinierten CSS-Eigenschaften oder sogar Sass-Variablen.
Benutzerdefinierte Eigenschaften sollten hier keine Überraschung sein. Eine Sache, die Browser tun, seit sie unterstützt werden, ist die Arbeit mit JavaScript, um „Werte festzulegen und zu manipulieren“. Aber konkret gibt es einige Möglichkeiten, wie wir JavaScript mit benutzerdefinierten Eigenschaften zum Laufen bringen können. Sie können setProperty
verwenden, um den Wert einer benutzerdefinierten Eigenschaft festzulegen:
document.documentElement.style.setProperty("--padding", 124 + "px"); // 124px
Wir können auch getComputedStyle
setProperty
设置自定义属性的值:
getComputedStyle(document.documentElement).getPropertyValue('--padding') // 124px
我们还可以用 JavaScript 中的 getComputedStyle
来检索 CSS 变量。其背后的逻辑非常简单:自定义属性是样式的一部分,因此它们是计算样式的一部分。
document.documentElement.style.getPropertyValue("--padding'"); // 124px
与 getPropertyValue
一样。这样我们就可以从 HTML 标记的内联样式中获得自定义属性值。
module.exports = { // ... module: { rules: [ { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] }, // ... ] } };
请注意,自定义属性是有作用域的。这意味着我们需要从特定元素获取计算样式。正如我们之前在:root
中定义变量一样,我们将它们放在 HTML 元素上。
Sass 是一种预处理语言,这意味着它在成为网站的一部分之前就已经变成了 CSS。所以无法用与 CSS 自定义属性相同的方式从 JavaScript 访问它们(可以在 DOM 中以计算样式访问它们)。
我们需要通过修改自己的构建过程来改变这一点。我怀疑在大多数情况下并不需要做太多,因为装载程序通常已经是构建过程的一部分。但是如果你的项目并非如此,则我们需要三个模块,这些模块能够导入和翻译 Sass 模块。
在 Webpack 配置中看上去是这样:
// variables.scss $primary-color: #fe4e5e; $background-color: #fefefe; $padding: 124px; :export { primaryColor: $primary-color; backgroundColor: $background-color; padding: $padding; }
为了使 Sass(或者在这种情况下,具体来说是 SCSS)变量可用于 JavaScript,我们需要 “export” 它们。
import variables from './variables.scss'; /* { primaryColor: "#fe4e5e" backgroundColor: "#fefefe" padding: "124px" } */ document.getElementById("app").style.padding = variables.padding;
:export
块是 webpack 用来导入变量的。这种方法的好处是,我们可以用 camelCase 语法重命名变量,然后选择要公开的内容。
然后,把 Sass 文件(variables.scss
)导入 JavaScript,从而可以访问文件中定义的变量。
// Sass variables that define breakpoint values $breakpoints: ( mobile: 375px, tablet: 768px, // etc. ); // Sass variables for writing out media queries $media: ( mobile: '(max-width: #{map-get($breakpoints, mobile)})', tablet: '(max-width: #{map-get($breakpoints, tablet)})', // etc. ); // The export module that makes Sass variables accessible in JavaScript :export { breakpointMobile: unquote(map-get($media, mobile)); breakpointTablet: unquote(map-get($media, tablet)); // etc. }
值得一提的是对 :export
语法的一些限制:
exportedKey
被复制,则最后一个(按源顺序)优先。exportedValue
可以含有在 CSS 声明值中任何有效的字符(包括空格)。exportedValue
不需要被引用,因为它已经被当作文本字符串了。有很多方法可以方便地访问 JavaScript 中的 Sass 变量。我倾向于使用这种共享断点的方法。下面是我的breakpoints.scs
文件,后来我将其导入 JavaScript 中,这样我可以用 matchMedia()
方法得到一致的断点。
// animation.scss $global-animation-duration: 300ms; $global-animation-easing: ease-in-out; :export { animationDuration: strip-unit($global-animation-duration); animationEasing: $global-animation-easing; }
动画是另一个用例。动画的持续时间通常存储在 CSS 中,但是需要 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, });
请注意,在导出变量时,我用了自定义 strip-unit
, um CSS-Variablen abzurufen. Die Logik dahinter ist sehr einfach: Benutzerdefinierte Eigenschaften sind Teil des Stils und somit Teil des berechneten Stils. rrreee
getPropertyValue
. Auf diese Weise können wir den benutzerdefinierten Attributwert aus dem Inline-Stil des HTML-Tags abrufen. rrreee
Bitte beachten Sie, dass benutzerdefinierte Eigenschaften einen Gültigkeitsbereich haben. Das bedeutet, dass wir den berechneten Stil von einem bestimmten Element erhalten müssen. Genau wie wir zuvor die Variablen in:root
definiert haben, platzieren wir sie auf dem HTML-Element.
:export
-Block wird zum Importieren von Variablen verwendet. Der Vorteil dieses Ansatzes besteht darin, dass wir die Variablen mithilfe der CamelCase-Syntax umbenennen und dann auswählen können, was verfügbar gemacht werden soll die Sass-Datei (variables.scss
) in JavaScript, damit Sie auf die in der Datei definierten Variablen zugreifen können 🎜rrreee🎜Es ist erwähnenswert, dass es einige Einschränkungen für den :export gibt Code> Syntax. :🎜<ul>
<li>Es muss sich auf der obersten Ebene befinden, kann sich aber an einer beliebigen Stelle in der Datei befinden. </li>
<li>Wenn es mehrere in der Datei gibt, werden Schlüssel und Wert kombiniert exportiert. </li>
<li> li></li>
<li>Wenn ein bestimmter <code>exportedKey
kopiert wird, hat der letzte (in Quellreihenfolge) Vorrang
exportedValue kann in CSS deklarierte Werte enthalten (einschließlich Leerzeichen) in
exportedValue
muss nicht in Anführungszeichen gesetzt werden, da es bereits als Text behandelt wird string breakpoints.scs
, in die ich dann importiere JavaScript wie dieses. Ich kann mit der Methode matchMedia()
🎜rrreee🎜Animation ist ein weiterer Anwendungsfall, aber komplexere Animationen benötigen Hilfe JavaScript. 🎜rrreee🎜 Bitte beachten Sie, dass ich beim Exportieren von Variablen ein benutzerdefiniertes strip-unit
🎜 Funktion Dies ermöglicht mir das einfache Parsen von Inhalten in JavaScript 🎜rrreee🎜Dies erleichtert den Datenaustausch zwischen CSS, Sass und JavaScript. Durch die gemeinsame Nutzung von Variablen bleibt der Code einfacher und weniger ausführlich. 🎜🎜Natürlich gibt es mehrere Möglichkeiten, das gleiche Ziel zu erreichen. Les James „hat eine interessante Methode geteilt“, die es Sass und JavaScript ermöglicht, über JSON zu interagieren. Vielleicht bin ich in dieser Hinsicht voreingenommen, aber ich finde, dass die hier vorgestellte Methode die einfachste und intuitivste ist. Sie müssen keine verrückten Änderungen an CSS und JavaScript vornehmen, die Sie bereits verwenden und schreiben. 🎜Englische Originaladresse: https://css-tricks.com/getting-javascript-to-talk-to-css-and-sass/
Autor: Marko Ilic
Weitere Programmierkenntnisse finden Sie unter : Programmiervideos! !
Das obige ist der detaillierte Inhalt vonWerfen wir einen Blick darauf, wie JavaScript mit CSS und Sass interagiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!