如何深入使用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:                           #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; // 默认高于header和footer部分

细心的同学可能注意到，我们使用的单位是rem.此处因为是移动页面 所以采用了rem单位。

整个页面有很多小图片，多个小图请求显然是不合理的。这个时候我们采用比较通用的方案精灵图。但是因为我们采用的是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配置发出。