你是如何去組織項目中的 Less/Sass 代碼的？

01-06

包括但不限於提取哪些公共變數、定義哪些 maxin、如何設計目錄結構等等。
你都有哪些經驗？或者會遵循哪些規範？

很多時候，大家更為關心的如何在項目中使用Sass。其實這是一個很簡單的問題，只是從未動手過而以。這裡說說是怎麼將Sass和項目結合在一起。

在平時做項目的時候，項目中都會包括幾個常用的文件目錄：

css：主要放置.css文件
js：主要放置.js文件
images：主要放置圖片文件
html：主要放置.html或.php之類文件（我一般喜歡直接放在項目根錄下）

而Sass用到項目中並和上面無太多的差別，只需要在項目中創建一個sass目錄，好放置.scss或者.sass文件。前面也說過了，最終在Web調用的文件是編譯出來的.css文件。在沒有一定經驗的時候，可以將所有的.scss文件放在sass目錄中。你也可以將其細分出來，因為很多代碼不只用於一個項目，可以用到其他項目當中，我常常是這樣組織我的.scss文件：

項目組織結構：

sass目錄結構：

style.scss文件引用：

這是一個簡單的項目，其實喜歡Sass的同學，可以看看其他項目的是如何組織相關文件，比如說Foundation、Bootstrap和Compass等。

組織Sass文件

管理Sass項目文件結構

【Sass初級】如何組織一個Sass項目

將你的CSS項目轉換成Sass

1. 模塊化：不同的模塊寫在不同的文件；比如 modal 模塊，使用 Less/Sass 的嵌套特性，把和 modal 相關的樣式都寫在 .modal 這個類下：

// modal.less .modal { .modal-header { } //... }

// btn.less .btn { .btn-primary { } //... }

以此實現模塊間的隔離。

2. 層次化：一般可以劃分為以下幾個層次：

normalize/reset.less
variables/theme.less
mixin/util.less
layout.less
component(modal/btn).less
module/business.less

可以參考 twbs/bootstrap · GitHub 的代碼。

3 自由組織：使用 Less/Sass 提供的 @import （File: SASS_REFERENCE）自由地組織上面的模塊。

// all-page-need.less @import "normalize.less"; @import "variables.less"; @import "mixin.less"; @import "layout.less"; @import "modal.less"; ....

// page-1.less 即 module/business.less ....

4. 規範化？有很多什麼規範，說樣式前面要什麼命名空間啦，什麼啦什麼啦，我覺得都不用管！

遵循上面這四點，自由地書寫吧！

可能做得不夠好，但是還在不斷改進中，放個之前優化項目的wiki截圖（不是我做的，但是我們團隊做的）

只涉及到了目錄上的，其他規範就不說了，因為我們不用sass或者less。也只有目錄符合這個問題了。哎，css不是我強項，屬於強答了。

我在fis是這樣的。每一個模塊都有style文件夾，style裡面存放通用的less。然後在模塊里的module，widget等模塊化文件夾開啟同名依賴，只要各個less文件與js文件同名就會自動依賴進來。

之後在生產模式，我會把模塊里的less全部打包成「模塊名.css」發布到cdn

基本上一個頁面只引入兩個css文件，common.css以及module.css

-------------------------------------------

到公司了，補個圖

目錄結構是這樣的

能搜到很多的，https://www.google.com/webhp?sourceid=chrome-instantion=1espv=2ie=UTF-8#q=how%20to%20organize%20scss%20code

不過最終還是看你自己的項目怎麼合適吧，在代碼架構上，SASS/LESS並沒有給開發什麼強約束，記住這一點是很重要的。

學會Sass的語法只需要花10分鐘,但是理解一個成熟的Sass項目架構和構建一個類似的項目要花掉很多時間.

不管是Less還是Sass都強烈建議你看看BS的源碼,寫的實在是太好了,很多細節都可以從它們裡面學.再到github上找點項目看看別人的構架....

sass給我留下的印象就是架構和錯誤的嵌套疊加權重,真正的技巧很少,混入帶個null不填參數不會報錯是我搜了幾天才發現的......

組織如下：從左到右有單向的依賴關係。ruby提供的內置api，sass api（在內置api基礎上根據業務需要二次封裝的抽象方法），sassui組件（業務之間通用的基於sass api封裝的組件，分pc端和移動端），sass pages（基於public下sassui組件和業務私有module模塊組成的最終page樣式）。

npm install zsolution -g

z init [solution name]

z release [solution name]

Sass: Directory Structures To Maintain Your Code

可以參考一下

我給你說我的經驗其實意義不是非常大，這些東西很快都能學來。想起一句話：授人以魚不如授人以漁。

所以我說我當初是怎麼學less和sass的吧

曾經用過less現在用sass

用less的時候有一點經驗都木有，這個不重要，經驗都學來的，自己積累來的。

那問題來了，從哪裡學？當時立馬想到了BootStrap，仔細研究了幾遍BootStrap是怎麼用less去組織代碼的，學到了很多技巧吧，就用到了自己項目中。後來聽說用sass很多，而且BootStrap也有sass版本，很多道友也說sass更好使。經過一番研究和折騰自我感覺也是sass比less好使。用sass一樣走老路，不過用sass不只是看了BootStrap還看了其他UI框架。

最後我想說：多看那些牛逼的框架，多看大神們的傑作。

哈哈，最近在學習sass，發現他的語法真的很簡單（有CSS的基礎的同學，搜索一下阮一峰老師的有關於sass的文章看完基本上算是學完了，就這麼簡單），但是要在項目中組織sass的結構，但是一門很深的學問，本人發現了這篇大牛的文章，棒棒噠！

鏈接：管理Sass項目文件結構_Preprocessor, Sass, SCSS 教程_w3cplus

結構這事，沒有最好，只有最合適。而且不難，不在具體項目中應用，體會不到區別，細節是魔鬼！！

DoCSSa – Sass based CSS architecture and methodology