104f22695e872d6d4965c3ce7b1cdf7.png
事情的開始是這樣的
項目要重構(gòu)UI，然而老孟的css功力很淺很淺，對sass更是一知半解。學(xué)習(xí)機(jī)會來了~~
情況不妙
原項目是用ionic搞得，框架本身提供了茫茫多的sass變量提供給開發(fā)者進(jìn)行自定義主題，長下面這樣：
ionicsass.png
梳理了一下老代碼發(fā)現(xiàn)事情沒那么簡單，主要問題如下：
- 原開發(fā)者絲毫不理會官方方案，所有主題相關(guān)的樣式均使用高權(quán)重選擇器強(qiáng)硬覆蓋。
- 所有主題樣式全擠在app.scss一個文件里。
- pages各玩各的，缺乏通用樣式，冗余代碼太多。
- 老員工們并不怎么會ng，沒有擁抱組件化，通用組件~~零
dark.jpg
規(guī)范的推進(jìn)勢在必行......
出于上述問題，修改官方提供的改變量方式可以扔一邊了~~我的方案如下：
- 少覆蓋多擴(kuò)展，繞開問題1的坑。
- 制定規(guī)范防止問題2，問題3惡化。
- 至于問題4，放棄吧。想解決這個問題需要對其他員工進(jìn)行培訓(xùn)，成本太高。介于公司性質(zhì)和灑家的江湖地位，這事兒別想了。
關(guān)于方案1
其實方案1并不合理，但我一己之力難以改變其他組員的錯誤使用方式，這是一種將錯就錯的妥協(xié)。關(guān)于此事兒我一句也不想提。
關(guān)于方案2
所謂難者不會，會者不難。對不起，我是難者。（；′д｀）ゞ全寫在app.scss顯然不靠譜。老孟堅信好的項目是結(jié)構(gòu)美麗的。谷歌一下如何布置sass的結(jié)構(gòu)，推薦下面這篇影響力較大的文章，其他優(yōu)秀文章不一一列舉了。
https://www.sitepoint.com/architecture-sass-project
說得很細(xì)，由于ng本身的組件化特性，就沒必要搞得像文中那么復(fù)雜了。暫定結(jié)構(gòu)如下：
//main.scss單純作為入口，引入所有文件。
// Modules and Variables
@import './modules/_all.scss';
//Base
@import "./base/_layout.scss";
//Cover
@import "./cover/footer"
解釋一下：
modules文件夾放變量和函數(shù)們，簡化寫法，易于迭代。
base文件夾存放通用的碎片樣式。比如居中之類的非業(yè)務(wù)性的寫法。
cover是對ionic提供的組件的覆蓋與擴(kuò)展。其實叫components更合適，但angular對component的‘私有’樣式另有寫法，結(jié)合目前的狀況（看問題一），干脆叫cover了。
剩下的工作就是往上搬磚了。
做個總結(jié)吧:
純主觀看法：
- 不做一票兒買賣,寫一步想兩步，考慮日后的迭代和擴(kuò)展。
- 適度抽象，sass有變量和各種繼承寫法，純css可以用屬性和類名控制（我對此也沒啥經(jīng)驗，說這話有點虛）。
- 業(yè)務(wù)是業(yè)務(wù)，組件是組件，框架是框架。分開管理別抱團(tuán)。
- 勤看官網(wǎng)少吃虧！經(jīng)驗主義不可取。
硬廣結(jié)尾：
這個官網(wǎng)不是我做的...
