sass：更加语义化地遍历lists

前言

有时候使用sass，会有如同vue中的v-for遍历数组的情况，当然scss也是有提供遍历器的。比如@each和@for;虽然是可以遍历，但是scss遍历的是lists，这个lists有点类似数组，但是又不是数组。javascript的数组元素可以使用对象作为元素，而scss在这点上，并没有类似“对象”的数据结构，倒是有嵌套lists。综上，scss就比较难做到语义化的列表遍历。比如，现在页面有一个列表，列表元素的宽度长短不一，需要根据不同的类名进行定制！

根据scss的情况，首先想到的做法是：

&.el-date-editor{
  $types: 'year', 'month', 'date', 'dates', 'week', 'datetime', 'datetimerange', 'daterange';
  $widths: 74px, 98px, 122px, 122px, 104px, 188px, 358px, 220px;
 
  @for $i from 1 through length($types) {
    &--#{nth($types, $i)} {width: nth($widths, $i); }
  }
}
复制代码

咋看之下，这样确实实现了。但是，当你想要修改某个元素的宽度，找起来就不是一般的麻烦，也很容易改错，很容易出现误操作！

解决方案

如前言中，scss有提供lists的嵌套：利用()运算符！

&.el-date-editor{
    $types:
      ('year' 74px),
      ('month' 98px),
      ('date' 122px),
      ('dates' 122px),
      ('week' 104px),
      ('datetime' 188px),
      ('datetimerange' 358px),
      ('daterange' 220px);

    @each $item in $types {
      &--#{nth($item, 1)} { width: nth($item, 2); }
    }
  }
复制代码

如上，是不是就比较语义化了，想改week的宽度时，很容易就可以找到并准确修改~

另外，你发现在括号内部是以空格分隔的，其实空格和逗号都是一样的效果，在括号内部使用空格是为了更加语义化，更加容易区分~

转载于:https://juejin.im/post/5b2fe8af6fb9a00e7866533c