前言
RWD 樣式架構與管理，通常是在大型網站管理與開發的一項重點。
自從將幾個專案改用 BEM、Smacss、OOCSS 的概念來開發樣式，切分在通用性質在大型專案中可以讓專案更好管理，往後其他專案要使用使，也可以增加或是重覆利用，樣式元件化與取用元件，可以帶來更大的泛用與不影響框架的基底加疊出來。
Less 舊專案要優化程式碼與架構方向
回頭來看先前寫 RWD CSS 的架構與管理，主要切分為區塊、頁面、斷點為主，當實還不了解元件化與工具類型樣式的規劃與定義，正巧近期有舊專案要增加功能需求，心一橫想說可以的話來驗証較好的管理方式，除了可以讓之後好管理外，另外也可以在讓自已對 BEM、Smacss、OOCSS 的掌握度更高。
Less 與 Bootsrap 3 舊專案有二個大問題要改善
- 以區塊架構命名和過巢的結構，這樣的處理方式就像要拿起一串葡萄一樣牽一髮動全身，也不像元件化後可獨立新增與擴充，讓使用與管理上更有彈性與好規劃，這部份因為不太想動太多，所以除了整理到特定的分類拆分檔後，基本上就不太修改太多，很怕一改之後要改更多。
- 自適應斷點樣式針對特定的斷點寬度，將特定的區塊架構的命名樣式照結構來處理，這點因為先前寫的很巢，在所有的樣式都只放在一支斷點的拆分檔內，可想而知要找到特定的命名與樣式又或是新加入的話，要花費的心力與時間就更多了，又由其是在太巢的情形下，滾著卷軸找樣式可真的會要命。
為了讓拆分出來的內容可以整理到特定的區塊樣式的單一檔案中，斷點內的樣式最好也寫在同一支區塊樣式的拆分檔中。
將 media 斷點樣式 Mixin 與配合拆分
比照 Scss 使用 Mixin 來將 media 斷點樣式的使用概念 ([重點整理]-Sass實戰全攻略-成為前1%的CSS頂尖好手-32. 掌握 Mixin 後，寫 RWD 再也不是痛苦事)，讓 Less 的 Mixin 參照使用外也可以讓 Less 在特定的拆分檔中使用，讓之後的管理可以更加方更。
Less Mixin 斷點語法
設定特定斷點變數
使用下面的範例所引用的 Less 變數，分別針對不同的斷點宣告變數。
1 2 3 | @phone: ~"screen and (max-width: 479px)"; @tablet: ~"screen and (min-width: 480px) and (max-width: 767px)"; @desktop: ~"screen and (min-width: 768px)"; |
1 2 3 4 5 | @xs_max: ~"screen and (max-width: 767px)"; @sm_min: ~"screen and (min-width: 768px)"; @md_min: ~"screen and (min-width: 992px)"; @md_max: ~"screen and (max-width: 992px)"; // 特定點斷 @lg_min: ~"screen and (min-width: 1200px)"; |
特定樣式使用斷點變數
在 .myElement 元素下會透過 @media 方法帶入對應斷點變數，在斷點變數帶入要使用樣式的屬性與值。
1 2 3 4 5 | .myElement { @media @phone { padding: 10px; } @media @tablet { padding: 20px; } @media @desktop { padding: 30px; } } |
輸出編譯後的 CSS 會針對不同的斷點產生斷點需用的屬性與值。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | @media screen and (max-width: 479px) { .myElement { padding: 10px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .myElement { padding: 20px; } } @media screen and (min-width: 768px) { .myElement { padding: 30px; } } |