Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

使用SASS与Emmet在活动页中提高生产力 #1

Open
myheartwillgoon opened this Issue Dec 1, 2015 · 0 comments

Comments

Projects
None yet
1 participant
@myheartwillgoon
Copy link
Owner

myheartwillgoon commented Dec 1, 2015

规则的矩阵模块

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

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]+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的原因.

@myheartwillgoon myheartwillgoon changed the title 利用SASS与Emmet在活动页中提高生产力 使用SASS与Emmet在活动页中提高生产力 Dec 1, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.