Jetons un coup d'œil à la façon dont JavaScript interagit avec CSS et Sass

JavaScript et CSS coexistent depuis plus de 20 ans. Mais le partage de données entre eux est très difficile. Bien sûr, les tentatives sont nombreuses. Mais ce que j'avais en tête était quelque chose de simple et intuitif - n'impliquant pas de changements structurels, mais utilisant des propriétés CSS personnalisées ou même des variables Sass.

Propriétés personnalisées CSS et JavaScript

Les propriétés personnalisées ne devraient pas surprendre ici. Une chose que les navigateurs font depuis aussi longtemps qu'ils sont pris en charge est de travailler avec JavaScript pour définir et manipuler des valeurs.

Mais plus précisément, il existe plusieurs façons de faire fonctionner JavaScript avec des propriétés personnalisées. Vous pouvez utiliser setProperty pour définir la valeur d'une propriété personnalisée :

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

Nous pouvons également utiliser getComputedStyle en JavaScript pour récupérer des variables CSS. La logique derrière cela est très simple : les propriétés personnalisées font partie du style, elles font donc partie du style calculé.

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

est le même que getPropertyValue. De cette façon, nous pouvons obtenir la valeur de l'attribut personnalisé à partir du style en ligne de la balise HTML.

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

Veuillez noter que les propriétés personnalisées ont une portée. Cela signifie que nous devons obtenir le style calculé à partir d'un élément spécifique. Tout comme nous avons défini des variables dans :root auparavant, nous les plaçons sur des éléments HTML.

Variables Sass et JavaScript

Sass est un langage prétraité, ce qui signifie qu'il est transformé en CSS avant de faire partie du site Web. Ils ne sont donc pas accessibles depuis JavaScript de la même manière que les propriétés personnalisées CSS (elles sont accessibles dans le DOM dans les styles calculés).

Nous devons changer cela en modifiant notre propre processus de construction. Je soupçonne que dans la plupart des cas, il ne sera pas nécessaire de faire grand-chose puisque le chargeur fait généralement déjà partie du processus de construction. Mais si ce n'est pas le cas pour votre projet, nous aurons besoin de trois modules capables d'importer et de traduire les modules Sass.

ressemble à ceci dans la configuration du Webpack :

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

Afin d'activer Sass (ou dans ce cas, SCSS en particulier), des variables sont disponibles en JavaScript, nous devons les "exporter". Le bloc

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

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

:export est ce que webpack utilise pour importer des variables. L'avantage de cette approche est que nous pouvons renommer les variables en utilisant la syntaxe camelCase, puis choisir ce que nous voulons exposer.

Ensuite, importez le fichier Sass (variables.scss) en JavaScript afin de pouvoir accéder aux variables définies dans le fichier.

import variables from './variables.scss';

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

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

Il convient de mentionner quelques restrictions sur la syntaxe :export :

• Elle doit être au niveau supérieur, mais peut être n'importe où dans le fichier.
• S'il y a plusieurs fichiers, la clé et la valeur seront combinées et exportées.
• Si un exportedKey spécifique est copié, le dernier (dans l'ordre des sources) est prioritaire.
• exportedValue peut contenir tous les caractères valides (y compris les espaces) dans les valeurs de déclaration CSS.
• exportedValue n'a pas besoin d'être cité car il est déjà traité comme une chaîne de texte.

Il existe de nombreuses façons d'accéder facilement aux variables Sass en JavaScript. Je préfère cette méthode de points d'arrêt partagés. Vous trouverez ci-dessous mon fichier breakpoints.scs, que j'ai ensuite importé en JavaScript afin de pouvoir obtenir des points d'arrêt cohérents en utilisant la méthode matchMedia().

// 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.
}

L'animation est un autre cas d'utilisation. La durée d'une animation est généralement stockée en CSS, mais les animations plus complexes nécessitent l'aide de JavaScript.

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

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

Veuillez noter que lors de l'exportation de variables, j'ai utilisé une fonction strip-unit personnalisée. Cela me permet d'analyser facilement le contenu en 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,
});

Cela facilite l'échange de données entre CSS, Sass et JavaScript. Le partage de variables comme celui-ci permet de garder le code simple et moins verbeux.

Bien sûr, il existe plusieurs façons d’atteindre le même objectif. Les James partagé une approche intéressante qui permet à Sass et JavaScript d'interagir via JSON. Je suis peut-être partial sur ce point, mais je trouve que la méthode présentée ici est la plus simple et la plus intuitive. Pas besoin d'apporter des modifications folles au CSS et au JavaScript que vous utilisez et écrivez déjà.

Adresse originale en anglais : https://css-tricks.com/getting-javascript-to-talk-to-css-and-sass/

Auteur : Marko Ilic

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!