CODEWITHSUNDEEP
csssassscss-mixins
Daniel Robinson
Daniel Robinson

Reputation: 14878

How to insert an ampersand conditionally in a SASS mixin?

Below is some sass Im trying out, The css generated is correct, Im just trying to reduce my mixin duplication. The two mixins genProps and genPropsAmp are exactly the same except that the Amp mixin uses the & to prefix the rule with &. I tried to just add another var to the original mixin $amp: false and prefix my rule with an if so it became @if $amp {&}.#{$class}-... but that didnt work nor did trying to have it as an interpolation. Is there away of conditionaly placing the ampersand so I can just reuse the one mixin?

SASS:

$max_size: 0;
$sub_suffixes: '', 'q', 'h', 't';
$sub_divs: '', '.25', '.5', '.75';


@mixin genProps($class, $props, $val_prefix: r, $max_size: $max_size, $sub_suffixes: $sub_suffixes) {
    @for $i from 0 through $max_size {
        @each $sub_suffix in  $sub_suffixes {
            .#{$class}-#{$i}#{$sub_suffix} {
                @each $prop in $props {
                    #{$prop}: var(--#{$val_prefix}-#{$i}#{$sub_suffix});
                }
            }
        }
    }
}

@mixin genPropsAmp($class, $props, $val_prefix: r, $max_size: $max_size, $sub_suffixes: $sub_suffixes) {
    @for $i from 0 through $max_size {
        @each $sub_suffix in  $sub_suffixes {
            &.#{$class}-#{$i}#{$sub_suffix} {
                @each $prop in $props {
                    #{$prop}: var(--#{$val_prefix}-#{$i}#{$sub_suffix});
                }
            }
        }
    }
}

.root{
    @include genProps(f, font-size, a);
    @include genPropsAmp(m, margin);
}

CSS:

/* without amp */

.root .f-0 {font-size: var(--a-0);}
.root .f-0q {font-size: var(--a-0q);}
/*...*/

/* with amp */
.root.m-0 {margin: var(--r-0);}
.root.m-0q {margin: var(--r-0q);}
/*...*/

Upvotes: 0

Views: 138

Answers (2)

Arkellys
Arkellys

Reputation: 7803

You can use a ternary operator: if($amp, "&", "")

@mixin genProps($class, $props, $amp, $val_prefix: r, $max_size: $max_size, $sub_suffixes: $sub_suffixes) {
    @for $i from 0 through $max_size {
        @each $sub_suffix in  $sub_suffixes {
            #{if($amp, "&", "")}.#{$class}-#{$i}#{$sub_suffix} {
                @each $prop in $props {
                    #{$prop}: var(--#{$val_prefix}-#{$i}#{$sub_suffix});
                }
            }
        }
    }
}

Upvotes: 1

Daniel Robinson
Daniel Robinson

Reputation: 14878

@mixin genProps($class, $props, $amp: false, $val_prefix: r, $max_size: $max_size, $sub_suffixes: $sub_suffixes) {
    @for $i from 0 through $max_size {
        @each $sub_suffix in  $sub_suffixes {
            @if $amp {
                &.#{$class}-#{$i}#{$sub_suffix} {
                    @each $prop in $props {
                        #{$prop}: var(--#{$val_prefix}-#{$i}#{$sub_suffix});
                    }
                }
            } @else {
                .#{$class}-#{$i}#{$sub_suffix} {
                    @each $prop in $props {
                        #{$prop}: var(--#{$val_prefix}-#{$i}#{$sub_suffix});
                    }
                }
            }    
        }
    }
}

this is the best Iv got so far, not great as theres still a lot of duplication in the if elses but at least I only have one mixin now

Upvotes: 0

Related Questions