将嵌套css转换为更少

dpiehjr4  于 2023-02-26  发布在  其他
关注(0)|答案(2)|浏览(113)
.carView .carList .carContent.carName .icon, .carView .carList .carContent.carFrom .icon {
    padding-inline-end: 0.5rem;
    line-height: normal;
    min-width: 1.2rem;
}

我有这个CSS文件,并希望改变它作为少,也想使用我现有的少代码。

.carView {
  .carList {
 
  }
}

我试着让它看起来像下面的代码。

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

对不对呀?

ubbxdtey

ubbxdtey1#

正确代码为:

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

因为.carContent.carName .icon.carContent.carFrom .icon.carView .carList的子级。

db2dz4w8

db2dz4w82#

一种稍微不同的方法--如果你不想增加选择器的特殊性(例如覆盖第三方样式),并且你可以控制你的html --这意味着你知道应用什么类以及如何应用--那么你可以忽略父选择器,完全删除嵌套,简单地通过它的直接父选择器定位图标。
包含多个父元素的唯一原因是为了区分特定的元素--但完全有可能只有一个类'carName' --所以它与该类的祖父无关。仅直接父元素就足以定位该类。

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

或者-假设你对html有控制权-然后简单地分配一个公共类(例如:“carIcon”)添加到您想要影响的所有图标,并设置无嵌套的样式

.carIcon {
    padding-inline-end: 0.5rem;
    line-height: normal;
    min-width: 1.2rem;
}

相关问题