将嵌套的 css 转换为 less

Question

.carView .carList .carContent.carName .icon, .carView .carList .carContent.carFrom .icon {
    padding-inline-end: 0.5rem;
    line-height: normal;
    min-width: 1.2rem;
}

我有这个 css 文件，想把它改成 Less，也想使用我现有的 Less 代码。

.carView {
  .carList {
 
  }
}

我尝试的是让它像下面的代码一样。

.carView {
  .carList {
    .carContent {
            &.carName .icon, &.carFrom.icon {
                padding-right: 0.5rem;
                line-height: normal;
                min-width: 1.2rem;
            }
        }
    }
 }

正确吗？

Answer 1

正确的代码是：

.carView {
    .carList {
        &.carContent.carName .icon,
        &.carContent .carFrom .icon {
            padding-inline-end: 0.5rem;
            line-height: normal;
            min-width: 1.2rem;
        }
    }
}

或

.carView {
    .carList {
        &.carContent {
            &.carName .icon,
            .carFrom .icon {
                padding-inline-end: 0.5rem;
                line-height: normal;
                min-width: 1.2rem;
            }
        }
    }
}

因为

.carList.carContent.carName

和

.carList.carContent .carFrom

在

.carList

和

.carContent

之间没有空间。

Answer 2

稍微不同的方法——如果你不想增加选择器的特异性——那么你可以忽略父选择器，完全删除嵌套并简单地定位图标和它的直接父级。

包括多个父项的唯一原因是区分特定元素——但完全有可能只有一个类“carName”——因此它与该类的父项无关。

.carName .icon,
.carFrom .icon {
    padding-inline-end: 0.5rem;
    line-height: normal;
    min-width: 1.2rem;
}