Utilizing an ampersand (&) at the conclusion and within a selector in SASS

Question

Utilizing an ampersand (&) at the conclusion and within a selector in SASS

I'm currently facing a problem with a mixin I created to convert some Less code into Sass:

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

        .iThink .illNeverWork& {

            color: $pinkUnicornRainbow;
            ...
        }
  }

Unfortunately, the current implementation is not functioning as expected :D I am hoping for it to produce output similar to:

.callerClass .foreverAlone{
    ...
} 

.callerClass .iThink .illNeverWork.callerClass{

    color: #123ABC;
    ...
}

Since the mixin is being used within various div classes, creating a static solution is not straightforward.

If any Sass experts (or even non-experts with clever ideas) have a workaround, I would greatly appreciate your input. Thank you all for taking the time to read and potentially offer solutions!

css sass porting ampersand

Answer 1

Answer №1

When working with Sass versions 3.2 and older, there are several ways you can effectively utilize the parent selector:

.foo {
    &, &.bar, &#bar, &:after, &[active] {
        color: red;
    }
}

.foo {
    .bar & {
        color: red;
    }
}

In Sass 3.3 and later versions, you have more options:

.foo {
    &bar, &-bar {
        color: red;
    }
}

New features were added in Sass 3.4:

.foo {
    $foo: &;
    @at-root bar#{&} {
        color: red;
    }
}

Answer 2

When working with Sass versions 3.2 and older, there are several ways you can effectively utilize the parent selector:

.foo {
    &, &.bar, &#bar, &:after, &[active] {
        color: red;
    }
}

.foo {
    .bar & {
        color: red;
    }
}

In Sass 3.3 and later versions, you have more options:

.foo {
    &bar, &-bar {
        color: red;
    }
}

New features were added in Sass 3.4:

.foo {
    $foo: &;
    @at-root bar#{&} {
        color: red;
    }
}

Utilizing an ampersand (&) at the conclusion and within a selector in SASS

Answer №1

Similar questions

Steps for removing form validation from non-conditional formControls

The issue of border-radius and shadow box inconsistency

Is there a way to align the arrow on the pills to the right center of the lengthy text?

Using the <mark> tag in CSS for creating padding

Issue with bootstrap accordion not collapsing other open tabs automatically

How can I make two lines equal in length by stretching them?

Upon clicking the collapse button, the collapsed element briefly appears before its height value is reset to empty in the element's style

How can I display a PDF on a webpage for viewing on Chrome for Android without relying on Google Drive?

Text within table cells on email appears to be shrinking on Windows Phone devices

How can you ensure that text in a container automatically moves to a new line and causes the container to expand downward if necessary, when

What is the best way to reposition my boxes to sit below the diamond DIV instead of behind it?

What is the best way to implement a sub-menu using jQuery?

Display HTML element within the <samp> tag using PHP

Creating a Sticky Table Header with Dynamic Height in React using Material-UI

Dynamic CSS background images with Nuxt.js: a guide

Modifying icons with JavaScript

I am facing an issue where Chrome is causing my image set with max-width to stretch

Varied selection menu feature

What is the best way to reveal the menu options by tapping on the top left icon?

What is the best way to utilize jQuery in order to present additional options within a form?