preface

Sometimes with SASS, there is a case for traversing a number array like the V-for in VUE, although SCSS also provides traversers. Like @each and @for; Although traversal is possible, SCSS traverses lists, which are somewhat like arrays but not arrays. Whereas javascript array elements can use objects as elements, SCSS has no “object” -like data structure at this point, but nested lists. In summary, SCSS is difficult to achieve semantic list traversal. For example, the page now has a list of elements with varying widths that need to be customized for different class names!

In the case of SCSS, the first thing to do is:

&.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); }}}Copy the code

At first glance, it does. However, when you want to change the width of an element, it is not a general trouble to find, it is easy to correct, it is easy to misoperate!

The solution

As in the preface, SCSS provides nesting of lists: use the () operator!

&.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); }}}Copy the code

If you want to change the width of week, you can easily find and change it

In addition, you will notice that the parentheses are separated by Spaces. Spaces and commas have the same effect. Spaces are used inside parentheses to make it more semantic and easier to distinguish between ~ s