CODEWITHSUNDEEP
sass
beingmrkenny
beingmrkenny

Reputation: 192

Target specific selector in SCSS

Is there a way to modify one of the ancestors in the selector chain?

This is the CSS I want to produce:

#ViewCardDialog > header::after {
    // styles
}

#ViewCardDialog.blocked > header::after {
    // blocked styles
}

#ViewCardDialog.on-hold > header::after {
    // on hold styles
}

And I was wondering if something like this were possible:

#ViewCardDialog {

    > header {

        &::after {

            // styles

            @parent(.blocked) & {
                // blocked styles
            }

            @parent(.on-hold) & {
                // on hold styles
            }
        }

    }

}

Upvotes: 1

Views: 426

Answers (3)

user4994625
user4994625

Reputation:

Maybe is a bit confused code but is the best way I found to achieve that you want. First I define a variable for the parent and then I use the replace function for add the class in the parent, also need @at-root directive to prevent repetition of the selector:

SASS

#ViewCardDialog {
  $root: &;
  > header {
    &::after {
      color: blue;
      @at-root #{selector-replace(&, $root, $root+".blocked")} {
        color: red;
      }
      @at-root #{selector-replace(&, $root, $root+".on-hold")} {
        color: green;
      }
    }
  }
}

Output

#ViewCardDialog > header::after {
  color: blue;
}
#ViewCardDialog.blocked > header::after {
  color: red;
}
#ViewCardDialog.on-hold > header::after {
  color: green;
}

Upvotes: 1

Abdul Rahuman M
Abdul Rahuman M

Reputation: 86

#ViewCardDialog {
    > header{
        &:after {
            // styles
        }
    }
    &.blocked{
        > header{
            &:after {
                // styles
            }
        }
    }
    &.on-hold{
        > header{
            &:after {
                // styles
            }
        }
    }
}

Upvotes: 0

jmargolisvt
jmargolisvt

Reputation: 6088

If you attached the .blocked and .on-hold classes to the header, your parent selectors might work, but I think given what you've got, you want this:

#ViewCardDialog {
    > header::after {
            // styles
    }
    &.blocked > header::after {
        // blocked styles
    }

    &.on-hold > header::after {
        // on hold styles
    }
}

Upvotes: 1

Related Questions