Tout d'abord, je ne listerai pas les 100 000 raisons pour lesquelles Bootstrap est transféré de moins à moins à Sass en V4. (Je prévois de comparer un autre article avec moins, Sass, PostCSS).
Allons à bootstrap v4 sass
1. Les fichiers SASS de Bootstrap sont tous placés dans le répertoire SCSS. Pourquoi le nom SCSS est-il au lieu de SASS? Il implique principalement la différence entre la syntaxe SASS et SCSS. La syntaxe SCSS est plus proche du CSS, il est donc plus populaire et largement utilisé. Pour plus de détails, veuillez consulter la syntaxe SASS
2. Il existe deux types de fichiers SCSS, l'un est le début du soulignement, comme _variables.scss, et l'autre est le non-soulignement, comme bootstrap.scss. La différence entre ces deux est que le premier représente le fichier importé et ne sera pas compilé dans le fichier CSS correspondant par défaut, tandis que le second compilera le fichier CSS correspondant. Donc, s'il y a deux fichiers _A.SCSS, le résultat de la compilation par défaut de B.CSS est que seuls les fichiers B.CSS sont compilés. Si B souhaite utiliser le style dans _A.SCSS, vous pouvez utiliser la fonction d'importation @Import A (le fichier importé peut omettre le nom de suffixe de soulignement et de fichier). Pour plus de détails, veuillez consulter la syntaxe SASS
3. Si nous compilons l'intégralité du répertoire SCSS, nous pouvons obtenir quatre fichiers CSS, divisés en bootstrap.css, bootstrap-flex.css, bootstrap-reboot.css, bootstrap- grrid.css. Ces quatre styles CSS sont générés par les quatre fichiers SCSS suivants.
Bootstrap-Reboot est un style de réinitialisation et Bootstrap-Grid est un style de grille. Ces deux peuvent être considérés comme un style séparé gratuit. Si vous ne souhaitez pas utiliser l'intégralité du style bootstrap dans certains scénarios, mais que vous souhaitez utiliser son système de réinitialisation ou de grille, vous pouvez les utiliser directement.
La différence entre bootstrap et bootstrap-flex est que le premier utilise la méthode de mise en page traditionnelle, tandis que le second utilise la méthode Flex, afin que vous puissiez choisir de l'utiliser en fonction de votre situation réelle. À partir de l'image ci-dessus, vous pouvez voir que Bootstrap-Flex.Scss a été réinitialisé par le $ activy-flex: true avant d'importer Bootstrap.SCSS
4. Ouvrez bootstrap.scs et vous pouvez voir que divers fichiers sont importés, qui sont divisés en 6 grands blocs, à savoir:
Variable et mixin: introduire des variables et des fichiers de mixin, où tous les fichiers du répertoire de mixin sont importés dans le fichier _mixin.scsss
Réinitialiser: Importer des fichiers normalisés et imprimer
Core: introduire des fichiers de style de base tels que la grille, la forme, la table, le bouton, etc.
Composant: introduire des fichiers de composants tels que la navigation, la carte, la chapelure, etc.
Composant JS: Introduire des fichiers de composants qui nécessitent un contrôle JS, tels que Modal, Toolsts, etc.
Utilitaire: introduisez certains fichiers de classe à l'échelle du site, avec certaines classes courantes, telles que ClearFix, Center-Block, etc.
Comment utiliser et modifier le style de bootstrap v4
Si vous connaissez SASS, vous pouvez utiliser son SASS directement; Bien sûr, si vous n'êtes pas familier avec SASS, vous pouvez trouver le bootstrap.css compilé dans le répertoire DIST / CSS.
Parlons directement d'utiliser CSS:
Introduire <link href = "bootstrap.css" rel = "Stylesheet" /> en html
Si vous devez modifier le style bootstrap, vous pouvez créer une autre feuille de style telle que style.css pour remplacer le style bootstrap. Il n'est pas recommandé de modifier directement la modification de la feuille de style bootstrap.css. Puisqu'il est écrit avec SASS, bien sûr, nous pouvons choisir un SASS de meilleure qualité. Il existe également deux façons de modifier le SASS, l'une n'est pas destructive et l'autre est destructrice.
Pour les choses destructrices, cela signifie modifier où ils n'aiment pas, et il n'y a pas de bonne astuce. Parlons ici de modifications de l'utilisation non destructive, nous pouvons adopter la méthode suivante:
Mettez tous les fichiers SCSS de bootstrap dans le répertoire bootstrap
SCSSbootstrap Directory (tous les fichiers du répertoire SCSS original dans bootstrap) bootstrap.scss ... répertoire de mixin ..._ personnalisé-variables.scss (variables personnalisées, ou variables qui écrasent le bootstrap) _Custom-mixin.scss (Mélange personnalisé) style.SCSSSSSSSSS)
Le code Style.SCSS est le suivant:
@Charset "UTF-8"; // Importer le fichier @Import "Custom-Variables"; @ Importer "personnalisé-mixin"; @ import "Bootstrap / bootstrap";
Bien sûr, si vous avez un code propre, vous voulez toujours couper les styles inutilisés, afin que vous puissiez récupérer Bootstrap.SCSS et le vérifier. Ne serait-il pas préférable de simplement supprimer l'importation de ces styles indésirables? Si vous envisagez de mettre à niveau à l'avenir, vous devez créer un nouveau fichier et introduire ce que vous voulez selon la méthode dans bootstrap.scss. Pour les styles de composants, vous devez les présenter, et si vous n'en avez pas besoin, vous devez prêter attention aux styles de noyau et de services publics, car vous utilisez peut-être ces styles de base dans votre composant.
Comment améliorer la conception SASS de Bootstrap v4
Du point de vue de l'expérience pratique personnelle, je pense que Bootstrap v4 a les défauts suivants: (pour l'opinion personnelle uniquement)
Vous pouvez en outre effectuer une planification des répertoires, comme la mise en place de tous les fichiers de composants dans le répertoire des composants et les fichiers utilitaires dans le répertoire des services publics, qui semblera plus organisé, et maintenant il est un peu dispersé et a l'air un peu désordonné.
Sans% de conception, je pense personnellement que% Design est une amélioration et est très efficace pour les déclarations de combinaison de style, en particulier certains codes compatibles courts, etc.
Il peut fournir un fichier SCSS, intégrant les fonctions des variables et du mixin, afin qu'il puisse faciliter la création de nouveaux fichiers de style et importer directement ce fichier intégré. Les variables et le mixin peuvent être déclarés avec désinvolture avec des variables de composants, et peuvent être placés dans leur composant respectif SCSS, car seuls les composants peuvent l'utiliser, plutôt que dans le fichier de variables, ce qui donne l'impression qu'il y a trop de fichiers de variables. Même la taille a un fichier de mixin, ce qui semble un peu trop.