SASS循环中data-submenu-id属性补零递增失效的技术求助

我一眼就看出问题出在哪了——你的循环里生成的data-submenu-id值没有补零，导致选择器和实际DOM里的属性值不匹配，所以样式完全没生效。

问题根源 #

当前代码里的p#{$i}会直接生成p1、p2…p7，但你需要的是p01、p02…p07这种两位带前导零的格式。两者格式不匹配，浏览器自然找不到对应的元素，样式也就无法应用。

解决方案 #

用SASS的字符串填充函数给数字补零就行，分两种情况：

方法1：使用str-pad()函数（SASS 3.3+）

str-pad()可以把数字转换成指定长度的字符串，不足部分用指定字符填充。这里我们需要把1-7转换成两位，左侧补零：

@for $i from 1 through 7 {
  .m0#{$i}{
    a[aria-current="page"]{
      background-color: nth($m_col_lvl_04, $i);
    }
    // 关键修改：用str-pad给数字补零
    a[data-submenu-id="submenu-id_p#{str-pad($i, 2, "0", "left")}"]{
      background-color: nth($m_col_lvl_04, $i);
    }
  }
}

方法2：兼容性写法（适配旧版SASS）

如果你的SASS版本低于3.3，str-pad()函数不存在，可以用条件判断手动补零：

@for $i from 1 through 7 {
  .m0#{$i}{
    a[aria-current="page"]{
      background-color: nth($m_col_lvl_04, $i);
    }
    // 手动判断数字是否小于10，小于则加前导零
    a[data-submenu-id="submenu-id_p#{if($i < 10, "0" + $i, $i)}"]{
      background-color: nth($m_col_lvl_04, $i);
    }
  }
}

效果验证 #

修改后，当$i=1时会生成a[data-submenu-id="submenu-id_p01"]，$i=7时生成a[data-submenu-id="submenu-id_p07"]，完全匹配你需要的格式，样式就能正常生效了。

内容的提问来源于stack exchange，提问作者Laurence L