設計規範，你怎麼支持？（二）——靜態樣式支持

　　以前上一篇文章中講了我部門的設計要求統一設計規範，前端也打算同步提供對應的落地方案。下面我就講講個人第一步——靜態樣式支持。

1、前提條件——樣式預編譯化

　　在設計規範中有很大一部分是要求設計師對於某些特定的元素，必須按照某些特定的樣式規則去設計。換句話說就是：這些規則就是咱們前端能夠抽象出來的部分，也是咱們能夠複用的規則和模塊。傳統CSS是不能一模塊的方式來開發的。咱們須要藉助SASS或LESS等，這種樣式預編譯工具。我選用的是SASS，至於SASS如何安裝，網上文章應該很多，我這裏不打算細講。咱們原有的一部分工程因爲歷史緣由還不支持這些。可是既然要推行整個部門的設計規範，就必須改造一下。

　　對於自己就有SASS的項目我就直接跳到第二步了。對於「老項目」我採用一個比較「安全」的方案——同級目錄增長一個*.scss文件，之後只修改scss文件，css文件做文輸出，供後臺打包、上線使用，至於編譯就交給gulp完成，下面是組裏今年新入職的小同窗寫的gulp 任務，我以爲寫的不錯，能夠完成個人這個降級方案。就就直接貼出來了。

　　

 1 var gulp = require('gulp');
 2 var sass = require('gulp-sass');
 3 var changed = require('gulp-changed');
 4 var debug = require('gulp-debug');
 5 // 編譯sass
 6 gulp.task('sass', function() {
 7     gulp.src('src/module/**/*.scss')
 8         .pipe(sass())
 9         .pipe(debug({title:'編譯'}))
10         .pipe(gulp.dest('src/module/'));
11 });
12 // 編譯只修改過的Sass
13 gulp.task('changedSass', function() {
14     gulp.src('src/module/**/*.scss')
15         .pipe(changed('src/module/**/*.scss', {extension: '.scss'}))
16         .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
17         .pipe(debug({title:'編譯'}))
18         .pipe(gulp.dest('src/module/'));
19 });
20 // 監聽文件變化
21 var watcher = gulp.watch('src/module/**/*.scss', ['changedSass']);
22 
23 gulp.task('default' , ['sass']);

　　簡單說一下，就是監聽xx.scss文件變化，在同級目錄下生成xx.css 文件。而後就是把項目裏的css文件的後綴名一口氣改爲scss了，運行一遍gulp就什麼都有了。固然這是爲了在不改變部署流程的狀況下，快速讓工程支持SASS，若是你是新建一個項目，我並不建議你這麼幹。

 

2、獨立於現有項目的sass工程

　　既然設計規範是服務於部門全部項目的，那麼咱們的前端樣式工程也要獨立於現有項目。我新建了一個項目用於管理sass工程。目錄以下：

　　

　　爲了考慮到未來加入對錶單的交互提供js支持，個人工程中的src下又建了一級sass文件夾，未來還有平級的js文件夾。整個工程的入口主要是ui-common-pc.scss和ui-common-wap.scss  引用各自須要的模塊。目前是圖快速就寫成了gulp-sass工程，後期加入交互模塊的js就會改爲webpack工程。

　　發佈方式主要是npm publish和gulp拷貝兩種方式分別提供給使用者和這個項目的維護者。

3、這個工程都定義了什麼？

　　咱們的設計規範主要是：顏色、字體、圖標、按鈕、標籤、佈局、圖片、表單交互，這幾部分。

　　咱們就按照這種方法抽象出不一樣的scss文件，若是有必要就區分pc、wap。固然定義方式主要分兩種： 變量和mixin。好比顏色就比較適合使用變量來定義，以下：

 1 //color
 2 //主色：紅、黑
 3 $red-color: #e43;                // 紅色
 4 $red-deep-color: #d32;            // 深紅色
 5 $red-warm-color: #f76;            // 暖紅色
 6 $red-light-color: #faa;            // 淺紅色
 7 $red-weak-color: #fff2f2;        // 淡紅色
 8 
 9 $black-3-color: #333;            // 黑色
10 $black-6-color: #666;            // 淺黑色
11 $black-9-color: #999;            // 淡黑色
12 
13 $white-color: #fff;                // 白色
14 
15 //配色：紅、橙、灰、藍、綠
16 $orange-color: #f93;             // 橙色
17 $orange-warm-color: #fb6;         // 暖橙色
18 $orange-light-color: #fc9;        // 淺橙色
19 $orange-weak-color: #fff8ee;    // 淡橙色
20 
21 $green-color: #6b3;             // 綠色
22 $green-warm-color: #8c6;         // 暖綠色
23 $green-light-color: #ad9;        // 淺綠色
24 $green-weak-color: #efe;        // 淡綠色
25 
26 $blue-color: #49e;                 // 藍色
27 $blue-warm-color: #7bf;         // 暖藍色
28 $blue-light-color: #adf;        // 淺藍色
29 $blue-weak-color: #eef3ff;        // 淡藍色
30 
31 $gray-color: #bbb;                // 灰色
32 $gray-1-color: #d8d8d8;            // 灰色(1號)
33 $gray-2-color: #e5e5e5;            // 灰色(2號)
34 $gray-3-color: #eee;            // 灰色(3號)
35 $gray-4-color: #f2f2f2;            // 灰色(4號)
36 $gray-5-color: #f5f5f5;            // 灰色(5號)
37 $gray-6-color: #f8f8f8;            // 灰色(6號)

　　而對於複雜的樣式，須要不止一條來定義的，咱們是寫一個類嗎？我更建議寫一個mixin，緣由是若是業務代碼中沒有用到這個複雜樣式，類就會被編譯出來，mixin就會按需編譯。若是你想每個樣式有一個生成的類，就像bootstrap那樣，那麼就單獨找一個scss引用每一個mixin到不一樣的類中實現。你就會編譯出你要的css庫。

　　我會將兩種東西定義爲mixin，一種是複雜樣式（有些甚至能夠直接做爲類使用），另外一種是複用性很高的工具方法，好比圓角矩形。以下：

 1 // 塊級元素 size大小
 2 @mixin block-size($width, $height){
 3     width: $width;
 4     height: $height;
 5 }
 6 // 圓角矩形
 7 @mixin block-border-radius($radius: 2px){
 8     -webkit-border-radius: $radius;
 9     -moz-border-radius: $radius;
10     border-radius: $radius;
11 }

　　

　　我已經用這個規範開發了幾個頁面，還原度確實提升很多，也省去了取色、量尺寸等工做。後續還會支持表單交互。