Werfen wir einen Blick darauf, wie JavaScript mit CSS und Sass interagiert

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 CSS-Eigenschaften und JavaScript

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 getComputedStylesetProperty 设置自定义属性的值：

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 变量和 JavaScript

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 语法的一些限制：

• 它必须在顶层，但可以在文件中的任何位置。
• 如果文件中有多个，则将 key 和 value 组合在一起一并导出。
• 如果特定的 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

Gleiches wie 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.

Sass-Variablen und JavaScript Sass ist eine vorverarbeitete Sprache, das heißt, sie wird in CSS umgewandelt, bevor sie Teil der Website wird. Daher kann über JavaScript nicht auf die gleiche Weise wie auf benutzerdefinierte CSS-Eigenschaften auf sie zugegriffen werden (auf sie kann im DOM in berechneten Stilen zugegriffen werden). 🎜Wir müssen dies ändern, indem wir unseren eigenen Build-Prozess ändern. Ich vermute, dass es in den meisten Fällen nicht notwendig sein wird, viel zu tun, da der Loader normalerweise bereits Teil des Build-Prozesses ist. Sollte das bei Ihrem Projekt aber nicht der Fall sein, benötigen wir drei Module, die Sass-Module importieren und übersetzen können. 🎜🎜In der Webpack-Konfiguration sieht es so aus: 🎜🎜🎜rrreee🎜Um Sass-Variablen (oder in diesem Fall speziell SCSS-Variablen) für JavaScript verfügbar zu machen, müssen wir sie „exportieren“. . 🎜rrreee🎜 Der :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

🎜 Es gibt viele Möglichkeiten, einfach auf Sass-Variablen in JavaScript zuzugreifen. Ich bevorzuge diese Methode zum Teilen von Haltepunkten. Hier ist meine Datei 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!