将手写笔迁移到 SASS答案

【问题标题】：Migration Stylus to SASS将手写笔迁移到 SASS
【发布时间】：2021-09-08 16:17:54
【问题描述】：

我希望你能帮助我，多年来我一直使用 Stylus 作为 CSS 预处理器，但不幸的是社区非常小，我目前正在切换到 Sass，我想将一个完整的项目从 Stylus 迁移到 Sass，在在迁移过程中出现了一个问题，我想知道如何在 Sass 中执行此操作。

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

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

我留下选中的行指向类的父类并连接 "_icon" 以创建一个新类，编译后将如下所示。

.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;
}

感谢您的帮助。

【问题讨论】：

这能回答你的问题吗？ SASS CSS: Target Parent Class from Child
查看在父选择器下分配变量的第三个答案。我认为关于@at-root 的最佳答案在这里不会对您有所帮助。
您好，感谢您的评论，不，很遗憾这不是解决方案。

标签： css sass stylus

【解决方案1】：

你有多种解决方案来做你想做的事。

首先要为.service_list_item分配一个新变量：

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

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

另一种解决方案是将&:hover 和&_icon 写在同一行：

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

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

两者的输出相同。
如果我需要在选择器中多次使用$root，我会使用第一个选项，第二个选项不那么冗长，但如果您需要&:hover 的规则，则需要换行...
由您决定什么最适合您。

【讨论】：