Migration Stylus to SASS

Question

I hope you can help me, for years I have been using Stylus as a CSS preprocessor but unfortunately the community is very small, I am currently switching to Sass and I want to migrate a complete project from Stylus to Sass, in the middle of the migration a problem arose and I would like to know how to do this in Sass.

.service_list_item
    display: grid
    position: relative
    padding: 0 1.072rem
    justify-items: center

    &:hover
        & ^[0]_icon // <=== This line
            background-color: $accentColor

The line I left selected I am pointing to the parent of the class and concatenating "_icon" to create a new class that compiled would look like this.

.service_list_item {
    display: grid;
    position: relative;
    padding: 0 1.072rem;
    justify-items: center;
}
.service_list_item:hover .service_list_item_icon {
    background-color: #e3c1c1;
}

Thank you for your help.

Does this answer your question? [SASS CSS: Target Parent Class from Child](https://stackoverflow.com/questions/9293891/sass-css-target-parent-class-from-child) — cjl750, Sep 08 '21 at 02:38
Check out the 3rd answer of assigning a variable under the parent selector. I don't think the top answer about `@at-root` will help you here. — cjl750, Sep 08 '21 at 02:39
Hello, thank you for your comment, no, unfortunately this is not the solution. — DavichoDev, Sep 08 '21 at 06:18

score 0 · Accepted Answer · answered Sep 08 '21 at 08:17

You have multiple solutions to do what you're willing to do.

The first wood be to assign a new variable for .service_list_item:

.service_list_item {
    $root: &;
    display: grid;
    position: relative;
    padding: 0 1.072rem;
    justify-items: center;

    &:hover {
        #{$root}_icon {
            background-color: $accentColor
        }
    }
}

Another solution, would be to write &:hover and &_icon on the same line:

.service_list_item {
    $root: &;
    display: grid;
    position: relative;
    padding: 0 1.072rem;
    justify-items: center;

    &:hover &_icon {
        background-color: $accentColor
    }
}

Both will output the same.
I would use the first if I need to use $root more than once in the selector, the second option is less verbose, but if you need rule for &:hover, you'll need a new line...
It's up to you to see what fits you the best.

Migration Stylus to SASS

1 Answers1