scss 萨斯で连想配列っぽいものサンプル

Posted 2021-05-18

// navbar name list
$navNameList: name01, name02, name03;
// width list
$navSizeList: 68, 92, 96;

// making class for each name in navNameList
@for $i from 1 through length($navNameList) {
  $nav_name: nth($navNameList, $i);
  $nav_size: index($navNameList, $nav_name);
  $i: $i - 1;
  .nav_#{$nav_name} {
    background-position: 0 -30px * $i;
    width: #{nth($navSizeList, $nav_size)}px;
  }
}