将指定嵌套CSS转换为适配现有结构的Less，我的写法是否正确？

原始CSS代码：

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

已有Less结构：

.carView {
  .carList {
 
  }
}

自行编写的Less代码：

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

请问该写法是否正确？

你的写法不正确，存在两处问题：

• 选择器&.carFrom.icon错误：原始CSS中.carFrom和.icon是后代关系（中间有空格），但这个写法会编译成.carContent.carFrom.icon（三个类并列在同一元素上），与原CSS逻辑不符。
• 属性替换不严谨：原始CSS使用的是padding-inline-end（适配多语言排版的逻辑属性），你写成了padding-right，虽然在左到右排版下效果一致，但未完全匹配原始代码的兼容性设计。

正确的Less写法如下：

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

也可以进一步简化写法，提取重复的.icon选择器，结构更清晰：

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

内容的提问来源于stack exchange，提问作者morecoffee