concepts scss et usage

SCSS (Sassy CSS) est un langage de préprocesseur pour CSS. Il offre plus de fonctions et de flexibilité basées sur CSS, rendant l'écriture et la gestion des feuilles de style plus efficaces et plus pratiques.

Voici quelques avantages du SCSS :

Variables : SCSS permet d'utiliser des variables pour stocker des valeurs telles que les couleurs, les tailles de police, etc., ce qui rend plus pratique et plus facile à maintenir l'ajustement uniforme de ces valeurs dans toute la feuille de style.
Règles imbriquées : les règles imbriquées peuvent être utilisées dans SCSS pour organiser les styles afin de rendre la structure du code plus claire. Par exemple, vous pouvez écrire le style de pseudo-classe d'un élément dans le bloc de style de son élément parent au lieu de l'écrire à plusieurs endroits.
Mixins : les mixins sont un moyen de combiner un ensemble de propriétés de style dans un bloc réutilisable. Cela évite d’écrire à plusieurs reprises le même style de code et améliore la réutilisabilité et la lisibilité du code.
Importation (importations en ligne) : plusieurs fichiers SCSS peuvent être fusionnés en un seul fichier via la règle @import. Cette approche permet de diviser la feuille de style en unités logiques et peut être organisée et gérée de manière flexible selon les besoins.
Héritage (Extend) : SCSS prend en charge l'héritage de style via le mot-clé @extend, ce qui peut rendre la feuille de style plus modulaire et plus facile à maintenir.
Opérations : SCSS permet des opérations mathématiques dans les feuilles de style, telles que l'addition, la soustraction, la multiplication et la division, ce qui est utile pour gérer certains calculs de style dynamique.
Modularité : Les caractéristiques de SCSS rendent les feuilles de style plus modulaires et structurées, ce qui permet de mieux gérer et maintenir les styles, en particulier dans les grands projets.

En résumé, SCSS conserve non seulement toutes les fonctions de CSS, mais introduit également des fonctionnalités avancées telles que les variables, l'imbrication, le mélange, l'importation, etc. Ces fonctions permettent aux développeurs d'écrire et de gérer des feuilles de style plus efficacement et sont couramment utilisées dans les fronts modernes. le développement final est l'un des outils.

Comparaison entre scss et css

grammaire:

CSS : syntaxe de base de la feuille de style en cascade, les règles sont définies via des sélecteurs, des attributs et des valeurs.
SCSS : SCSS est un langage de préprocesseur pour CSS. Il fournit davantage de fonctions et de syntaxe, telles que des variables, des règles imbriquées, des mixins, des importations, etc., qui rendent l'écriture de feuilles de style plus flexible et efficace.

Lisibilité et maintenabilité :

CSS : dans les projets plus importants, les fichiers CSS peuvent devenir très verbeux et difficiles à maintenir car ils manquent de fonctionnalités structurées et modulaires.
SCSS : SCSS prend en charge les variables et les règles imbriquées. Ces fonctionnalités rendent le code plus lisible et maintenable. En utilisant des variables et des mixins, l'écriture répétitive de code peut être réduite et les règles imbriquées peuvent exprimer plus clairement la relation hiérarchique de la structure HTML.

Extension de fonction :

CSS : le CSS standard ne peut effectuer que la définition de style de base et la correspondance des sélecteurs.
SCSS : SCSS introduit des fonctions avancées telles que le mixage, l'héritage et les calculs. Ces fonctions rendent les feuilles de style plus flexibles et plus puissantes et peuvent mieux répondre aux exigences de style complexes.

compatibilité:

CSS : les navigateurs prennent directement en charge CSS, aucune étape de compilation supplémentaire n'est requise.
SCSS : SCSS doit être converti en un fichier CSS normal par un compilateur avant de pouvoir être compris et appliqué par le navigateur.

courbe d'apprentissage:

