JavaScript und CSS bestehen seit mehr als 20 Jahren nebeneinander. Es war jedoch sehr schwierig, Daten zwischen ihnen zu teilen. Natürlich gab es viele Versuche, aber ich habe einen einfachen und intuitiven Ansatz gefunden - anstatt die Struktur zu ?ndern und CSS -benutzerdefinierte Eigenschaften oder sogar SASS -Variablen zu nutzen.

CSS -benutzerdefinierte Eigenschaften und JavaScript

Die CSS -benutzerdefinierten Eigenschaften hier sollten nicht zu überraschend sein. Sie konnten Werte mit JavaScript festlegen und manipulieren, seit die Browser mit der Unterstützung benutzerdefinierter Eigenschaften begannen.

Insbesondere k?nnen wir JavaScript mit benutzerdefinierten Eigenschaften auf verschiedene Weise verwenden. Wir k?nnen setProperty verwenden, um den Wert einer benutzerdefinierten Eigenschaft festzulegen:

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

Wir k?nnen auch CSS -Variablen mit getComputedStyle in JavaScript abrufen. Die Logik dahinter ist recht einfach: Benutzerdefinierte Eigenschaften sind Teil des Stils, daher sind sie auch Teil des berechneten Stils.

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

getPropertyValue ist auch eine ?hnliche M?glichkeit, damit umzugehen, sodass wir benutzerdefinierte Eigenschaftswerte von Inline -Stilen von HTML -Tags abrufen k?nnen.

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

Beachten Sie, dass benutzerdefinierte Eigenschaften skopiert werden. Dies bedeutet, dass wir den berechneten Stil aus einem bestimmten Element erhalten müssen. Da wir Variablen in :root zuvor definiert haben, erhalten wir sie auf HTML -Elemente.

SASS -Variablen und JavaScript

Sass ist eine Vorverarbeitungssprache, was bedeutet, dass sie in CSS konvertiert wird, bevor sie Teil einer Website wird. Daher k?nnen sie nicht von JavaScript wie CSS -benutzerdefinierten Eigenschaften (zugegriffen als berechnete Stile im DOM) zugegriffen werden.

Wir müssen den Build -Prozess ?ndern, um dies zu ?ndern. Ich vermute, dass dies in den meisten F?llen nicht erforderlich ist, da der Lader normalerweise bereits Teil des Build -Prozesses ist. Wenn dies jedoch bei Ihrem Projekt nicht der Fall ist, ben?tigen wir drei Module, mit denen Sass -Module importiert und konvertiert werden k?nnen.

Hier ist ein Beispiel in der Webpack -Konfiguration:

 module.exports = {
  // ...
  Modul: {
    Regeln: [
      {
        Test: /\.scss$/,,
        Verwendung: ["Style-Loader", "CSS-Lader", "Sass-Loader"]
      },
      // ...
    ]
  }
};

Um SASS (oder insbesondere hier SCSS) -Variablen für JavaScript zur Verfügung zu stellen, müssen wir sie "exportieren".

 // variablen.scss
$ Primary-Color: #Fe4e5e;
$ Hintergrundfarbe: #fefefe;
$ padding: 124px;

: exportieren {
  Prim?rkolor: $ Primary-Color;
  BackgroundColor: $ Hintergrundfarbe;
  Polsterung: $ Polsterung;
}

:export ist das Magic WebPack, um Variablen zu importieren. Der Vorteil dieses Ansatzes besteht darin, dass wir die Variablen mit Camel -Nomenklatur umbenennen und ausw?hlen k?nnen, was offenbar ist.

Anschlie?end importieren wir die SASS -Datei ( variables.scss ) in JavaScript, sodass wir in der Datei definierte Variablen zugreifen k?nnen.

 Variablen von './variables.scss' importieren;

/*
  {
    PrimaryColor: "#Fe4e5e"
    BackgroundColor: "#fefefe"
    Polsterung: "124px"
  }
*/

