CODEWITHSUNDEEP
csssassscss-mixins
artu-hnrq
artu-hnrq

Reputation: 1497

Ampersand (&) as a variable inside SASS @mixin

Looking up Bootstrap 5 code, I faced this following statement on bootstrap/scss/mixins/_forms.scss file:

@mixin form-validation-state-selector($state) {
  @if ($state == "valid" or $state == "invalid") {
    .was-validated #{if(&, "&", "")}:#{$state},
    #{if(&, "&", "")}.is-#{$state} {
      @content;
    }
  } @else {
    #{if(&, "&", "")}.is-#{$state} {
      @content;
    }
  }
}

And could not exactly understand the usage of & variable inside the #{if(&, "&", "")} statements. How is it working?

I know the Ampersand (&) character is used, os SASS, to include the parent selector(s), when writing on an indented hierarchy. But I couldn't guess how it has been using on the mentioned statement inside the @mixin, when out of quotes ". Can someone explaning it?

Thanks in advance!

Upvotes: 3

Views: 328

Answers (2)

Tanner Dolby
Tanner Dolby

Reputation: 4421

They are using interpolation for part of the selector with the #{if(&, "&", "")}:#{$state} logic.

The if() function works like if(val, res1, res2) where if val is true then res1 is used, else res2, like a ternary. So if the & was truthy e.g. parent selector exists, then it would churn out .was-validated &:valid, using "&", otherwise it would be .was-validated :valid using the empty string.

Here is a CodePen demo which demonstrates the #{if(&, "&", ""} usage.

Upvotes: 1

F. Müller
F. Müller

Reputation: 4062

The reason for this syntax is, that this is some kind of parsing / compatibility issue with dartsass. SASS over the years had a lot of different CLI tools to generate the code and there were somehow different levels of strictness when it comes to errors.

Looks like it is there to prevent an issue. I.e. you should not use & at the root level (there is no root of root - probably a NullPointer or something while compiling) because this will produce the error you see here in the screenshot below:

enter image description here

The reason can be found in the comment above the code you linked: https://github.com/sass/sass/issues/1873#issuecomment-152293725

Once you add the rule, the error is gone:

enter image description here

Parser used: https://www.sassmeister.com/

Upvotes: 2

Related Questions