CODEWITHSUNDEEP
csssassless
R Reveley
R Reveley

Reputation: 1584

guards on selectors from Less to Sass

I'm switching over from Less to Sass and am wondering how I do the following?

In Less I can add a guard to a rule-set so that it only compiles if I have set the has-badge variable to enabled (it's not a mixin being called from elsewhere but a self contained block).

.badge when (@has-badge = enabled){
    display: inline-block; border-radius: $badge-radius; padding: $badge-padding; min-width: 1em; text-align: center; font-size: $badge-font-size; line-height: 1em;
}

@has-badge: enabled;

Upvotes: 0

Views: 529

Answers (1)

Arnold Stoba
Arnold Stoba

Reputation: 343

You have the ability to use simply if/else statements in SASS and compare a string to a value like in the following example:

.badge {
    @if $has-badge == "enabled" {
        display: inline-block; border-radius: $badge-radius; padding: $badge-padding; min-width: 1em; text-align: center; font-size: $badge-font-size; line-height: 1em;
    }
}

Upvotes: 2

Related Questions