摘要：本文將從常規(guī)開發(fā)的角度，深入使用一些的語法。一步一步開始吧第一步有圖有真相首先從設(shè)計(jì)姐姐拿到一個(gè)標(biāo)記過的文件。問題移動(dòng)兼容性如果使用單位，在不同的手機(jī)上會(huì)出現(xiàn)圖標(biāo)位置錯(cuò)位。注意這里推薦使用，而不是進(jìn)行縮放。方法二中使用百分比單位。

本文將從常規(guī)開發(fā)的角度，深入使用一些scss的語法。一步一步開始吧~~

首先從設(shè)計(jì)姐姐拿到一個(gè)標(biāo)記過的psd文件。（當(dāng)然平常很常見是沒有這種標(biāo)記的，我們可以用ps的量尺自己量。）這里給大家推薦個(gè)工具：Avocode 自動(dòng)標(biāo)記（試用15天 之后收費(fèi)）

此時(shí)會(huì)發(fā)現(xiàn)有大量的顏色，間距，字號(hào)，圓角等是重復(fù)使用的，容易更改的。我們可以選擇使用scss的變量語法。將這些重復(fù)出現(xiàn)的東西抽離出來。

具體應(yīng)用如下（注意命名要直觀，易懂喲~）：

// font相關(guān)
//-----------------------------------------------------    
$fontSize:                       .28rem !default; 
$fontLine:                       .36rem; 
$fontLineHeight:                 1.5 !default;
$fontFamily:                     -apple-system, BlinkMacSystemFont, "Seogoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif !default;
// 蘋方, 冬青黑體，微軟雅黑UI（win8.1+），微軟雅黑，思源黑體（安卓）
$fontCn:                          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN" sans-serif !default; 
// 前兩個(gè)為safari chrome, ios4.0+, ios4.0-, Android 4.0+, Android 4.0-, windows&windows Phone,
$fontEn:                         -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Roboto, "Droid Sans", "Seogoe UI", Arial !default; 


// 背景色，文本色，邊框色
//-----------------------------------------------------    
$colorText:                      #333 !default;
$colorBg:                        #ffec6b !default;
$colorBorder:                    #333 !default;
$colorOverlay:                   rgba(0,0,0,.7) !default; // 遮罩層顏色
$titleBg:                        #fffad7 !default;
$titleText:                      #f9d365 !default;

$yellow:                         #ffe73d !default;
$red:                            #ff6f6f !default;
$white:                          #fff !default;
$gray:                           #ffffd !default;
// 元素上下間距
//-----------------------------------------------------    
$gap:                             .1rem !default;


// radius
//-----------------------------------------------------    
$radiusBase:                      .05rem !default;
$radiusSmall:                     .03rem !default;

// z-index
//-----------------------------------------------------    
$zIndexHeader:                    1000 !default;
$zIndexFooter:                    2000 !default;
$zIndexPopup:                      3000 !default;                     
$zIndexOverlay:                   4000 !default; // 默認(rèn)高于header和footer部分

細(xì)心的同學(xué)可能注意到，我們使用的單位是rem.此處因?yàn)槭且苿?dòng)頁面 所以采用了rem單位。

整個(gè)頁面有很多小圖片，多個(gè)小圖請(qǐng)求顯然是不合理的。這個(gè)時(shí)候我們采用比較通用的方案精靈圖。但是因?yàn)槲覀儾捎玫氖莚em會(huì)出現(xiàn)不同手機(jī)錯(cuò)位現(xiàn)象，下邊會(huì)有具體的解決方法。

//mixin
@mixin stitches-sprite($x: 0, $y: 0, $width: 0, $height: 0) {
    background-position: $x $y;
    width: $width;
    height: $height;
};
//使用
.sprite {
      background-image: url("http://n1.c.imoxiu.com/99ce2d4e5f663f272adbb75147b0423f6aa7cca7");
      background-repeat: no-repeat;
      display: block;
 
      &.sprite-__1 {
           @include stitches-sprite(-5px, -5px, 120px, 40px);
      }
};

方法一：

生成精靈圖：在線工具 自動(dòng)生成坐標(biāo)（x，y）

抽離出一個(gè)mixin ,使用每個(gè)小圖時(shí)，可以直接傳入寬高，坐標(biāo)。避免重復(fù)書寫該段代碼段。

問題： 移動(dòng)兼容性

如果使用rem單位，在不同的手機(jī)上會(huì)出現(xiàn)圖標(biāo)位置錯(cuò)位。為什么錯(cuò)位呢？原理也很簡(jiǎn)單，因?yàn)椴煌瑸g覽器1rem對(duì)應(yīng)的px是變化的 ，所以使用background-position所得到的位置是不同的，也就產(chǎn)生了錯(cuò)位。所以這里不推薦使用rem單位，做移動(dòng)端精靈圖。

使用px單位，不會(huì)產(chǎn)生錯(cuò)位了，但是在圖標(biāo)大小不隨著手機(jī)適配怎么解決呢？這里用了rem的原理。我們知道 其中rem 是與根元素的fontSize有關(guān)的。假設(shè)fontSize是20px ,那么1rem為20px。我們可以得出公式。

rem*fontSize = px

因此我們就可以算出，當(dāng)前圖標(biāo)應(yīng)該縮放的大小。

注意：這里推薦使用zoom，而不是transform:"scale()",進(jìn)行縮放。因?yàn)閠ransform縮放后的元素實(shí)際大小還是縮放前的大小。zoom則實(shí)際大小是縮放后大小。

方法二：

background-position中使用百分比單位。

//其中 W/H 是整個(gè)雪碧圖的寬高， w/h 是單個(gè) icon 的大小，而 x/y 則是傳統(tǒng)的 px 坐標(biāo)。
n% *W - n% *w = -x
n% *H - n% *h = -y

方法二參考文獻(xiàn)

另外還有使用gulp進(jìn)行打包生成精靈圖，后續(xù)整理Gulp配置發(fā)出。