如何深刻使用scss開發一個簡單頁面

本文將從常規開發的角度，深刻使用一些scss的語法。一步一步開始吧~~

第一步 ：有圖有真相

首先從設計姐姐拿到一個標記過的psd文件。（固然日常很常見是沒有這種標記的，咱們能夠用ps的量尺本身量。）這裏給你們推薦個工具：Avocode 自動標記（試用15天 以後收費）

此時會發現有大量的顏色，間距，字號，圓角等是重複使用的，容易更改的。咱們能夠選擇使用scss的變量語法。將這些重複出現的東西抽離出來。

具體應用以下（注意命名要直觀，易懂喲~）：

// font相關
//-----------------------------------------------------    
$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; 
// 前兩個爲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:                           #ddd !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; // 默認高於header和footer部分

細心的同窗可能注意到，咱們使用的單位是rem.此處由於是移動頁面 因此採用了rem單位。

第二步 scss精靈圖

整個頁面有不少小圖片，多個小圖請求顯然是不合理的。這個時候咱們採用比較通用的方案精靈圖。可是由於咱們採用的是rem會出現不一樣手機錯位現象，下邊會有具體的解決方法。

//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);
      }
};

• 方法一：

  • 生成精靈圖：在線工具 自動生成座標（x，y）

  • 抽離出一個mixin ,使用每一個小圖時，能夠直接傳入寬高，座標。避免重複書寫該段代碼段。

  • 問題： 移動兼容性

    • 若是使用rem單位，在不一樣的手機上會出現圖標位置錯位。爲何錯位呢？原理也很簡單，由於不一樣瀏覽器1rem對應的px是變化的 ，因此使用background-position所獲得的位置是不一樣的，也就產生了錯位。因此這裏不推薦使用rem單位，作移動端精靈圖。

    • 使用px單位，不會產生錯位了，可是在圖標大小不隨着手機適配怎麼解決呢？這裏用了rem的原理。咱們知道 其中rem 是與根元素的fontSize有關的。假設fontSize是20px ,那麼1rem爲20px。咱們能夠得出公式。

  rem*fontSize = px

  所以咱們就能夠算出，當前圖標應該縮放的大小。

  注意：這裏推薦使用zoom，而不是transform:'scale()',進行縮放。由於transform縮放後的元素實際大小仍是縮放前的大小。zoom則實際大小是縮放後大小。

• 方法二：

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

  //其中 W/H 是整個雪碧圖的寬高， w/h 是單個 icon 的大小，而 x/y 則是傳統的 px 座標。
  n% *W - n% *w = -x
  n% *H - n% *h = -y

  方法二參考文獻

  另外還有使用gulp進行打包生成精靈圖，後續整理Gulp配置發出。