web-dev-qa-db-fra.com

Angular SCSS Global Variable Import

Je voudrais passer à SCSS dans mon Angular. Jusqu'à présent, la seule utilisation que je souhaite de SCSS est les variables. Pour le moment, j'utilise des variables CSS qui fonctionnent très bien parce que vous les déclarer dans :root dans mon styles.css et vous pouvez ensuite les utiliser dans tous les fichiers CSS des composants de l'application.

Ma question est de savoir si cela est possible avec SCSS (une importation mondiale)? Parce que je trouve très fastidieux de passer d'un langage importé globalement par lui-même (CSS) à quelque chose qui m'oblige désormais à importer des variables là où j'en ai besoin (SCSS).

Je suis un peu déçu de savoir pourquoi une meilleure version de quelque chose m'obligerait à le faire. Par conséquent, je suis sûr qu'il doit y avoir un moyen de ne pas avoir à importer mes variables dans chaque SCSS dans lequel j'en ai besoin.

Par exemple, je veux créer des variables dans mes styles.scss, puis je veux pouvoir utiliser ces variables dans n'importe quel style de mes composants, sans rien importer. Dans les variables CSS comme --MyVar dans :root est accessible à partir du CSS de n'importe quel composant.

cssangularsass
12
Paul Kruger

Vous n'avez pas besoin d'importer des variables à chaque fois, considérez cet exemple

theme.scss

$primary-color:#00b289;
$secondary-color:#505050;

@import "components/_checkbox";
@import "components/_button";

comme vous pouvez le voir, je ne décalque mes variables qu'une seule fois et je peux utiliser les variables à l'intérieur de mon fichier sass partiel.

une autre façon est de créer un fichier sass partiel incluant toutes vos variables et importé une fois

theme.scss

@import "_variables.scss";
@import "components/_checkbox";
@import "components/_button";
4
malbarmawi

Je ne pense pas que vous ayez besoin d'importer une variable scss partout où vous voulez l'utiliser

Supposons que vous ayez un fichier

_ variables.scss

$white:#fff;
$black:#000;

puis dans main.scss vous pouvez importer ce fichier

main.scss

@import "variables.scss";

Supposons maintenant que vous souhaitiez utiliser ces variables dans, par exemple _button.scss fichier

_ button.scss

button{
 color:$black
}

Vous pouvez utiliser directement ces variables à condition d'importer le _button.scss fichier dans main.scss fichier après variable.scss

Le placer après varibles.scss les fichiers garantiront que les variables seront accessibles dans button.scss fichier

main.scss

@import "variables.scss";
@import "button.scss";

Quant aux variables CSS, vous êtes libre de les utiliser SCSS,

essayez d'exécuter l'extrait suivant dans Sassmeister

:root{
  --gridWidth: 45px; 
  --gridHeight: 45px; 
}

.Grid {
    width: var(--gridWidth);
    height: var(--gridHeight);
    border: 1px solid black;
}
2
Gautam Naik