sass文件的编译用的是gulp的，当执行gulp后，会监控src/scss下scss文件的变化(并不是src/scss所有的文件，只有在src/scss一级目录下的scss文件)，如果发生变化，就会实时编译成css到dev/css目录下。

    接着我们会用gulp-autoprefixer插件自动补全Css前缀。

    最后我们会进行px to rem的转换，转换的规则就是所有的 px值 除以 75 计算出rem值。

    通过下面这个示例代码，一目了然。

    处理前：

    处理后：

    scss文件转换后

    至于为什么转化规则是除以 75 呢？

    这是因为我们这里的移动端设计稿都是 750px 的，我们用PS测量一个按钮为150px的时候，我们就直接写这个按钮的width为150px，这感觉就像写固定布局一样！gulp会为我们自动处理px to rem。

    但是如果你的设计稿是640px呢？这个该怎么处理？这时候就需要你修改下gulpfile.js中的配置文件：

    对了，你还可能遇到一个坑，那就是如果你设置按钮的border为1px时

    2.   .btn {
    3.     border: 1px solid #ccc;
    4.   }

    这是处理后的css文件：

    2.   .btn {
    3.     border: 0.013333rem solid #ccc;
    4.   }

    在浏览器中预览时你会看见它的边框，但是当你到了手机上的时候，这条线是没有的！！！

    想当初百思不得其解，突然灵光一现，发现了其中蹊跷，那就是手机中算 0.013333rem值的时候可能都算不到1px大小，所以直接就不显示了……

    所以我们不想让gulp对border的1px进行处理的时候该怎么办呢？

    这时候，我们就需要加上特殊的标示告诉gulp此处请不要转换，看下面的示例代码：

    这是scss文件：

    这是处理后的css文件：

    2.   .btn {
    3.     border: 1px solid #ccc;
    4.   }

    scss目录结构

    目录结构

    在src/scss目录下，包含了很多细分功能的scss文件。这是scss的目录结构

    2. ├── src/                            # 源文件目录
    3.     └── scss/                        # scss目录
    4.         └── helper/
    5.             └── _color.scss         # 色板
    6.             └── _normalize.scss     # 重置
    7.             └── _rules.scss         # 规则
    8.             └── _util.scss          # util
    9.         └── sprite/
    10.             └── _sprite.scss        # 根据雪碧图生成的scss文件
    11.         └── ui/
    12.             └── _animation.scss     # 动画
    13.             └── _button.scss        # 按钮组件
    14.             └── _global.scss        # 全局
    15.             └── _icon.scss             # 字体图标
    16.             └── _loading.scss       # 页面加载loading样式
    17.         └── index.scss

    helper

    先介绍helper目录，这里包括了一些帮助项目开发的类

    1._color.scss

    这里存放着一些扁平的颜色变量，当你没有合适的颜色的时候，可以考虑选择尝试其中的颜色。

    2._normalize.scss

    这句话直接改变了所有元素的盒模型，当你设置一个元素为 box-sizing: border-box;时，此元素的内边距和边框不再会增加它的宽度，绝对是开发福利！

    3._rules.scss

    在这里设置常用的scss变量，占位符，mixin，请大家在项目开发中不断的完善！

    4._util.scss

    提供常用的工具类， 让我们在这里做个预览：

    2. /**
    3.  * 隐藏元素
    4.  */
    6. .hidden,
    7. [hidden] {
    8.     display: none !important;
    9. }
    12. /**
    14.  */
    16. .lnv-img {
    17.     max-width: 100%;
    18.     height: auto;
    19. }
    22. /**
    23.  * 清除浮动
    24.  */
    26. .clear {
    27.     clear: both;
    28. }
    31. /**
    32.  * 解決高度塌陷問題
    33.  */
    35. .clearfix:after {
    36.     content: ' ';
    37.     display: block;
    38.     height: 0;
    39.     clear: both;
    40.     visibility: hidden;
    41. }
    43. .clearfix {
    44.     zoom: 1;
    45. }
    48. /**
    49.  * 单行文本超过宽度显示为三个点
    50.  */
    52. .dot {
    53.     overflow: hidden;
    54.     white-space: nowrap;
    55.     text-overflow: ellipsis;
    56. }
    59. /**
    60.  * 三角符号
    61.  */
    63. .lnv-triangle {
    64.     display: inline-block;
    65.     width: 0;
    66.     height: 0;
    67.     margin-left: 2px;
    68.     vertical-align: middle;
    70.     border-top: 4px solid \9;
    71.     border-right: 4px solid transparent;
    72.     border-left: 4px solid transparent;
    74. /**
    75.  * 不被选中
    76.  */
    77. .noselect {
    78.     -webkit-user-select: none;
    79.     -moz-user-select: none;
    80.     -ms-user-select: none;
    81.     -o-user-select: none;
    82.     user-select: none;
    83. }

    ui

    ui文件夹下存放与ui相关的scss文件。

    1. _animation.scss

    这里存放着与动画有关的样式。

    1. _button.scss

    这里存放着组件类的样式,如按钮、表单、表格等，这里只写了button类，其他的需要大家在项目开发中完善。之所以设置组件类，是为了方便项目后期的迭代。

    1. _global.scss

    这里存放自定义的全局变量。

    1. _icon.scss

    这里存放着字体图标有关的样式。

    1. _loading.scss

    这里存放着页面加载loading的样式

    sprite

    sprite文件下存放着由雪碧图生成的scss文件，具体的内容会在雪碧图部分讲解。

    base.scss

    这是base.scss文件：

    2. @charset "utf-8";
    4. /* 样式重置 */
    6. @import "helper/_normalize";
    8. /* 色板 */
    10. @import "helper/_color";
    12. /* 规则 */
    14. @import "helper/_rules";
    16. /* 工具类 */
    18. @import "helper/_util";
    20. /* 动画效果 */
    22. @import "ui/_animation";
    24. /* 组件库 */
    26. @import "ui/_buttons";
    28. /* loading */
    30. @import "ui/_loading";
    32. /* icon */
    34. @import "ui/_icon";
    36. /* public style */
    38. @import "ui/_global";