Question

我正在尝试找出在Less中重复使用一些嵌套样式以避免重复的最佳方法，但我不确定我是否找到了最好的方法。

现在我有类似的东西：

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

并不需要任何重复，但我更喜欢将这些样式保留在它们相关的当前位置，而不是将它们移到mixins.less并增加复杂性下一个开发人员进行故障排除。

感觉直观，但显然是错误的，是这样的：

.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... */
    }
}

但是我是否可以将一些其他前缀应用于选择器以使其完全基于，而不是相对于它的嵌套级别？

Answer 1

绝对选择器不能在嵌套块中添加，因为一旦我们将它嵌套在另一个块下，内部选择器被视为外部选择器的子级（就像在DOM中一样），除非我们将&.添加到选择器（在这种情况下，内部可以是父本身上的另一个类）。

使用 mixins 或 :extend 功能是您的最佳选择，因为您要为多个元素分配一组常用属性。

由于父选择器已知（可以是.category-link a或.caption-link a），因此您也可以将该选择器的属性扩展为.action-link a。这将仅扩展内部链接的属性，而不扩展其父级的属性。

我认为这不会增加下一个开发人员排除故障的复杂性，因为更改原始.category-link a中的属性也会更改.action-link 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);
  }
}

以嵌套样式添加绝对选择器

1 个答案: