Languages

SCSS / SASS - prevent selectors nesting in output CSS file

8 points
Asked by:
Elmer-Li
396

Is there some way to disable selectors nesting in the output CSS file when I use SCSS nested selectors?

input style.scss file:

div.user {
    border: 1px solid silver;

    a.profile {
        font-weight: 600;
        font-size: 16px;
        color: gray;
    }
}

current output style.css file:

div.user {
    border: 1px solid silver;
}

div.user a.profile {
    font-weight: 600;
    font-size: 16px;
    color: gray;
}

expected output style.css file:

div.user {
    border: 1px solid silver;
}

a.profile {
    font-weight: 600;
    font-size: 16px;
    color: gray;
}

Edit:

I want to use nested selectors because they make files more readable.

1 answer
3 points
Answered by:
Elmer-Li
396

As @Root-ssh mentioned, use @at-root:

div.user {
    border: 1px solid silver;

    @at-root a.profile {
        font-weight: 600;
        font-size: 16px;
        color: gray;
    }
}

The output for selectors that have @at-root will be not nested.

Example output:

div.user {
    border: 1px solid silver;
}

a.profile {
    font-weight: 600;
    font-size: 16px;
    color: gray;
}

Source: https://sass-lang.com/documentation/at-rules/at-root

0 comments Add comment
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join