Maison > Article > interface Web > Comment définir une variable qui n'est égale à aucune valeur dans SASS ?
Comment définir une variable qui n'est égale à aucune valeur dans SASS ?
- 王林avant
- 2023-08-31 09:01:071013parcourir
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.
Prérequis
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.
Différentes façons de définir une variable pour qu'elle ne soit égale à rien dans 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.
Méthode 1 : utilisez le mot-clé Null
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.
Grammaire
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;
Exemple
Voyons un exemple complet de la façon de définir une variable sur rien à l'aide du mot-clé null.
Code HTML
<!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>
Code SASS
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;
}
Code CSS compilé
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
body {
background-color: ;
color: ;
font-size: ;
}
Méthode 2 : Utilisez la fonction Unset
Une autre façon de définir une variable sur null dans SASS consiste à utiliser la fonction unset. La fonction unset supprime une variable de la mémoire, la définissant ainsi sur null. Voici un exemple de la façon de définir une variable sur null à l'aide de la fonction unset.
Grammaire
$newVar: 15; $newVar: unset($newVar);
Dans la syntaxe ci-dessus, $newVar se voit d'abord attribuer une valeur de 15. Utilisez ensuite la fonction unset pour supprimer $newVar de la mémoire, en le définissant effectivement sur null.
Exemple
Voyons un exemple complet de la façon de définir une variable sur Aucun à l'aide de la fonction unset.
Code HTML
<!DOCTYPE html>
<html>
<head>
<title>Example to set the variable to equal nothing using unset function</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>
Code SASS
Ci-dessous le code SASS où l'on déclare deux variables $newVar1 et $newVar2 avec des valeurs égales à 15 et 12 respectivement. Désormais, la fonction unset est utilisée pour supprimer $newVar1 et $newVar2 de la mémoire, les définissant ainsi sur null.
$newVar1: 15;
$newVar1: 12;
$newVar1: unset($newVar1);
$newVar2: unset($newVar2);
h1 {
font-size: $newVar1;
}
p {
font-size: $newVar2;
}
Code CSS compilé
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
h1 {
font-size: ;
}
p {
font-size: ;
}
Méthode 3 : Utilisez l'interpolation #{}
La syntaxe d'interpolation #{} est évaluée au moment de la compilation, donc dans le CSS compilé, la valeur résultante de $newVar sera la chaîne vide. Ce comportement peut ne pas être souhaité dans certaines situations, utilisez donc cette technique avec prudence, le cas échéant.
Grammaire
$newVar: #{" "};
Dans la syntaxe ci-dessus, $newVar est défini sur une chaîne vide, créée à l'aide de la syntaxe d'interpolation #{} avec un espace à l'intérieur. Cette technique est utile lorsque vous devez définir une variable sur une chaîne vide au lieu de null.
Exemple
Regardons un exemple de définition d'une variable sur Aucun à l'aide de la méthode d'interpolation.
Code HTML
<!DOCTYPE html>
<html>
<head>
<title>Example to set the variable to equal nothing using Interpolation</title>
<style>
/* Add the CSS compiled code below */
</style>
</head>
<body>
<h1>Welcome to Tutorialspoint!</h1>
</body>
</html>
Code SASS
Vous trouverez ci-dessous le code SASS dans lequel nous déclarons une variable $newVar et la définissons sur une chaîne vide en utilisant la syntaxe d'interpolation.
$newVar: #{" "};
body {
padding: $newVar;
margin: $newVar;
}
编译的 CSS 代码
下面是在 SASS 编译器的帮助下编译上述 SASS 代码后生成的编译代码。要查看文档中的更改，请确保在相应 HTML 文件中的
body {
padding: ;
margin: ;
}
结论
在本文中，我们了解了如何使用不同的方法在 SASS 中将变量设置为空，包括使用 null 关键字、unset 函数和 #{} 插值语法。详细介绍这些技术，它们在不同情况或项目需求中非常有用，在这些情况或项目需求中，我们需要创建一个占位符变量，稍后可以在应用程序中为其分配值。
在SASS中，声明变量更具可读性和可维护性，从而节省了开发人员的时间和精力。要使用 SASS，请确保在 IDE 中安装了 SASS 编译器，就像上面讨论的在 VS Code 中使用 SASS 的过程一样，我们需要将 SASS 文件正确导入到 HTML 文件中。
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!