根據(jù)所從事項目的大小，可以用兩種方式構(gòu)建Sass代碼:一種簡單的方式適用于較小的項目，另一種復雜的方式適用于較大的項目。繼續(xù)往下讀，看看你是怎么做到的。

Sass——CSS的延伸臂使代碼變得優(yōu)雅的強大因素。

使用Sass，它是關(guān)于變量、嵌套、混合、函數(shù)、部分、導入、繼承和控制指令的。Sass使您的代碼更易于維護和重用。

現(xiàn)在，我將向您展示如何使您的代碼更加結(jié)構(gòu)化和有組織。

當項目展開時，文件和文件夾的組織是至關(guān)重要的。隨著文件結(jié)構(gòu)的顯著增加，對目錄進行模塊化是必要的。這意味著結(jié)構(gòu)是有序的。這里有一個方法。

通過使用部分將樣式表劃分為單獨的文件

將部分導入到主樣式表中——主樣式表通常是主樣式表。sass文件。

為布局特定的文件創(chuàng)建一個布局文件夾

Sass結(jié)構(gòu)的類型

你可以使用一些不同的結(jié)構(gòu)。我喜歡使用兩種結(jié)構(gòu)——一個簡單的和一個更復雜的。讓我們來看看。

結(jié)構(gòu)簡單

這種簡單的結(jié)構(gòu)對于單個web頁面這樣的小項目來說很方便。為此，您需要創(chuàng)建一個非常小的結(jié)構(gòu)。下面是一個例子:

_base。包含所有的重置，變量，混合，和工具類

_layout。所有處理布局的sass代碼，也就是容器和網(wǎng)格系統(tǒng)

_components。sass——所有可重復使用的東西——按鈕、導航條、卡片等等

_main。sass—主要部分應該只包含已經(jīng)提到的文件的導入

同樣簡單結(jié)構(gòu)的另一個例子如下:

_core。sass -包含變量、重置、混合和其他類似的樣式

_layout。sass -有頁眉、頁腳、網(wǎng)格系統(tǒng)等的樣式

_components。sass——項目中每個必要組件的樣式，包括按鈕、模態(tài)等。

_app。sass -進口

這是我通常用于小型項目的方法。當涉及到?jīng)Q定使用哪種結(jié)構(gòu)時，項目的大小往往是決定因素。

為什么要使用這種結(jié)構(gòu)?

使用這種組織結(jié)構(gòu)有幾個優(yōu)點。首先，CSS文件會緩存，這樣一來，每次訪問新頁面都需要下載一個新文件的需求就減少了。這樣，HTTP請求也會減少。

其次，這種結(jié)構(gòu)更容易維護，因為只有一個文件。

第三，CSS文件可以被壓縮，從而減少它們的大小。為了獲得更好的結(jié)果，建議使用Sass/Less，然后對文件進行連接和縮小。

如果文件變得雜亂無章，則需要擴展結(jié)構(gòu)。在這種情況下，您可以為組件添加一個文件夾，并將其進一步分解為單獨的文件。如果項目擴大，并且需要重組整個Sass結(jié)構(gòu)，那么考慮下一個更復雜的模式。

7-1圖案的結(jié)構(gòu)

這個結(jié)構(gòu)的名稱來自7個文件夾，1個文件。這種結(jié)構(gòu)被許多人使用，因為它被認為是大型項目的良好基礎(chǔ)。你所需要做的就是將這些部分組織到7個不同的文件夾中，并且在根級別上應該有一個單獨的文件(app.sass)來處理導入。

在抽象的partial中，有一個包含所有變量、mixin和類似組件的文件。

核心部分包含排版、重置和樣板代碼等文件，在整個網(wǎng)站中使用。一旦編寫了這段代碼，就不再有進一步的覆蓋。

Components partial包含了要為一個網(wǎng)站創(chuàng)建的所有組件的樣式，包括按鈕、旋轉(zhuǎn)木馬、選項卡、模態(tài)等等。

布局部分包含網(wǎng)站布局所需的所有樣式，如頁眉、頁腳。

頁面部分包含每個單獨頁面的樣式。幾乎每個頁面都需要特定的樣式，這些樣式只能用于特定的頁面。

為了使每個section都可重用，sass代碼易于訪問，有section /塊的部分。同樣，擁有這個部分也很重要，這樣您就不需要搜索特定的代碼是否在home中。sass約。頁面部分中的sass文件。

將每個部分放在單獨的.sass文件中是一個好主意。因此，如果你有兩個不同的英雄節(jié)，把代碼放到同一個文件中，你就可以在那里找到這兩個節(jié)的代碼。如果你遵循這個模式，你會在這個文件夾里有大部分的文件。

供應商部分是為引導框架設(shè)計的，因此，如果您在項目中使用一個框架，請創(chuàng)建這個部分。

與其在文件中有大量導入，不如創(chuàng)建一個all。每個文件夾中都有sass文件。每一個。sass文件應該包含該文件夾的所有導入——為了使其更加可見和可理解，創(chuàng)建一個主文件。

組織

這種結(jié)構(gòu)的最大好處是組織。如果你需要改變某些特定的東西，你總是知道去哪里檢查。例如，如果你想改變一個區(qū)段/塊的間距，你直接去區(qū)段/塊文件夾。這樣，您就不需要在文件夾中查找文件中的類。

便利化

當代碼被結(jié)構(gòu)化時，流程就會迅速地得到簡化。它們是流線型的，每個代碼片段都有自己的位置。

最后的話

組織代碼對于開發(fā)人員來說是必不可少的，它和其他所有技能一起，是改進站點功能的最有效的方法。即使有多種組織方式和不同的策略，選擇簡單可以幫助你避免危險的陷阱。最后，沒有正確或錯誤的選擇，因為一切都取決于開發(fā)者的工作策略。