将 Stylus 迁移到 SASS

Question

我希望你能帮助我，多年来我一直使用 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

我选择的行我指向 class 的父级并连接 "_icon" 以创建一个新的 class 编译将看起来像这样。

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

感谢您的帮助。

Answer 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 的规则，你将需要一个新行.. .
由你决定什么最适合你。

将 Stylus 迁移到 SASS

Migration Stylus to SASS

css

stylus

sass