Search code examples
htmlcsssassstyling

SCSS Looping through checked inputs and applying styles

I am not sure if this is possible (still a newbie to scss) but is it possible to write a loop function is scss that would compile to this code?

I want to add these css properties to these elements if the input button is checked. I am hoping to only use css and scss to achieve this not 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;};
Solution

  • Maybe create a mixin that sets styles and loop over a bunch of ids. 

    @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);
}