css - sass 如何遍历数组对象

问题描述

问 题

$stars: (size: '40px', left: '22px', top: '97px'),
    (size: '32px', left: '42px', top: '70px'),
    (size: '31px', left: '464px', top: '273px'),
    (size: '28px', left: '240px', top: '402px'),
    (size: '25px', left: '289px', top: '557px');
  @for $i from 1 through 5 {
    &:nth-child(#{$i}) {
      width: #{$stars[$i].size};
      height: #{$stars[$i].size};
      left: #{$stars[$i].left};
      top: #{$stars[$i].top};
    }
  }
  

如何正确遍历对象数组呢？上面写法会报错

解决方案

$stars: (
  (size: 40px, left: 22px, top: 97px),
  (size: 32px, left: 42px, top: 70px),
  (size: 31px, left: 464px, top: 273px),
  (size: 28px, left: 240px, top: 402px),
  (size: 25px, left: 289px, top: 557px)
);

@for $i from 1 through length($stars) {
  $item: nth($stars, $i);
  
  &:nth-child(#{$i}) {
    width: map-get($item, size);
    height: map-get($item, size);
    left: map-get($item, left);
    top: map-get($item, top);
  }
}

这篇关于css - sass 如何遍历数组对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！