CODEWITHSUNDEEP
csssass
Jonas Praem
Jonas Praem

Reputation: 2444

How to dynamically change variable in mixin function in sass?

I have this mixin function in my sass file, from which I want to count every time it is used. For every time the counter needs to increment by 1, so the right value will change accordingly.

The issue is that I have a unsorted list with a unknown amount of elements. The list items can be of a certain type, and if they are, they need to be placed totally differently in the view. I want to align them to the top right corner of the site by adding a position: absolute and then a dynamic right value (so they don't overlap).

I don't know if my approach is correct, but my question is how do I dynamically change the $item-number variable and then reference this value later ?

$item-number: 1 !default;

@function times($value1, $value2) {
    @return $value1 * $value2;
}

@function plus($value1, $value2) {
    @return $value1 + $value2;
}

@mixin child($n) {
    $item-number: plus($n, 1);
    &:nth-child(#{$n}){
          right: times(50px, $n) !important;
    }
}

li {

    @include media-breakpoint-up(lg) {
            position: absolute;
            top: -30px;
            right: 0;
            @include child($item-number);
    }
}

Upvotes: 1

Views: 734

Answers (1)

Sam Willis
Sam Willis

Reputation: 4211

You need to specifically loop over the mixin a certain number of times, else how does the sass know how many nth-child selectors to create?

I've removed your custom functions to make my example cleaner, but you can see that I have created a loop around the call to the mixin, which runs 9 times, passing the index to the function each time:

@mixin child($n) {
    &:nth-child(#{$n}){
        right: (50px * $n) !important;
    }
}

li {
    position: absolute;
    top: -30px;
    right: 0;

    @for $i from 1 through 9 {
        @include child($i);
    }
}

Upvotes: 2

Related Questions