document.getElementById ("App"). style.padding = variablen.padding;

:export hat einige bemerkenswerte Einschr?nkungen:

• Es muss auf der obersten Ebene sein, kann aber überall in der Datei sein.
• Wenn eine Datei mehrfach vorhanden ist, werden die Schlüssel und Werte zusammen kombiniert und exportiert.
• Wenn ein exportedKey wiederholt wird, hat der letzte (in Quellenreihenfolge) Vorrang.
• exportedValue kann alle Zeichen (einschlie?lich Leerzeichen) enthalten, die im CSS -Deklarationswert gültig sind.
• exportedValue erfordert keine Zitate, da es bereits als w?rtliche Zeichenfolge angesehen wird.

Es gibt viele M?glichkeiten, den Zugriff auf SASS -Variablen in JavaScript zu nutzen. Ich neige dazu, diese Methode zu verwenden, um Haltepunkte zu teilen. Hier ist meine breakpoints.scss -Datei, die ich sp?ter in JavaScript importieren werde, damit ich mit matchMedia() -Methode konsistente Haltepunkte erhalten kann.

 // SASS -Variable $ Breakpoints, die den Haltepunktwert definieren: ((
  Mobile: 375px,
  Tablet: 768px,
  // usw.
);

// SASS -Variable $ medien zum Schreiben von Medienabfragen verwendet: ((
  Mobile: '(max-Width: #{map-Get ($ Breakpoints, Mobile)})',
  Tablet: '(Max-Width: #{map-Get ($ Breakpoints, Tablet)})',,
  // usw.
);

// Exportmodul exportieren, das SASS -Variablen in JavaScript zug?nglich machen: exportieren {
  Breakpointmobile: unquote (MAP-Get ($ media, mobil));
  BreakpointTablet: unquote (MAP-Get ($ media, Tablet));
  // usw.
}

Animation ist ein weiterer Anwendungsfall. Die Dauer einer Animation wird normalerweise in CSS gespeichert, aber komplexere Animationen erfordern die Hilfe von JavaScript.

 // Animation.scss
$ Global-Animation-Duration: 300 ms;
$ global-Animation-?stlich: Easy-In-Out;

: exportieren {
  AnimationDuration: Strip-Unit ($ Global-Animationsdauer);
  AnimationEassing: $ global-Animation-?ses;
}

Beachten Sie, dass ich beim Exportieren von Variablen eine benutzerdefinierte strip-unit -Funktion verwendet habe. Auf diese Weise kann ich Inhalte auf der JavaScript -Seite problemlos analysieren.

 // main.js
document.getElementById ('Bild'). Animate ([
  {Transformation: 'Skala (1)', Deckkraft: 1, Offset: 0},
  {Transformation: 'scale (.6)', Deckkraft: .6, Offset: 1}
], {
  Dauer: Zahl (Variablen.AnimationDuration),
  Einfach: Variablen.Animationasing,
});

Ich freue mich, dass ich Daten zwischen CSS, Sass und JavaScript so leicht austauschen kann. Teilen Sie solche Variablen mit dem Code pr?gnant und trocken.

Natürlich gibt es viele M?glichkeiten, die gleiche Funktion zu erreichen. Les James teilte eine interessante M?glichkeit, Sass und JavaScript 2017 über JSON zu interagieren. Ich bin vielleicht voreingenommen, aber ich denke, die Methode, die wir hier einführen, ist die einfachste und intuitivste. Es erfordert keine verrückten ?nderungen an der Art und Weise, wie CSS und JavaScript bereits verwendet und geschrieben wurden.

Haben Sie anderswo andere Methoden verwendet? Bitte teilen Sie in den Kommentaren mit - ich würde gerne sehen, wie Sie dieses Problem gel?st haben.

Das obige ist der detaillierte Inhalt vonJavaScript dazu bringen, mit CSS und Sass zu sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!