CSS : L'apprentissage du CSS est relativement simple, il suffit de comprendre la combinaison de base de sélecteurs, de propriétés et de valeurs.
SCSS : L'apprentissage du SCSS nécessite de maîtriser sa syntaxe et ses fonctions uniques, telles que les variables, le mixage, l'imbrication, etc., ce qui nécessite un certain processus d'apprentissage et d'adaptation.

En résumé, par rapport au CSS ordinaire, SCSS fournit plus d'outils et de fonctionnalités pour simplifier l'écriture et la maintenance des feuilles de style, et est particulièrement adapté au développement de projets volumineux et complexes. Cependant, pour les petits projets ou les besoins de style simples, le CSS simple peut être plus simple et plus pratique.

Utilisation de scss

Avant d'apprendre scss, installez d'abord deux plug-ins dans vscode pour convertir scss en fichiers CSS ordinaires pour un apprentissage ultérieur !

Recherchez sass dans le magasin de plug-ins, téléchargez les deux plug-ins suivants et redémarrez vscode !

déclarer des variables

Déclarer des variables dans SCSS est très simple, vous pouvez utiliser le symbole $ pour définir des variables.

Voici un exemple simple montrant comment déclarer et utiliser des variables dans SCSS :


// 定义变量
$primary-color: #3498db;
$secondary-color: #2ecc71;
 
// 使用变量
body {
  background-color: $primary-color;
}
 
a {
  color: $secondary-color;
}

Dans l'exemple ci-dessus, nous avons défini deux variables $primary-color et $secondary-color pour stocker respectivement la couleur primaire et la couleur secondaire. Nous pouvons ensuite utiliser ces variables dans les règles de style pour garder les couleurs cohérentes et faciles à modifier dans toute la feuille de style.

Lorsqu'un fichier SCSS est compilé dans un fichier CSS normal, toutes les variables seront remplacées par leurs valeurs correspondantes, de sorte que le fichier CSS final généré ne contiendra aucune déclaration de variable.

Différencier les variables par défaut

Dans SCSS, vous pouvez utiliser des variables par défaut pour garantir qu'une variable a une valeur alternative si elle n'est pas définie. Ceci est particulièrement utile lorsque vous travaillez avec des thèmes ou configurez des styles.

Voici un exemple de comment déclarer et utiliser des variables par défaut :


// 声明变量，并设置默认值
$primary-color: #3498db !default;
$secondary-color: #2ecc71 !default;
 
// 使用变量
body {
  background-color: $primary-color;
}
 
a {
  color: $secondary-color;
}

