SCSS/SASS 数组对象循环-动态图标

1.需求：scss 动态精灵图icon变化 2.函数运算： sass的计算 map-get() nth() @for ($i from index through length)

// icon名称 精灵图左距 下距 
$iconPositon: (
    (iconName: mControl, leftX: -20px, downY: -20px),
    (iconName: mMaterial, leftX: -50px, downY: -20px),
    (iconName: mInfRelease, leftX: -80px, downY: -20px),
    (iconName: mDevice, leftX: -110px, downY: -20px),
    (iconName: mPermission, leftX: -140px, downY: -20px),
    (iconName: mSystem, leftX: -170px, downY: -20px),
    (iconName: mAuthorize, leftX: -200px, downY: -20px)
    )
$icon555Place: 30px; // 555配色Y轴移动距离

cssClass {
    background-image: url('') // 精灵图路径
    @for $i from 1 through length($iconPositon) { // 循环 下标是从1开始注意 through  length()函数
        $item: nth($iconPositon, $i); // nth函数list列表中获取item

        &.icon-#{map-get($item, iconName)} {
            transition: background-position 0s;
            background-position: map-get($item, leftX) map-get($item, downY);
            
            // width: map-get($item, size); // 参考代码
            // height: map-get($item, size);
            // left: map-get($item, left);
            // top: map-get($item, top);
         }
    }
}

cssClass:hover {
    @for $i from 1 through length($iconPositon) { // 循环 下标是从1开始注意 through  length()函数
        $item: nth($iconPositon, $i); // nth函数list列表中获取item

        &.icon-#{map-get($item, iconName)} {
            transition: background-position 0s;
            background-position: map-get($item, leftX) (map-get($item, downY) - $icon555Place);
            
            // width: map-get($item, size); // 参考代码
            // height: map-get($item, size);
            // left: map-get($item, left);
            // top: map-get($item, top);
         }
    }
}


第三种 固定选中状态注意：
    sass运算后不解析!important 所以要算好权重

参考segmentfault.com/q/101000000… 总体思路 blog.csdn.net/weixin_3423… nth()函数