针对移动端的前端工作流(3)—Sass的使用姿势

sass文件的编译与px to rem的转换

基础库使用的预处理器是sass，为什么会选择sass呢？这是因为当时在选择sass和less的时候，简单的了解了下它们：sass是功能强大但是入门门槛高，less是功能稍微薄弱，但是入门简单，而我认为功能强大是工具的事情，但是入门门槛高则是个人的问题，不能以个人的问题来决定使用何种工具，所以最终选择了sass，（现在想想，当时还是很天真啦，其实两者的区别并不是像我想象的如此肤浅），于是便一直使用sass。

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

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

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

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

处理前：

scss文件转换前

处理后：

scss文件转换后

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

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

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

  2. gulp.task('dev_sass', function() {
  4.     var processors = [px2rem({ remUnit: 75 })]; //根据你的设计稿宽度除以10修改这里的remUnit值
  6.     return gulp.src(path.src.scss + "*.scss")
  7.         .pipe(sass().on('error', sass.logError))
  8.         .pipe(autoprefixer({
  9.             browsers: ['last 5 versions'],
  10.             cascade: false
  11.         }))
  12.         .pipe(postcss(processors))
  13.         .pipe(gulp.dest(path.dev.css))
  14.         .pipe(notify({
  15.             message: 'scss文件编译成功'
  16.         }))
  18. });

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

这是scss文件：

  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文件：

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

这是处理后的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

样式重置，基于normalize.css，在此基础上加了针对移动端的一些东西，其中要注意的是这样一句：

  2.     * {
  3.         -webkit-box-sizing: border-box;
  4.         -moz-box-sizing: border-box;
  5.         box-sizing: border-box;
  6.     }

这句话直接改变了所有元素的盒模型，当你设置一个元素为 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. /**
  13.  * 弹性图片
  14.  */
  16. .lnv-img {
  17.     max-width: 100%;
  18.     height: auto;
  19.     display: block;
  20. }
  23. /**
  24.  * 清除浮动
  25.  */
  27. .clear {
  28.     clear: both;
  29. }
  32. /**
  33.  * 解決高度塌陷問題
  34.  */
  36. .clearfix:after {
  37.     content: ' ';
  38.     display: block;
  39.     height: 0;
  40.     clear: both;
  41.     visibility: hidden;
  42. }
  44. .clearfix {
  45.     zoom: 1;
  46. }
  49. /**
  50.  * 单行文本超过宽度显示为三个点
  51.  */
  53. .dot {
  54.     overflow: hidden;
  55.     white-space: nowrap;
  56.     text-overflow: ellipsis;
  57. }
  60. /**
  61.  * 三角符号
  62.  */
  64. .lnv-triangle {
  65.     display: inline-block;
  66.     width: 0;
  67.     height: 0;
  68.     margin-left: 2px;
  69.     vertical-align: middle;
  70.     border-top: 4px dashed;
  71.     border-top: 4px solid \9;
  72.     border-right: 4px solid transparent;
  73.     border-left: 4px solid transparent;
  74. }
  76. /**
  77.  * 不被选中
  78.  */
  79. .noselect {
  80.     -webkit-user-select: none;
  81.     -moz-user-select: none;
  82.     -ms-user-select: none;
  83.     -o-user-select: none;
  84.     user-select: none;
  85. }

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文件中引入ui和helper下的文件，要求每个html文件中引入base.css。

这是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";