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

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

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

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

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

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

將部分導(dǎo)入到主樣式表中——主樣式表通常是主樣式表。sass文件。

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

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

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

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

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

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

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

_components。sass——所有可重復(fù)使用的東西——按鈕、導(dǎo)航條、卡片等等

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

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

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

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

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

_app。sass -進(jìn)口

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

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

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

其次，這種結(jié)構(gòu)更容易維護(hù)，因?yàn)橹挥幸粋€(gè)文件。

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

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

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

這個(gè)結(jié)構(gòu)的名稱來自7個(gè)文件夾，1個(gè)文件。這種結(jié)構(gòu)被許多人使用，因?yàn)樗徽J(rèn)為是大型項(xiàng)目的良好基礎(chǔ)。你所需要做的就是將這些部分組織到7個(gè)不同的文件夾中，并且在根級(jí)別上應(yīng)該有一個(gè)單獨(dú)的文件(app.sass)來處理導(dǎo)入。

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

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

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

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

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

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

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

供應(yīng)商部分是為引導(dǎo)框架設(shè)計(jì)的，因此，如果您在項(xiàng)目中使用一個(gè)框架，請(qǐng)創(chuàng)建這個(gè)部分。

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

組織

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

便利化

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

最后的話

組織代碼對(duì)于開發(fā)人員來說是必不可少的，它和其他所有技能一起，是改進(jìn)站點(diǎn)功能的最有效的方法。即使有多種組織方式和不同的策略，選擇簡(jiǎn)單可以幫助你避免危險(xiǎn)的陷阱。最后，沒有正確或錯(cuò)誤的選擇，因?yàn)橐磺卸既Q于開發(fā)者的工作策略。