你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
Traveller

使用SASS与Emmet在活动页中提高生产力 3个回复 专栏 @ 探索

Traveller 发布于 3 年前

规则的矩阵模块

接到一个活动页开发任务,拿到设计稿看了一下,有三个类似的模块需要规则定位,如下图是其中一个模块:

20151202001

20151202002

因为移动端的缩放使html map,area失效,不能转换为对应的点击区域.因而转向定位技术来解决.重复结构代码首先想到了HTML编写神器Emmet插件(Dreamweaver cc 2015原生集成(为Adobe打个广告),Adobe Brackets需要自己安装一下).两者的快捷键都是输入完命令后,按下tab键即可.GitHub Atom也有此插件,但不是此快捷键(Ctrl+E被占用)

step01:Emmet生成此模块的HTML结构代码

传送门 -> Emmet命令大全

div.slide.cnt-men>ul>(li>img[src][alt]*2+a[data-id][data-name].m1$$*12)+(li>img[src][alt]*2+a[data-id][data-name].m2$$*12)
tab键按下后,生成如下结构代码:
  <div class="slide cnt-men">
    <ul>
      <li>
        <img src="" alt="">
        <img src="" alt="">
        <a href="" data-id="" data-name="" class="m101"></a>
        <a href="" data-id="" data-name="" class="m102"></a>
        <a href="" data-id="" data-name="" class="m103"></a>
        <a href="" data-id="" data-name="" class="m104"></a>
        <a href="" data-id="" data-name="" class="m105"></a>
        <a href="" data-id="" data-name="" class="m106"></a>
        <a href="" data-id="" data-name="" class="m107"></a>
        <a href="" data-id="" data-name="" class="m108"></a>
        <a href="" data-id="" data-name="" class="m109"></a>
        <a href="" data-id="" data-name="" class="m110"></a>
        <a href="" data-id="" data-name="" class="m111"></a>
        <a href="" data-id="" data-name="" class="m112"></a>
      </li>
      <li>
        <img src="" alt="">
        <img src="" alt="">
        <a href="" data-id="" data-name="" class="m201"></a>
        <a href="" data-id="" data-name="" class="m202"></a>
        <a href="" data-id="" data-name="" class="m203"></a>
        <a href="" data-id="" data-name="" class="m204"></a>
        <a href="" data-id="" data-name="" class="m205"></a>
        <a href="" data-id="" data-name="" class="m206"></a>
        <a href="" data-id="" data-name="" class="m207"></a>
        <a href="" data-id="" data-name="" class="m208"></a>
        <a href="" data-id="" data-name="" class="m209"></a>
        <a href="" data-id="" data-name="" class="m210"></a>
        <a href="" data-id="" data-name="" class="m211"></a>
        <a href="" data-id="" data-name="" class="m212"></a>
      </li>
    </ul>
  </div>
一个轮播图切一张显的太大,裁为两张,后期采用延迟加载提升局部展现速度.采用ul>li结构为轮播做准备

step02:使用SASS批量生成定位元素样式

环境安装的为ruby sass.因而写好style.scss,并在文件内用@import "minxin.scss";然后在当前文件夹下输入cmd: sass --watch style.scss:style.css(压缩代码命令sass --style compressed --watch style.scss:style.css) sass会自动监听改写的scss文件,并重新编译出style.css文件.

step02:编写sass

//_mixin.scss 下划线为头的命名文件,sass编译后不生成单独的文件
// 选择符生成函数
@function selector($prefix,$start,$end,$step:1) {
  $a : '';
   //@for $i from $start through $end { 
  $i : $start;
  $m : '';
  @while $i <= $end  {     
    @if $i < $end {
      @if $i<10 {  $m : '0#{$i}'  } 
      @else {$m : $i}
      $a: $a+$prefix+'#{$m},'
    } @else  {
      @if $i==$end {
        @if $i<10 {  $m : '0#{$i}'  } 
        @else {$m: $i}
        $a : $a+$prefix+'#{$m}'
      }      
    }
    $i: $i+$step;
  }  
  @return $a;
}

// 矩阵(网格)定位生成函数
@mixin grid-a($prefix,$start,$end,$row,$col,$width,$height,$top:0,$left:0,$h-space:0,$w-space:0) {
  $selector : selector($prefix,$start,$end);
  #{$selector} {
    width:$width;
    height:$height;
  }
  @for $n from 0 to $col {
    $selector : selector($prefix,$start+$n*$row,$start+($n+1)*$row - 1);
    #{$selector} {
      top:$top+$n*($height+$h-space);
    }
  }
  @for $n from 0 to $row {
    $selector : selector($prefix,$start+$n,$end,$row);
    #{$selector} {
      left:$left+$n*($width+$w-space);
    }

  }

} 

