Un regard sur différentes architectures SASS

À mesure que l'échelle du projet et l'augmentation de la complexité, une approche structurée de l'organisation des fichiers SASS devient essentielle. Cela est particulièrement vrai pour les grandes équipes et projets, où l'adhésion aux directives établies pour la création de fichiers et de dossiers est cruciale. Examinons plusieurs techniques d'architecture SASS populaires.

Prise des clés:

• Bootstrap-Sass: Meilleur pour les projets avec des mélanges complexes nécessitant une décomposition ou lors de la dissimulation de la logique de mélange à partir de styles visuels composants souhaités. Il utilise un seul fichier pour toutes les variables et un fichier séparé pour chaque composant.
• Fondation de zurb: Idéal pour la personnalisation, particulièrement adapté aux sites Web de petite à moyenne taille. Il offre une forte flexibilité grâce à des variables et des mélanges spécifiques aux composants et à des mixins globaux structurés logiquement dans un seul fichier.
• Architecture de Dale Sande: Une approche modulaire bien adaptée aux projets à grande échelle. Il conserve toute la logique liée au module dans son propre dossier, permettant une extension et une réutilisation de style portée. Cela améliore les performances en facilitant la création de feuilles de style séparées pour les modules individuels.
• Prototypes de style: Tout en augmentant le temps de compilation et la gestion initiale des fichiers, cette approche est bénéfique pour les projets moyens à grands. Il sépare clairement les aspects de configuration, fonctionnels et de présentation de la conception des composants, améliorant la maintenabilité, en particulier dans les environnements collaboratifs.

Bootstrap-Sass:

La conception de Bootstrap priorise le développement Web rapide. Son architecture SASS reflète cela en centralisant toutes les variables dans un seul fichier _variables.scss et en gardant la logique de mixin cachée. Chaque composant réside dans son propre fichier SASS. Les mixins sont organisés de manière unique: _mixins.scss importe tous les fichiers à partir d'un dossier mixins, chacun contenant un seul mixin. Cela crée une structure en couches (par exemple, les styles de bouton dans _buttons.scss utiliser des mixins importés de _mixins.scss, qui à leur tour importent de mixins/_buttons.scss). Cette approche est la meilleure pour les projets avec des mélanges très complexes nécessitant une rupture supplémentaire ou lors de la séparation de la logique des styles visuels est priorisé.

Structure du dossier:

<code>bootstrap/
|– bootstrap.scss   # Manifest file
|– _alerts.scss     # Component file
|– _buttons.scss    # Component file
|– _mixins.scss     # Mixin file – imports all files from mixins folder
|–  ...             # Etc..
|– mixins/
|  |–  _alerts.scss # Alert mixin
|  |– _buttons.scss # Button mixin
|  |– ...           # Etc..</code>

Fondation de zurb:

L'architecture de la Fondation excelle à la personnalisation. Un fichier settings.scss au niveau de la racine permet des remplacements de variables, tandis que chaque fichier de composant inclut ses propres variables spécifiques aux composants. Les fonctions sont séparées en functions.scss, favorisant la cohérence du cadre. Les mixins mondiaux sont situés dans components/_globals.scss.

Structure du dossier:

<code>foundation/
|– foundation.scss           # Manifest file
|– foundation
|  |– _functions.scss        # Library specific functions
|  |– _settings.scss         # Change variables for the entire project
|  |– components
|  |  |– _buttons.scss       # Component file (will import _globals.scss)
|  |  |– _globals.scss       # Global mixins
|  |  |– _alerts.scss        # Component file (will import _globals.scss)</code>

Architecture de Dale Sande:

Cette approche modulaire est idéale pour les projets au niveau de l'entreprise, organisant la logique liée au module dans les dossiers individuels. Cela permet une extension et une réutilisation dans les parasites, et simplifie la création de feuilles de style séparées pour des performances améliorées.

Structure du dossier:

<code>bootstrap/
|– bootstrap.scss   # Manifest file
|– _alerts.scss     # Component file
|– _buttons.scss    # Component file
|– _mixins.scss     # Mixin file – imports all files from mixins folder
|–  ...             # Etc..
|– mixins/
|  |–  _alerts.scss # Alert mixin
|  |– _buttons.scss # Button mixin
|  |– ...           # Etc..</code>

Prototypes de style:

Cette approche, tout en ayant un coût d'installation initial plus élevé, offre une excellente organisation pour les projets moyens à grands. Les composants sont classés (par exemple, base, composants, dispositions), et chacun a _variables.scss, _mixins.scss, _extends.scss, et un fichier manifeste. Cette séparation claire des préoccupations améliore la collaboration et la maintenabilité.

Structure du dossier:

<code>foundation/
|– foundation.scss           # Manifest file
|– foundation
|  |– _functions.scss        # Library specific functions
|  |– _settings.scss         # Change variables for the entire project
|  |– components
|  |  |– _buttons.scss       # Component file (will import _globals.scss)
|  |  |– _globals.scss       # Global mixins
|  |  |– _alerts.scss        # Component file (will import _globals.scss)</code>

Conclusion:

L'architecture SASS optimale dépend de la complexité du projet, des considérations de temps de compilation et des préférences d'équipe. N'oubliez pas que la nidification plus profonde augmente le temps de compilation. Choisissez une méthode qui convient à votre flux de travail et ajustez au besoin. La clé est la cohérence et la maintenabilité.

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!