SASS, ou Syntacically Awesome Style Sheets, est un langage de script de préprocesseur très populaire parmi les développeurs, utilisé pour améliorer les fonctionnalités de CSS. SASS permet aux développeurs d'utiliser des variables, des imbrications, des mixins et d'autres fonctionnalités avancées non disponibles en CSS.
L'une des fonctionnalités clés de l'utilisation de SASS est la possibilité de déclarer des variables qui ne sont rien de plus que des espaces réservés pour des valeurs que nous pouvons réutiliser dans toutes nos feuilles de style d'application Web. Les variables permettent aux développeurs d'économiser du temps et des efforts en leur permettant de mettre à jour plusieurs valeurs à la fois en rendant le code plus lisible et plus facile à maintenir.
Parfois, nous pouvons vouloir définir une variable sur null, ce qui dans d'autres langages signifie définir la variable sur null ou indéfini. Ceci est utile lorsque nous souhaitons créer une variable d'espace réservé et pouvons lui attribuer une valeur ultérieurement dans l'application. Dans cet article, nous apprendrons comment définir une variable qui n'est égale à rien dans SASS.
Pour exécuter SASS en HTML, assurez-vous que le compilateur SASS est installé dans votre IDE (tout comme dans VS Code), téléchargez et installez le compilateur SASS à l'aide de la commande suivante -
npm install -g sass
Cela installera le compilateur SASS globalement sur votre système. Ensuite, créez un nouveau fichier avec une extension .scss qui contiendra notre code SASS.
Après cela, importez le fichier SASS dans le fichier HTML. Dans le fichier HTML, ajoutez un lien vers votre fichier SASS en utilisant la balise 'link' dans la section d'en-tête. L'attribut rel du lien doit être défini sur "stylesheet" et son attribut href doit être défini sur le chemin d'accès à votre fichier SASS.
Pour définir une variable qui n'est égale à aucune valeur, il existe plusieurs façons, par exemple en utilisant le mot-clé null, la fonction unset ou la méthode d'interpolation #{}. Discutons de toutes ces méthodes en détail une par une.
Dans SASS, le mot-clé null est utilisé pour indiquer l'absence de valeur. Lorsqu’une variable est définie sur null, cela signifie qu’aucune valeur ne lui a été attribuée. Ceci est utile lorsque vous souhaitez déclarer une variable mais que vous ne souhaitez pas lui attribuer une valeur immédiatement.
Pour définir une variable pour qu'elle ne soit égale à rien dans SASS, utilisez simplement le mot-clé null comme indiqué ci-dessous -
$newVar: null;
Alternativement, nous pouvons définir une variable sur null en l'attribuant à une variable déjà définie sur null
$newOtherVar: $newVar;
Voyons un exemple complet de la façon de définir une variable sur rien à l'aide du mot-clé null.
<!DOCTYPE html>
<html>
<head>
<title>Example to set the variable to equal nothing using null keyword</title>
<style>
/* Add the CSS compiled code below */
</style>
</head>
<body>
<h1>Welcome to Tutorialspoint!</h1>
<p>The one stop solution to learn technology articles.</p>
</body>
</html>
Ci-dessous le code SASS où nous déclarons la variable $newVar avec une valeur égale à null.
$newVar: null;
body {
background-color: $newVar;
color: $newVar;
font-size: $newVar;
}
Vous trouverez ci-dessous le code compilé généré après la compilation du code SASS ci-dessus à l'aide du compilateur SASS. Pour voir les modifications dans le document, assurez-vous d'ajouter le code suivant entre les éléments