// style.scss 文件 引用函数相关部分
// 头三个不规则,需手动写样式,这里rem改为百分比也可
.cnt-men {
  height:9.38rem;
}
.m101,.m102 {
  top:0.12rem;
}
.m101 {
  width:3.16rem;
  height:4.16rem;
}
.m102,.m103 {
  width:3.18rem;
  height:2.02rem;
  right:0;
}
.m103 {
  top:2.22rem;
}
@include grid-a('.m1',4,12,3,3,2.08rem,1.42rem,4.36rem,0,0.1rem,0.08rem);

@if $debug {
  .cnt-men ul {
    margin-left:-6.4rem;
  }
}

@include grid-a('.m2',1,12,3,4,2.08rem,1.66rem,0.12rem,0,0.1rem,0.08rem);
// 生成的相关css代码如下
.cnt-men {
  height: 9.38rem; }

.m101, .m102 {
  top: 0.12rem; }

.m101 {
  width: 3.16rem;
  height: 4.16rem; }

.m102, .m103 {
  width: 3.18rem;
  height: 2.02rem;
  right: 0; }

.m103 {
  top: 2.22rem; }

.m104, .m105, .m106, .m107, .m108, .m109, .m110, .m111, .m112 {
  width: 2.08rem;
  height: 1.42rem; }

.m104, .m105, .m106 {
  top: 4.36rem; }

.m107, .m108, .m109 {
  top: 5.88rem; }

.m110, .m111, .m112 {
  top: 7.4rem; }

.m104, .m107, .m110 {
  left: 0rem; }

.m105, .m108, .m111 {
  left: 2.16rem; }

.m106, .m109, .m112 {
  left: 4.32rem; }

.m201, .m202, .m203, .m204, .m205, .m206, .m207, .m208, .m209, .m210, .m211, .m212 {
  width: 2.08rem;
  height: 1.66rem; }

.m201, .m202, .m203 {
  top: 0.12rem; }

.m204, .m205, .m206 {
  top: 1.88rem; }

.m207, .m208, .m209 {
  top: 3.64rem; }

.m210, .m211, .m212 {
  top: 5.4rem; }

.m201, .m204, .m207, .m210 {
  left: 0rem; }

.m202, .m205, .m208, .m211 {
  left: 2.16rem; }

.m203, .m206, .m209, .m212 {
  left: 4.32rem; }

看似不规则的模块

设计稿中一块看似不规则的模块如下图:(三张图应该是连在一起的)

20151203134421

20151203134448

20151203134510
可以看出整个模块是两列结构.

step01: Emmet生成HTML结构

div.cnt-fashion>img[src][alt]*3+a.f$$[href][data-sku]*15
按下tab键生成结构如下:
<div class="cnt-fashion">
     <img src="" alt="">
     <img src="" alt="">
     <img src="" alt="">
     <a href="" class="f01" data-sku=""></a>
     <a href="" class="f02" data-sku=""></a>
     <a href="" class="f03" data-sku=""></a>
     <a href="" class="f04" data-sku=""></a>
     <a href="" class="f05" data-sku=""></a>
     <a href="" class="f06" data-sku=""></a>
     <a href="" class="f07" data-sku=""></a>
     <a href="" class="f08" data-sku=""></a>
     <a href="" class="f09" data-sku=""></a>
     <a href="" class="f10" data-sku=""></a>
     <a href="" class="f11" data-sku=""></a>
     <a href="" class="f12" data-sku=""></a>
     <a href="" class="f13" data-sku=""></a>
     <a href="" class="f14" data-sku=""></a>
     <a href="" class="f15" data-sku=""></a>
   </div>

step02: SASS批量生成定位信息

可以看出上面的两列结构,除最后两张图的宽度不一致,同一列的商品图片基本一致,因而左右两边可以分别设置left,right为0定位,同一列的图片top值可以采用上一张图的top值+height值+间距值计算出来,sass实现代码如下:(更好的方案,两列分开写$height list)

