Css 在嵌套样式中添加绝对选择器

Css 在嵌套样式中添加绝对选择器,css,less,Css,Less,我试图找出以较少的时间重复使用某些嵌套样式以防止重复的最佳方法,但我不确定是否找到了最佳方法 现在我有一些类似于: .category-link, .caption-link { background-color: @linkColour; font-family: @linkFont; max-width:2em; a { /* INNER LINK STYLES */ text-decoration:none;

我试图找出以较少的时间重复使用某些嵌套样式以防止重复的最佳方法,但我不确定是否找到了最佳方法

现在我有一些类似于:

.category-link,
.caption-link {
    background-color: @linkColour;
    font-family: @linkFont;
    max-width:2em;
    a {
        /* INNER LINK STYLES */
        text-decoration:none;
        white-space:nowrap;
        /* ...INNER LINK STYLES CONTINUE... */
    }
}
现在,我想将这些相同的内部链接样式应用于选择器
.action link a
,而不将外部样式应用于
.action link

如果我这样做,我会得到我的预期输出:

.inner-link-styles() {
    /* INNER LINK STYLES */
    text-decoration:none;
    white-space:nowrap;
    /* ...INNER LINK STYLES CONTINUE... */
}
.category-link,
.caption-link {
    background-color: @linkColour;
    font-family: @linkFont;
    max-width:2em;
    a {
        .inner-link-styles;
    }
}
.action-link a {
    .inner-link-styles;
}
这不需要任何复制,但我更愿意将这些样式保留在它们当前的相关位置,而不是将它们移出到
mixin中。减少
并增加复杂性,以便下一个开发人员进行故障排除

直觉的感觉,但显然是错误的,是这样的:

.category-link,
.caption-link {
    background-color: @linkColour;
    font-family: @linkFont;
    max-width:2em;
    & a,
    .action-link a {
        /* INNER LINK STYLES */
        text-decoration:none;
        white-space:nowrap;
        /* ...INNER LINK STYLES CONTINUE... */
    }
}

但是,是否有其他前缀可以应用于选择器,使其绝对基于,而不是相对于其嵌套级别?

绝对选择器不能添加到嵌套块中,因为一旦我们将其嵌套到另一个块下,内部选择器将被视为外部选择器的子级(如DOM中的选择器)除非我们将
&.
添加到选择器中(在这种情况下,内部类可能是父类本身上的另一个类)

使用mixin
:extend
功能是您的最佳选择,因为您正在为多个元素指定一组公共属性


由于父选择器是已知的(它是
.category link a
.caption link a
),因此您也可以将该选择器的属性扩展到
.action link a
。这将只扩展内部链接的属性,而不扩展其父链接的属性

我认为这不会增加下一个开发人员进行故障排除的复杂性,因为更改原始
中的属性。类别链接a
也会更改
的属性。操作链接a
也会更改属性

.category-link,
.caption-link {
    background-color: blue;
    font-family: Arial;
    max-width:2em;
    a {
        /* INNER LINK STYLES */
        text-decoration:none;
        white-space:nowrap;
        /* ...INNER LINK STYLES CONTINUE... */
    }
}
.action-link {
  a {
    &:extend(.category-link a);
  }
}

我认为这是不可能的。你自己给出的解决方案是唯一可行的。我觉得可能是这样的。。。我觉得一旦我习惯了少一点,我就不想再以不粘在一起的方式使用它了。对于
.internal-link-styles()
的定义是否应该与其他功能更强大的混入一起放在一个单独的文件中(
mixin.less
),放在自己的单独文件中(
可重用的.less
),或者放在实际使用它们的样式附近,您(或其他人)是否有任何个人/编码风格的想法?(无论是根据您自己的经验偏好还是一些正式定义的最佳实践)至于“应该在单独的文件(mixins.less)中使用其他功能更强大的mixin”。绝对不是。任何混入都应该在你认为它属于的地方,机械结构,如“混入应该在‘混入’中,变量在‘变量’中等等”,至少是愚蠢和反生产的。永远不要盲目地复制著名框架的某些方法(大多数现代框架都是由一个小团队(最多1人)设计的,并且有很多反模式)。这似乎正是我想要的!我现在正在研究这个特性的文档,如果它对其他人有帮助的话,对我来说启示性的概念来自“经验法则是:任何时候你使用一个没有参数的mixin,扩展都会更有效”。我已经发现了参数较少的混合方式,但它感觉不优雅-这是优雅的解决方案。非常感谢