SCSS循环检查输入并应用样式

Question

我不确定这是否可行（对 scss 还是个新手）但是是否可以编写一个循环函数 is 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);
}

SCSS循环检查输入并应用样式

SCSS Looping through checked inputs and applying styles

html

css

sass

styling