$selector: selector('.f',1,15,2);
#{$selector} {
  left:0;
  width:3.24rem;
}
$selector: selector('.f',2,15,2);
#{$selector} {
  left:auto;
  right:0 ;
  width:3.06rem;
}
.f01,.f02 {
  top:1.12rem;
}
.f14 {
  width:3.18rem;
}
.f15{
  width:3.1rem;
}
$t :'';
$height: 3.9rem 5.2rem 3.3rem 5.24rem 3.2rem 4.5rem 5.5rem 3.5rem 3.46rem 5.0rem 4.1rem 4.9rem 3.8rem 3.8rem 4.8rem;
@for $i from 1 through 15 {
  @if $i < 10 { $t : '0#{$i}' }
  @else {$t:$i}
  $name : '.f#{$t}';
  #{$name} {
    height: nth($height,$i);
  }
}
$i:3;
$top:1.12rem;
@while $i <= 15 {
  @if $i < 10 { $t : '0#{$i}' }
  @else {$t:$i}
  $name : '.f#{$t}';
  $top:$top+nth($height,$i - 2)+0.03rem;
  #{$name} {
    top: $top;
  }
  $i:$i+2;
}
$i:4;
$top:1.12rem;
@while $i <= 15 {
  @if $i < 10 { $t : '0#{$i}' }
  @else {$t:$i}
  $name : '.f#{$t}';
  $top:$top+nth($height,$i - 2)+0.03rem;
  #{$name} {
    top: $top
  }
  $i:$i+2
}
//编译后的css代码如下:
.f01, .f03, .f05, .f07, .f09, .f11, .f13, .f15 {
  left: 0;
  width: 3.24rem; }

.f02, .f04, .f06, .f08, .f10, .f12, .f14 {
  left: auto;
  right: 0;
  width: 3.06rem; }

.f01, .f02 {
  top: 1.12rem; }

.f14 {
  width: 3.18rem; }

.f15 {
  width: 3.1rem; }

.f01 {
  height: 3.9rem; }

.f02 {
  height: 5.2rem; }

.f03 {
  height: 3.3rem; }

.f04 {
  height: 5.24rem; }

.f05 {
  height: 3.2rem; }

.f06 {
  height: 4.5rem; }

.f07 {
  height: 5.5rem; }

.f08 {
  height: 3.5rem; }

.f09 {
  height: 3.46rem; }

.f10 {
  height: 5rem; }

.f11 {
  height: 4.1rem; }

.f12 {
  height: 4.9rem; }

.f13 {
  height: 3.8rem; }

.f14 {
  height: 3.8rem; }

.f15 {
  height: 4.8rem; }

.f03 {
  top: 5.05rem; }

.f05 {
  top: 8.38rem; }

.f07 {
  top: 11.61rem; }

.f09 {
  top: 17.14rem; }

.f11 {
  top: 20.63rem; }

.f13 {
  top: 24.76rem; }

.f15 {
  top: 28.59rem; }

.f04 {
  top: 6.35rem; }

.f06 {
  top: 11.62rem; }

.f08 {
  top: 16.15rem; }

.f10 {
  top: 19.68rem; }

.f12 {
  top: 24.71rem; }

.f14 {
  top: 29.64rem; }

意外的收获

在开发中,意外发现firefox(42,其他没试,chrome也支持,需要添加为工作目录(workspace))用文件形式打开时(file:///协议),会自动捕获scss文件及其依赖关系,并可以在火狐自带的开发工具中编辑保存,浏览器会自动刷新更新.(调整高度时,是动画模式变换的,浅绿色的蒙层是开发时为标识区域而设): 20151203141449

开发中踩到的SASS坑与友情提示

  • 减号(-)运算时,需在减号左右加一个空格,因为sass支持css的a-b命名,减号不加空格会优先识别为变量
  • @for to 和@for through 前者运算不会包含最后一个值,后者包含.即1到10的迭代,前者输出1-9,后者1-10
  • @for 结构逻辑,结构{包含的代码}中迭代变量($i)参与运算的话,其结果不影响迭代次数,因而不能等差($step)输出.这也是选择器生成函数代码中将for注释掉,换while的原因.

GitHub地址: https://github.com/myheartwillgoon/FEDev/issues/1

  • 幾米

    栅栏,ps切图,丢进去也可以啊,几句样式就搞定了

    #1
  • Traveller

    一个品牌一张图?

    #2
  • 幾米

    是啊,外面套标签,图片多的还可以懒加载

    #3
登录后回复,如无账号,请使用邀请码注册