S CSS Цикл проверенных входов и применение стилей - PullRequest
Новая
       59

S CSS Цикл проверенных входов и применение стилей

0 голосов
/ 29 апреля 2020

Я не уверен, возможно ли это (все еще новичок ie в s css), но возможно ли написать al oop функцию s css, которая будет компилироваться в этот код?

Я хочу добавить эти css свойства к этим элементам, если кнопка ввода отмечена. Я надеюсь использовать только css и s css, чтобы достичь этого, а не 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;};

1 Ответ

0 голосов
/ 29 апреля 2020

Возможно создать mixin, который устанавливает стили и l oop для нескольких идентификаторов. 

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