How to Correctly Use the Ampersand (&) in SASS Selectors for Parent Selector References?-CSS Tutorial-php.cn

How to Correctly Use the Ampersand (&) in SASS Selectors for Parent Selector References?

Patricia Arquette

Release： 2024-10-30 03:42:02

Original

1016 people have browsed it

How to Correctly Use the Ampersand (&) in SASS Selectors for Parent Selector References?

Ampersand (&) in SASS: Using it at the End and Within Selectors

Developers often encounter challenges when using the ampersand (&) character in SASS selectors, especially when it appears at the end or within the selector. This inquiry delves into this specific issue.

The presented mixin attempts to port some LESS code to SASS. However, due to an incorrect usage of & in the selector, the code fails to produce the desired output.

To understand the purpose of the & character, it's crucial to recognize its role as a placeholder for the parent selector. When used within a mixin or block, & represents the selector or class that invoked the mixin.

In this case, the intended behavior is for the mixin to generate selectors that include the class name of the invoking element. For instance, if the mixin is invoked inside a

element, it should produce:

.callerClass .foreverAlone {
    ...
}

.callerClass .iThink .illNeverWork.callerClass {
    color: #123ABC;
    ...
}

Copy after login

However, the provided code doesn't achieve this because of the incorrect placement of &. To resolve this issue, & should be used appropriately to represent the parent selector:

@mixin button-variant($color, $background, $border) {
    {
        ...
        .foreverAlone{
            ...
        }

        .iThink &amp;.illNeverWork {

            color: #123ABC;
            ...
        }
  }

Copy after login

With this corrected implementation, the mixin will correctly prepend the caller class to any nested selectors generated within the mixin. Remember, the placement and usage of & can significantly impact the resulting CSS output, so it's essential to use it accurately.

The above is the detailed content of How to Correctly Use the Ampersand (&) in SASS Selectors for Parent Selector References?. For more information, please follow other related articles on the PHP Chinese website!