sass set variable from mixin to use in stylesheet

71 views Asked by At

Is it possible to set a global variable inside a mixin? I'm trying to make it so that the argument the mixin recieves can be changed depending on where the mixin will be included. But the variable is being used other places to calculate other css stuff on the page.

$maxInputValue5: 4;
$maxInputValue10: 9;
$labelsWidth5: $sliderWidth/$maxInputValue5;
$labelsWidth10: $sliderWidth/$maxInputValue10;
$labelsMargin5: $sliderWidth/(-$maxInputValue5*2);
$labelsMargin10: $sliderWidth/(-$maxInputValue10*2);

@mixin setWidthSlider($sliderWidth) {
    width: $sliderWidth;
}

@mixin calcMargin($list10: false, $list5: true) {
    @if $list10 == false and $list5 == true {
        margin: 18px $labelsMargin5 0;
    } @else if $list10 == true and $list5 == false {
        margin: 18px $labelsMargin10 0;
    }
}

@mixin calcWidth($list10: false, $list5: true) {
    @if $list10 == false and $list5 == true {
        width: $labelsWidth5;
    } @else if $list10 == true and $list5 == false {
        width: $labelsWidth10
    }
}

.sliderWidth {
    @include setWidthSlider(400px);
}

.x {
    @include calcMargin($list10: false, $list5: true);
    @include calcMargin($list10: true, $list5: false);
li {
    @include calcWidth($list10: false, $list5: true);
    @include calcWidth($list10: true, $list5: false);
    }
}

However... The $sliderWith is being undefined when entering the other mixins. How do I achieve that the next mixins and other variables knows what $sliderWidth is?

0

There are 0 answers