Ein Blick auf verschiedene Sass -Architekturen

Wenn die Projektskala und die Komplexität zunehmen, wird ein strukturierter Ansatz zum Organisieren von SASS -Dateien wesentlich. Dies gilt insbesondere für große Teams und Projekte, in denen die Einhaltung etablierter Richtlinien für die Erstellung von Dateien und Ordner entscheidend ist. Lassen Sie uns mehrere beliebte Sass -Architekturtechniken untersuchen.

Key Takeaways:

• Bootstrap-SASS: Das Beste für Projekte mit komplizierten Mixins, die eine Zersetzung benötigen oder wenn Mixin-Logik aus den visuellen Stilen der Komponenten verbergen wird. Es wird eine einzige Datei für alle Variablen und eine separate Datei für jede Komponente verwendet.
• ZURBENS FORMATION: ideal für die Anpassung, insbesondere für kleine bis mittelgroße Websites geeignet. Es bietet eine hohe Flexibilität durch komponentenspezifische Variablen und Mixins sowie logisch strukturierte globale Mixins in einer einzelnen Datei.
• Dale Sandes Architektur: Ein modularer Ansatz, der für groß angelegte Projekte gut geeignet ist. Es hält alle modulbezogenen Logik in seinem eigenen Ordner und ermöglicht die Umweichung von Scoped Extension und Style-Wiederverwendung. Dies verbessert die Leistung durch Erleichterung der Erstellung separater Stylesheets für einzelne Module.
• Stilprototypen: Während der Erhöhung der Kompilierungszeit und des anfänglichen Dateimanagements ist dieser Ansatz für mittlere bis große Projekte von Vorteil. Es trennt deutlich Konfiguration, funktionale und präsentative Aspekte des Komponentendesigns und verbessert die Wartbarkeit, insbesondere in kollaborativen Umgebungen.

Bootstrap-SASS:

Bootstraps Design priorisiert die schnelle Webentwicklung. Die SASS -Architektur spiegelt dies wider, indem alle Variablen in einer einzelnen _variables.scss -Fatei zentralisiert und Mixin -Logik versteckt bleibt. Jede Komponente liegt in einer eigenen SASS -Datei. Mixins sind einzigartig organisiert: _mixins.scss importiert alle Dateien aus einem mixins -Fordner, der jeweils ein einzelnes Mixin enthält. Dies erzeugt eine geschichtete Struktur (z. B. Tastenstile in _buttons.scss Verwenden Sie Mixins, die aus _mixins.scss importiert wurden, was wiederum aus mixins/_buttons.scss importiert wird). Dieser Ansatz eignet sich am besten für Projekte mit hochkomplexen Mixins, die einen weiteren Zusammenbruch benötigen oder bei der Trennung von Logik von visuellen Stilen priorisiert wird.

Ordnerstruktur:

<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>

Zurb Foundation:

Die Architektur der Foundation zeichnet sich bei der Anpassung aus. Eine Root-Level-Datei

ermöglicht variable Überschreibungen, während jede Komponentendatei ihre eigenen Komponenten-spezifischen Variablen enthält. Funktionen werden in settings.scss unterteilt, wodurch die Rahmenkonsistenz gefördert wird. Globale Mixins befinden sich in functions.scss. components/_globals.scss

Ordnerstruktur:

<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>

Dale Sandes Architektur:

Dieser modulare Ansatz ist ideal für Projekte auf Unternehmensebene und organisiert die modulbedingte Logik in einzelnen Ordnern. Dies ermöglicht eine umfassende Erweiterung und Wiederverwendung und vereinfacht die Erstellung separater Stylesheets für eine verbesserte Leistung.

Ordnerstruktur:

<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>

Stilprototypen:

Dieser Ansatz bietet zwar höhere anfängliche Einrichtungskosten, bietet eine hervorragende Organisation für mittelgroße bis große Projekte. Komponenten werden kategorisiert (z. B. Basis, Komponenten, Layouts), und jeweils hat _variables.scss, _mixins.scss, _extends.scss und eine Manifestdatei. Diese klare Trennung von Bedenken verbessert die Zusammenarbeit und Wartbarkeit.

Ordnerstruktur:

<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>

Schlussfolgerung:

Die optimale SASS -Architektur hängt von der Projektkomplexität, dem Kompilieren von Zeitüberlegungen und den Teampräferenzen ab. Denken Sie daran, dass eine tiefere Verschachtelung die Kompilierungszeit erhöht. Wählen Sie eine Methode, die zu Ihrem Workflow passt und nach Bedarf anpassen. Der Schlüssel ist Konsistenz und Wartbarkeit.

Das obige ist der detaillierte Inhalt vonEin Blick auf verschiedene Sass -Architekturen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!