Maison > interface Web > tutoriel CSS > le corps du texte

Comment puis-je utiliser les variables déclarées dans un fichier SCSS central sur plusieurs fichiers SASS ?

Barbara Streisand
Libérer: 2024-11-10 17:39:02
original
833 Les gens l'ont consulté

How can I use variables declared in a central SCSS file across multiple SASS files?

Utilisation de variables dans plusieurs fichiers SASS

Problème :

Vous souhaitez maintenir un système centralisé Fichier .scss pour gérer toutes les définitions de variables au sein d'un projet. Le projet implique de nombreux fichiers CSS dont l'objectif est de déclarer des variables de style à l'échelle du projet en un seul emplacement. Existe-t-il une méthode pour y parvenir dans SCSS ?

Solution :

Pour y parvenir, suivez ces étapes :

  1. Créez un dossier nommé "utilities" et à l'intérieur de celui-ci, créez un fichier appelé "_variables.scss".
  2. Dans "_variables.scss", déclarez vos variables comme suit :
$black: #000;
$white: #fff;
Copier après la connexion
  1. Ensuite, créez un fichier "style.scss" qui importe tous vos autres fichiers SCSS :
// Utilities
@import "utilities/variables";

// Base Rules
@import "base/normalize";
@import "base/global";
Copier après la connexion
  1. Dans n'importe lequel des fichiers importés, vous pouvez accéder aux variables déclarées. Assurez-vous d'importer le fichier de variables avant tout autre fichier nécessitant un accès aux variables.

Cette approche vous permet de gérer les variables à l'échelle du projet de manière centralisée tout en conservant la modularité de votre base de code SCSS.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal