さまざまなSASSアーキテクチャをご覧ください

プロジェクトの尺度と複雑さが増加するにつれて、SASSファイルを整理するための構造化されたアプローチが不可欠になります。 これは、ファイルとフォルダーの作成に関する確立されたガイドラインを順守することが非常に重要である大規模なチームやプロジェクトに特に当てはまります。いくつかの一般的なSASSアーキテクチャテクニックを調べてみましょう

キーテイクアウト：

• Bootstrap-Sass：分解を必要とする複雑なミキシンを備えたプロジェクトや、コンポーネントの視覚スタイルからのミックスロジックを隠すときに最適です。 すべての変数に対して単一のファイルと、各コンポーネントに個別のファイルを使用します。 Zurb Foundation：カスタマイズに最適です。特に小規模から中規模のWebサイトに適しています。 コンポーネント固有の変数とミキシン、および単一のファイル内の論理的に構造化されたグローバルミキシンを介して高い柔軟性を提供します。
• Dale Sandeのアーキテクチャ：スタイルのプロトタイプ：
コンパイル時間と初期ファイル管理を増やしている間、このアプローチは中〜大規模プロジェクトに有益です。コンポーネント設計の構成、機能、およびプレゼンテーションの側面を明確に分離し、特に共同環境で保守性を向上させます。
• bootstrap-sass：
• Bootstrapのデザインは、迅速なWeb開発を優先しています。 そのSASSアーキテクチャは、すべての変数を単一のファイルに集中させ、Mixinロジックを非表示に保つことにより、これを反映しています。各コンポーネントは独自のSASSファイルにあります。 ミキシンは一意に整理されています：

フォルダーからすべてのファイルをインポートし、それぞれに単一のミックスが含まれています。 これにより、層状構造が作成されます（たとえば、

からインポートされたミキシンを使用して、からインポートするミキシンを使用します）。 このアプローチは、非常に複雑なミキシンがさらに故障する必要があるプロジェクトに最適です。 フォルダー構造：

_variables.scss_mixins.scssZurb Foundation：mixins_buttons.scss _mixins.scss財団のアーキテクチャはカスタマイズに優れています。 ルートレベルのmixins/_buttons.scssファイルを使用すると、可変オーバーライドが可能になり、各コンポーネントファイルには独自のコンポーネント固有の変数が含まれています。 関数は

に分離され、フレームワークの一貫性を促進します。グローバルミキシンは

。

にあります

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

フォルダー構造：

デールサンデのアーキテクチャ：

settings.scss

このモジュラーアプローチは、個々のフォルダー内でモジュール関連のロジックを整理するエンタープライズレベルのプロジェクトに最適です。 これにより、スコープされた拡張機能と再利用が可能になり、パフォーマンスが向上するための個別のスタイルシートの作成が簡素化されます。

フォルダー構造：

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

スタイルのプロトタイプ：

このアプローチは、初期セットアップコストが高い間、中〜大規模プロジェクトの優れた組織を提供します。 コンポーネントは分類され（ベース、コンポーネント、レイアウトなど）、それぞれ

、_variables.scss、_mixins.scss、およびマニフェストファイルがあります。 懸念のこの明確な分離は、コラボレーションと保守性を高めます _extends.scssフォルダー構造：

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

結論：

最適なSASSアーキテクチャは、プロジェクトの複雑さ、時間の考慮事項、およびチームの好みに依存します。 より深いネスティングにより、コンパイル時間が増加することを忘れないでください。 ワークフローに合った方法を選択し、必要に応じて調整します。 重要なのは、一貫性と保守性です。

以上がさまざまなSASSアーキテクチャをご覧くださいの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。