目錄配置
1 2 3 | web_root/ css/ less/ |
檔案規劃配置
1 2 3 4 5 | less/ lib.less module.less main.less single.less |
檔案說明
lib.less
lib.less 專寫設定 Variables 或是 Mixins用。
module.less
module.less 用來寫會被重覆使用的class，當然也可以再分更細一點，例如module_aaa.less、module_bbb.less這樣。
single.less
single.less 用來寫專屬某頁或是某class用而已，當然也可以再分更細一點，例如single_aaa.less、single_bbb.less這樣。
main.less
main.less 用來整合載入所有的less檔案，後面Compiled的步驟就只要Compiled main.less就可以了。
main.less內容
1 2 3 4 5 6 7 | // css @import "../css/xxx.css"; // less @import "lib"; @import "module"; @import "single"; |
Compiled Main.less
1 | lessc -x main.less > ../css/main.css |
結論
最後Compiled Main.less後會在css資料夾產生一隻main.css的檔案，這隻檔案內容就是所有less編譯後及載入css，所以在html裡面只要載main.css這隻css檔案就可以了，可以少掉以往很多的css檔案，而且這樣的配置可以讓開發者清楚有個規範在，不會說一隻less就寫到底，變數或function在各個less檔案裡面，以後要接手的人也可以很快就瞭解在寫什麼。