SASS: Условные значения свойства CSS на основе этого, если элемент с определенным значением того же свойства присутствует уже на странице

Question

Я хочу иметь разные значения свойства css (я использую SASS) на основе этого является ли элемент с определенным значением свойства '$ extraNavHeight' находится на странице. На некоторых страницах нет такого элемента, в другом - есть. Я написал SASS подмешать:

@mixin top-position($navHeight, $additionalNavHeight) 
{ 
    @if $additionalNavHeight == true { 
    .loadingAnimation { 
     top: $navHeight + $additionalNavHeight; 
    } 
    } 
    @else { 
    .loadingAnimation { 
     top: $navHeight; 
    } 
    } 
} 

И я включил подмешать в селекторе:

@include top-position($navHeight, $additionalNavHeight); 

Я думал, это должно изменить значение свойства «верхней» элемента с классом 'loadingAnimation', исходя из этого, если на странице уже присутствует элемент со значением его 'top' property '$ дополнительнаяNavHeight'. Компилятор не показывает никаких ошибок, но код ничего не меняет. Что я делаю не так? Любая помощь будет очень оценена.

Answer 1

Простейшее решение. Вы должны проверить с помощью JavaScript, если существует элемент, или не , и применить второй класс к элементу. Во втором случае (существующий элемент) вы должны добавить высоту adittionnal. В этом случае mixin является избыточным.

.loadingAnimation { 
     top: $navHeight; 
    } 
    .loadingAnimation.additinnalHeight { 
     top: $navHeight + $additionalNavHeight; 
    } 

Вот пример jsfiffle: https://jsfiddle.net/ra9r8rk8/ В этом случае элемент получит класс NewClass, когда первый DIV существует. (элемент)

Редактировать: Это второе улучшенное решение. На самом деле нет необходимости в регулярном выражении. Мы можем просто использовать classList: https://jsfiddle.net/ra9r8rk8/1/