本文将从常规开发的角度深入使用一些scss语法。一步一步来吧~~第一步：有图有真相首先，从设计师姐姐那里弄到一个有标注的psd文件。（当然，没有这个标记是很常见的，我们可以用PS测量尺自己测量。）这里推荐给大家一个工具：Avocode自动标记（试用15天后收费）。这时候你会发现大量的颜色和间距、字体大小、圆角等都是可以复用的，也很容易更改。我们可以选择使用scss的变量语法。提取这些重复。具体应用如下（注意命名要直观易懂~）：//字体相关//----------------------------------------------------$fontSize:.28rem!default;$fontLine:.36rem;$fontLineHeight:1.5!default;$fontFamily:-apple-system,BlinkMacSystemFont,"SeogoeUI",Roboto,"HelveticaNeue",Helvetica,Arial,"PingFangSC","HiraginoSansGB","MicrosoftYaHeiUI","微软雅黑","SourceHanSansCN",sans-serif!default;//平方,HollyHeibody,微软雅黑UI(win8.1+),微软雅黑,思源黑体(Android)$fontCn:"平方SC","HiraginoSansGB","MicrosoftYaHeiUI","MicrosoftYaHei","SourceHanSansCN"sans-serif!default;//前两个是safarichrome,ios4.0+,ios4.0-,Android4.0+,Android4.0-,windows&windowsPhone,$fontEn:-apple-system,BlinkMacSystemFont,"HelveticaNeue",Helvetica,Roboto,"DroidSans","SeogoeUI",Arial!default;//背景颜色、文字颜色、边框颜色//------------------------------------------------------$colorText:#333!default;$colorBg:#ffec6b!default;$colorBorder:#333!default;$colorOverlay:rgba(0,0,0,.7）！默认;//遮罩层颜色$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-指数//------------------------------$zIndexHeader:1000!default;$zIndexFooter:2000!default;$zIndexPopup:3000!default;$zIndexOverlay:4000!default;//默认高于页眉和页脚。细心的同学可能会注意到，我们使用的单位是rem。这里，因为是移动端页面，所以我们使用rem单元的第二步是scsssprite图片。整个页面上有很多小图片。要求多张小图显然不合理。这时候，我们采用更通用的spritemap方案。但是因为我们使用rem，会出现不同手机的错位，下面会有具体的解决方法。//mixin@mixinstitches-sprite($x:0,$y:0,$width:0,$height:0){背景位置:$x$y;宽度：$宽度；height:$height;};//使用.sprite{background-image:url('http://n1.c.imoxiu.com/99ce2d4e5f663f272adbb75147b0423f6aa7cca7');背景重复：不重复；显示：块；&.sprite-__1{@includestitches-sprite(-5px,-5px,120px,40px);}};方法一：生成spritemap：在线工具自动生成坐标（x,y），提取一个mixin。在使用每张小图的时候，可以直接传入宽高和坐标。避免重复此代码段。问题：移动兼容性如果使用rem单位，图标可能会在不同的手机上显示错位。为什么会错位？原理也很简单，因为不同浏览器1rem对应的px是变化的，所以使用background-position得到的位置是不一样的，就会出现错位。所以这里不推荐使用rem单位来制作手机精灵。使用px单位，不会出现错位，但是怎么解决图标大小不适应手机的问题呢？这里用到了rem的原理。我们知道rem与根元素的fontSize有关。假设fontSize为20px，那么1rem就是20px。我们可以推导出公式。rem*fontSize=px这样我们就可以计算出当前图标应该缩放的大小。注意：建议使用zoom而不是transform:'scale()'进行缩放。因为变换缩放后元素的实际大小仍然是缩放前的大小。缩放后的实际尺寸为缩放后的尺寸。方法2：在background-position中使用百分比单位。//其中W/H是整个Sprite图片的宽高，w/h是单个图标的大小，x/y是传统的px坐标。n%*W-n%*w=-xn%*H-n%*h=-y方法2参考另外，使用gulp打包生成spritemaps，然后整理Gulp配置发送出去。