Dans l'exemple ci-dessus, nous avons utilisé la balise !default pour définir la valeur par défaut. Cela signifie que si $primary-color ou $secondary-color ne sont pas définis ailleurs avant d'être introduits dans ce fichier SCSS, ils utiliseront les valeurs par défaut spécifiées (#3498db et #2ecc71). Si ces variables ont été définies avant l'importation du fichier, les valeurs par défaut seront ignorées.

L'avantage de l'utilisation de variables par défaut est qu'elle vous permet de fournir des valeurs alternatives pour les variables sans écraser les variables déjà définies. Ceci est particulièrement utile pour créer des thèmes ou partager des variables sur plusieurs fichiers de style.

Distinguer les variables globales et les variables locales

Variables globales : les variables globales sont des variables déclarées en dehors d'un sélecteur ou en dehors d'un mélangeur/fonction. Elles sont accessibles dans toute la feuille de style, et si la même variable globale est définie dans plusieurs fichiers, leurs valeurs resteront cohérentes.
Variables locales : les variables locales sont des variables définies dans un sélecteur ou dans un mélangeur/une fonction. Ils ne peuvent être utilisés que dans le cadre dans lequel ils sont définis et ne sont plus valables en dehors de ce périmètre.

Remarque : les variables locales remplacent les variables globales

Lorsqu'une variable portant le même nom qu'une variable globale est redéclarée dans une portée locale, la variable locale écrase la valeur de la variable globale. Cela permet de définir différentes valeurs de variables pour un sélecteur ou un mélangeur spécifique sans affecter la situation globale.

Utilisez le mot-clé !global pour transformer des variables locales en variables globales

SCSS fournit le mot-clé !global pour déclarer explicitement les variables locales comme variables globales. Cela entraîne la promotion de la valeur d'une variable locale dans la portée globale où elle est déclarée, écrasant ainsi toute variable globale existante portant le même nom.

Exemple:


// 全局变量
$primary-color: #3498db;
 
.button {
  // 局部变量，覆盖全局变量
  $primary-color: #cc582e;
  background-color: $primary-color; // 使用局部变量值
}
 
// 使用 !global 将局部变量变为全局变量
$primary-color: #cddb34;
 
.button {
  // 使用 !global 将局部变量变为全局变量
  $primary-color: #2ecc71 !global;
}
 
body {
  background-color: $primary-color; // 这里使用的是已变为全局的 $primary-color
}

Dans le premier exemple, la variable locale $primary-color à l'intérieur du sélecteur .button remplace la valeur de la variable globale. Dans le deuxième exemple, en utilisant le mot-clé !global, les variables locales à l'intérieur du sélecteur .button sont converties en variables globales, affectant ainsi les valeurs des variables dans la portée globale.

Syntaxe imbriquée

Imbrication du sélecteur

imbrication de base

L'imbrication des sélecteurs permet d'imbriquer les règles de style des sélecteurs enfants dans les sélecteurs parents, par exemple :


// SCSS代码
.navbar {
  background-color: #333;
  padding: 10px;
 
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
 
    li {
      display: inline-block;
      margin-right: 10px;
 
      a {
        text-decoration: none;
        color: #fff;
 
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

Dans le code ci-dessus, le sélecteur .navbar contient un ul, un li imbriqués et un sous-sélecteur. Cette structure imbriquée rend les règles de style plus claires et plus faciles à gérer.

Référence du sélecteur parent imbriqué (&)

En SCSS, le symbole & est utilisé pour désigner un sélecteur parent, particulièrement utile dans le cas de pseudo-classes ou de pseudo-éléments. Par exemple, utilisez &:hover pour référencer le sélecteur parent du sélecteur actuel et ajoutez un style d'état :hover.


.button {
  background-color: #3498db;
  color: #fff;
  padding: 8px 16px;
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
 
  &:hover {
    background-color: #2980b9;
  }
}

Considérations sur l'imbrication

Profondeur du sélecteur : évitez une imbrication trop profonde des sélecteurs, car cela pourrait augmenter la priorité du style, rendant les remplacements de style et la maintenance difficiles.
Lisibilité : lorsque vous utilisez l'imbrication de sélecteurs, veillez à ce que le code soit lisible et clair, et évitez les structures imbriquées trop complexes.
Performances : les structures imbriquées peuvent augmenter la taille du fichier CSS généré, mais peuvent généralement être optimisées avec une organisation et une écriture de style appropriées.

imbriqué imbriqué

SCSS permet plusieurs niveaux d'imbrication de sélecteurs, par exemple :


.container {
  .row {
    .col {
      width: 100%;
    }
  }
}

Imbrication de propriétés

Dans SCSS, en plus de l'imbrication des sélecteurs, il existe également la fonctionnalité d'imbrication des attributs, qui est une autre fonctionnalité qui rend les feuilles de style plus propres et plus faciles à gérer. L'imbrication des propriétés permet d'organiser les propriétés associées, de la même manière que la forme d'un objet.

Imbrication d'attributs de base

L'imbrication de propriétés peut être utilisée pour placer des propriétés associées dans un bloc de code, par exemple :


.navbar {
  font: {
    family: Arial, sans-serif;
    size: 16px;
    weight: bold;
  }
  margin: {
    top: 10px;
    bottom: 15px;
  }
  padding: {
    left: 20px;
    right: 20px;
  }
}

Dans l'exemple ci-dessus, les blocs de police, de marge et de remplissage contiennent des attributs associés. Cette organisation rend les propriétés de chaque bloc plus claires et plus faciles à modifier et à maintenir.

Considérations sur l'imbrication

Propriétés prises en charge : toutes les propriétés CSS ne prennent pas en charge l'imbrication, généralement celles qui peuvent accepter des paires clé-valeur, telles que la police, la marge, le remplissage, la bordure, etc.
Lisibilité : lorsque vous utilisez l'imbrication d'attributs, assurez-vous de la lisibilité et de la clarté du code et évitez l'imbrication excessive et les structures complexes.
Imbrication imbriquée : vous pouvez également imbriquer d'autres propriétés dans des imbrications de propriétés, ce qui permet d'organiser et de structurer davantage vos styles.

hériter

Dans SCSS, l'héritage (Extend) est une fonctionnalité très utile qui permet à un sélecteur d'hériter des règles de style d'un autre sélecteur. Cette fonctionnalité réduit le code CSS en double et rend les feuilles de style plus modulaires et plus faciles à maintenir.

Utilisation de base

L'héritage du sélecteur peut être obtenu à l'aide du mot-clé @extend. Par exemple:


%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
 
.success-message {
  @extend %message-shared;
  background-color: lightgreen;
}
 
.error-message {
  @extend %message-shared;
  background-color: lightcoral;
}

Dans l'exemple ci-dessus, %message-shared est un sélecteur d'espace réservé qui définit un ensemble commun de styles. .success-message et .error-message héritent respectivement du style de %message-shared et ajoutent leurs propres couleurs d'arrière-plan.

Notes sur l'héritage

Ordre des sélecteurs : l'héritage peut générer une longue liste de sélecteurs, ce qui peut affecter la priorité du style. Assurez-vous que l'ordre et la position des sélecteurs sont corrects lors de l'utilisation de @extend pour éviter des problèmes de priorité inutiles.
Restriction : Les sélecteurs hérités doivent apparaître après le sélecteur hérité. Cela signifie que si vous définissez un sélecteur dans votre fichier SCSS et utilisez @extend pour hériter de son style dans le code suivant, cet héritage ne prendra effet qu'après sa définition.
Sélecteurs d'espace réservé vs sélecteurs de classe : les sélecteurs d'espace réservé commençant par % sont généralement de meilleures cibles pour l'héritage que les sélecteurs de classe directs car ils ne génèrent pas de sélecteurs redondants après la compilation. Les sélecteurs de classe, en revanche, généreront des styles en double partout où ils sont utilisés, augmentant ainsi la taille et la complexité des fichiers.

Scénarios d'application

L'héritage est particulièrement adapté aux sélecteurs ayant des caractéristiques communes, tels que les composants de boutons, les boîtes de message, etc. Grâce à l'héritage, vous pouvez réutiliser les mêmes règles de style dans différents scénarios tout en gardant votre code propre et maintenable.

Pour résumer, l'héritage dans SCSS est un outil puissant qui peut vous aider à éviter la duplication de style et à maintenir la modularité et la clarté de votre code. Cependant, lorsque vous l'utilisez, vous devez faire attention à l'ordre et à la position des sélecteurs, ainsi qu'au caractère raisonnable. utilisation d’espaces réservés pour maximiser son effet.

Espace réservé %

L'espace réservé % est un sélecteur spécial dans SCSS qui est souvent utilisé pour définir des règles de style qui peuvent être héritées mais qui ne génèrent pas de sortie CSS réelle. Spécifiquement:

définir un espace réservé


%placeholder-selector {
  // 样式规则
}

Dans l'exemple ci-dessus, %placeholder-selector est un sélecteur d'espace réservé commençant par %. Il définit un ensemble de règles de style, mais le nom du sélecteur correspondant n'apparaîtra pas dans le CSS compilé.

espace réservé à l'héritage


.some-class {
  @extend %placeholder-selector;
  // 可选的额外样式
}

L'utilisation du mot-clé @extend permet à .some-class d'hériter du style de %placeholder-selector. Cela signifie que .some-class appliquera toutes les règles de style définies dans %placeholder-selector et générera la sortie CSS correspondante.

Avantages et scénarios applicables

Réduire la duplication : les sélecteurs d'espace réservé permettent de définir un ensemble commun de règles de style et de les réutiliser par héritage si nécessaire, évitant ainsi la duplication de code.
Modularité : les sélecteurs d'espace réservé contribuent à la modularité et à la maintenabilité du code, en particulier dans les grands projets, et peuvent améliorer la clarté structurelle des feuilles de style.
Évitez la redondance : par rapport à l'utilisation de sélecteurs de classe, les sélecteurs d'espace réservé ne génèrent pas de sélecteurs redondants, réduisant ainsi la taille des fichiers CSS.

Précautions

Ordre et position : lors de l'utilisation de @extend pour hériter des sélecteurs d'espace réservé, le sélecteur d'espace réservé hérité doit être défini avant que son sélecteur ne soit utilisé, sinon des problèmes inattendus de hiérarchie de style peuvent survenir.
Mixage : vous pouvez combiner des sélecteurs d'espace réservé avec des sélecteurs de classe ordinaires, mais vous devez les gérer avec soin pour éviter une sortie CSS inattendue.

En résumé, le placeholder selector% est un outil puissant dans SCSS qui peut aider les développeurs à améliorer la réutilisabilité et la maintenabilité des feuilles de style tout en réduisant la redondance CSS inutile.

Mélanger @mixin

Les mixins sont une autre fonctionnalité très puissante de SCSS qui permet d'encapsuler un ensemble de règles de style dans un bloc de code réutilisable, puis de le référencer partout où cela est nécessaire. Contrairement au sélecteur d'espace réservé %, les mixins peuvent générer directement une sortie CSS, il convient donc aux situations où le même style doit être utilisé à plusieurs endroits.

Définir le mélange


@mixin mixin-name($parameter1, $parameter2, ...) {
  // 样式规则使用参数
}

Dans l'exemple ci-dessus, le mot-clé @mixin définit un mixin appelé mixin-name qui peut accepter plusieurs arguments (si nécessaire) et définit un ensemble de règles de style en son sein.

mélange d'appels


.some-class {
  @include mixin-name(value1, value2, ...);
  // 可选的额外样式
}

Utilisez le mot-clé @include pour appeler le mixin dans le sélecteur et lui transmettre des paramètres. De cette façon, .some-class appliquera les règles de style définies dans le mixin et appliquera les valeurs de paramètres transmises aux variables de paramètres correspondantes.

exemple


@mixin button-style($background-color, $text-color) {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: $background-color;
  color: $text-color;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
 
  &:hover {
    background-color: darken($background-color, 10%);
  }
}
.button-primary {
  @include button-style(#3498db, #fff);
}
 
.button-secondary {
  @include button-style(#2ecc71, #fff);
}

Avantages et scénarios applicables

Flexibilité : le mixage permet de transmettre des paramètres et différentes sorties de style peuvent être générées dynamiquement selon les besoins, rendant le style plus flexible et personnalisable.
Lisibilité : l'encapsulation des règles de style couramment utilisées dans un mixin peut améliorer la lisibilité et la maintenabilité de votre code, surtout si le même style est requis à plusieurs endroits.
Réutilisabilité : le même mix peut être appelé plusieurs fois dans différents sélecteurs et fichiers pour éviter la définition répétée des styles et réduire la quantité de code.

Précautions

Conflits de noms : assurez-vous que les mixins n'entrent pas en conflit avec les noms de classes CSS existants ou d'autres mixins pour éviter les remplacements de style ou les erreurs inattendus.
Passage de paramètres : lorsque vous appelez un mixin, assurez-vous que les types de paramètres et l'ordre transmis sont cohérents avec les exigences de la définition du mixin pour éviter les erreurs de compilation ou un comportement inattendu.
Impact sur les performances : l'utilisation intensive de mixins peut augmenter la taille des fichiers CSS résultants, soyez donc prudent quant à l'impact sur les performances.

En résumé, mix @mixin est un outil puissant pour encapsuler et réutiliser des règles de style dans SCSS. Il peut améliorer considérablement la maintenabilité et la flexibilité de CSS et convient à diverses exigences de style complexes et répétées.

SCSS utilise des instructions conditionnelles

Dans SCSS, les instructions conditionnelles permettent de générer dynamiquement des styles CSS en fonction de conditions spécifiques. Les instructions conditionnelles dans SCSS sont similaires aux instructions conditionnelles dans d'autres langages de programmation, notamment @if, @else if et @else.

@if déclaration

L'instruction @if permet de générer des styles en fonction d'une condition. La syntaxe est la suivante :


$use-rounded-corners: true;
 
.button {
  @if $use-rounded-corners {
    border-radius: 4px;
  }
}

Dans l'exemple ci-dessus, si la valeur de la variable $use-rounded-corners est vraie, le style de la classe .button est généré, y compris border-radius: 4px;. Si la condition est fausse, cette partie du style ne sera pas générée.

@else et @else if instructions

En plus de @if, vous pouvez également utiliser @else if et @else pour ajouter davantage de branches conditionnelles.


$button-size: medium;
 
.button {
  @if $button-size == small {
    padding: 5px 10px;
  } @else if $button-size == medium {
    padding: 10px 25px;
  } @else if $button-size == large {
    padding: 15px 30px;
  } @else {
    padding: 10px 20px; // 默认值
  }
}

Dans cet exemple, en fonction de la valeur de la variable $button-size, différentes valeurs de remplissage sont sélectionnées pour être appliquées à la classe .button. S'il n'y a aucune condition correspondante, le bloc de code dans @else sera exécuté.

Imbrication d'instructions conditionnelles

Les instructions conditionnelles peuvent également être imbriquées pour gérer une logique plus complexe.


$button-style: flat;
$button-size: medium;
 
.button {
  @if $button-style == flat {
    background-color: transparent;
    color: #333;
    border: 1px solid #333;
 
    @if $button-size == small {
      padding: 5px 10px;
    } @else if $button-size == medium {
      padding: 10px 25px;
    } @else if $button-size == large {
      padding: 15px 30px;
    } @else {
      padding: 10px 20px; // 默认值
    }
  } @else if $button-style == raised {
    background-color: #3498db;
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
  } @else {
    // 默认样式
    background-color: #db6334;
    color: #fff;
    padding: 10px 20px;
  }
}

Dans cet exemple, différents styles sont sélectionnés à appliquer en fonction des valeurs de $button-style et $button-size. Cette approche imbriquée permet de générer des règles de style complexes basées sur plusieurs conditions.

en conclusion

En utilisant des instructions conditionnelles, vous pouvez obtenir une définition de style plus flexible et dynamique dans SCSS et générer différentes règles CSS basées sur différentes conditions, améliorant ainsi la maintenabilité et l'évolutivité de la feuille de style.

Trois types de boucles dans SCSS

Dans SCSS, il existe trois constructions de boucles principales qui peuvent être utilisées pour générer des règles CSS répétées : @for, @each et @while.

boucle @for

La boucle @for est utilisée pour générer des styles à plusieurs reprises selon certaines étapes et conditions.

grammaire de base：


@for $i from <start> through <end> {
  // 循环体
}

depuis<start> à travers<end> : Spécifiez la valeur de début et la valeur de fin de la boucle (y compris la valeur de fin).
La variable $i peut être utilisée dans le corps de la boucle pour représenter la valeur d'index de la boucle actuelle.

Exemple：


@for $i from 1 through 3 {
  .item-#{$i} {
    width: 100px * $i;
  }
}

Dans l'exemple ci-dessus, trois classes .item-1, .item-2 et .item-3 sont générées, avec des largeurs définies respectivement sur 100px, 200px et 300px.

@chaque boucle

La boucle @each est utilisée pour parcourir les données de type liste ou carte et générer des styles pour chaque élément.

grammaire de base：


@each $var in <list or map> {
  // 循环体
}

$var : représente la variable de la boucle en cours.
<list or map>: Peut être une liste (telle que $list: item1, item2, item3;) ou une carte (paire clé-valeur).

Exemple：


$colors: (red, green, blue);
 
@each $color in $colors {
  .text-#{$color} {
    color: $color;
  }
}

Dans cet exemple, trois classes .text-red, .text-green et .text-blue sont générées et leurs couleurs de texte sont définies sur les valeurs de couleur correspondantes.

@while boucle

La boucle @while génère à plusieurs reprises des styles basés sur une condition jusqu'à ce que la condition ne soit pas remplie.

grammaire de base：


$i: 1;
@while $i < 4 {
  // 循环体
  $i: $i + 1; // 更新条件
}

$i : comme compteur de boucles ou variable de condition.
N'importe quel code SCSS peut être exécuté dans le corps de la boucle. Habituellement, la variable de condition doit être mise à jour à la fin du corps de la boucle pour éviter les boucles infinies.

Exemple：


$i: 1;
@while $i < 4 {
  .item-#{$i} {
    width: 100px * $i;
  }
  $i: $i + 1;
}

Ce code génère trois classes .item-1, .item-2 et .item-3 et définit leurs largeurs respectivement à 100 px, 200 px et 300 px.

Résumer

Les trois structures de boucle SCSS @for, @each et @while sont utilisées pour boucler par index, parcourir des données de type liste ou carte et générer des styles basés respectivement sur des boucles conditionnelles. Ces structures de boucles rendent SCSS plus puissant et flexible, capable de générer des règles CSS complexes en fonction des besoins.

Fonctions personnalisées et utilisation

Dans SCSS, les feuilles de style peuvent être améliorées avec des fonctions personnalisées qui acceptent des paramètres et renvoient des valeurs traitées.

Définir des fonctions personnalisées

Dans SCSS, utilisez le mot-clé @function pour définir des fonctions qui peuvent avoir des paramètres et des valeurs de retour. Par exemple, nous définissons une fonction pour calculer la largeur totale du modèle de boîte d'un élément :


@function total-width($padding, $border, $margin, $content-width) {
  @return $padding + $border + $margin + $content-width;
}

Dans l'exemple ci-dessus :

largeur totale est le nom de la fonction.
La fonction accepte quatre paramètres : $padding, $border, $margin, $content-width.
L'instruction @return est utilisée pour renvoyer une valeur calculée.

Utiliser des fonctions personnalisées

Une fois qu'une fonction est définie, elle peut être utilisée dans des styles pour calculer et générer les valeurs requises. Par exemple:


.element {
  width: total-width(10px, 1px, 5px, 100px);
}

Dans cet exemple, la fonction largeur totale sera appelée avec les paramètres 10px, 1px, 5px et 100px. Le résultat renvoyé par la fonction (116px) sera appliqué à la propriété width de .element.

Précautions

Les fonctions peuvent être incluses dans n'importe quel fichier SCSS et peuvent être organisées et importées comme d'autres règles de style.
Toutes les fonctionnalités de SCSS, telles que les instructions de contrôle (telles que @if, @for, @each, @while) et les fonctions intégrées, peuvent être utilisées dans les fonctions.
Les paramètres de la fonction peuvent être n'importe quel type de données SCSS, y compris des nombres, des chaînes, des couleurs, etc.

Devoirs

Utilisez SCSS pour changer le thème noir et blanc de la page

html


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="main.css">
  <title>黑白色主题切换</title>
</head>
<body>
  <div class="container">
    <button id="theme-toggle">切换主题</button>
    <div class="box">
      <div class="content">
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
      </div>
    </div>
  </div>
 
  <script src="main.js"></script>
</body>
</html>

SCSS


// 定义轻主题的样式变量
$light-theme: (
  background-color: white,
  text-color: black,
  highlight-color: #f0f0f0
);
 
// 定义暗主题的样式变量
$dark-theme: (
  background-color: black,
  text-color: white,
  highlight-color: #333333
);
 
// 定义一个混合（mixin）来应用主题样式
// 参数 $theme: 要应用的主题，是一个包含背景色、文本颜色和高亮颜色的映射（map）
@mixin theme($theme) {
  background-color: map-get($theme, background-color);
  color: map-get($theme, text-color);
 
  // 为 .box 类应用主题的高亮颜色
  .box {
    background-color: map-get($theme, highlight-color);
  }
}
 
// 应用轻主题样式到 body 元素，并添加过渡效果
body {
  @include theme($light-theme);
  transition: all 0.3s ease;
}
 
// 为 body 的 dark 类应用暗主题样式
body.dark {
  @include theme($dark-theme);
}
 
// 设置容器的文本居中和顶部间距
.container {
  text-align: center;
  margin-top: 20px;
}
 
// 配置主题切换按钮的样式
#theme-toggle {
  padding: 10px 20px;
  cursor: pointer;
  border: none;
  outline: none;
  background-color: #007bff;
  color: white;
  font-size: 16px;
  border-radius: 5px;
}
 
// 鼠标悬停在主题切换按钮上时改变背景色
#theme-toggle:hover {
  background-color: #0056b3;
}
 
// 定义 .box 类的基本样式和过渡效果
.box {
  margin: 20px auto;
  padding: 20px;
  width: 50%;
  border: 1px solid #ccc;
  transition: all 0.3s ease;
 
  // 内容区域的样式配置
  .content {
    p {
      margin: 10px 0;
    }
  }
}


/**
 * 为主题切换按钮添加点击事件监听器
 * 当按钮被点击时，切换文档主体的黑暗主题样式
 * 
 * 该函数通过toggle方法动态切换body元素的'dark'类，从而实现主题的切换。
 * 如果body已经应用了'dark'类，那么点击按钮将移除这个类，反之亦然。
 * 这种方式允许用户在黑暗主题和默认主题之间自由切换。
 */
document.getElementById('theme-toggle').addEventListener('click', () => {
  document.body.classList.toggle('dark');
});

Partage de technologie

concepts et utilisation du scss

qu'est-ce que le scss

Comparaison entre scss et css

Utilisation de scss

déclarer des variables

Différencier les variables par défaut

Distinguer les variables globales et les variables locales

Syntaxe imbriquée

Imbrication du sélecteur

imbrication de base

Référence du sélecteur parent imbriqué (&)

Considérations sur l'imbrication

imbriqué imbriqué

Imbrication de propriétés

Imbrication d'attributs de base

Considérations sur l'imbrication

hériter

Utilisation de base

Notes sur l'héritage

Scénarios d'application

Espace réservé %

définir un espace réservé

espace réservé à l'héritage

Avantages et scénarios applicables

Précautions

Mélanger @mixin

Définir le mélange

mélange d'appels

exemple

Avantages et scénarios applicables

Précautions

SCSS utilise des instructions conditionnelles

@if déclaration

@else et @else if instructions

Imbrication d'instructions conditionnelles

en conclusion

Trois types de boucles dans SCSS

boucle @for

@chaque boucle

@while boucle

Résumer

Fonctions personnalisées et utilisation

Définir des fonctions personnalisées

Utiliser des fonctions personnalisées

Précautions

Devoirs

Profil personnel

mes coordonnées