SCSS遍历选中的输入并应用样式

Question

我不确定这是否可行（仍然是scss的新手），但是否有可能编写一个可以编译为该代码的scss循环函数？

如果选中了输入按钮，我想将这些CSS属性添加到这些元素中。我希望仅使用css和scss来实现此功能而不是JS。

#menu-results:checked + #reveal-results{ height: 100%; visibility:visible; opacity:1; };
#menu-membership:checked + #reveal-membership{ height: 100%; visibility:visible; opacity:1;};
#menu-lotterywest:checked + #reveal-lotterywest{ height: 100%; visibility:visible; opacity:1;};
#menu-grants:checked + #reveal-grants{ height: 100%; visibility:visible; opacity:1; };
#menu-more:checked + #reveal-more{ height: 100%; visibility:visible; opacity:1;};

Answer 1

也许创建一个mixin来设置样式并遍历一堆id。

@mixin menu-checked-styles($name){
    #menu-#{$name} {
        &:checked {
            & + #reveal-#{$name} {
                height: 100%; visibility:visible; opacity:1;
            }
        }
    }
}

$menu-names: results, membership, lotterywest, grants, more;

@each $name in $menu-names {
    @include menu-checked-styles($name);
}