Less CSS 扩展和媒体查询

Question

我有一些 Less 实用程序用作扩展 - 这是一个典型的场景。

.clearfix
{
    &:before,
    &:after {
        content:"";
        display:table;
    }

    &:after {
        clear:both;
    }
}

但是，我现在发现自己在使用媒体查询，而扩展并没有很好地扩展到所有这些场景。

我想做的是声明一次代码并重用它。我想出了这个有效的模式，并允许我在媒体查询中或任何适合的地方使用该实用程序。

问题是我做错了，扩展应该在媒体查询中工作，或者有更好的解决方法。

.clearfix
{
    @clearfix();
}

@clearfix :
{
    &:before,
    &:after {
        content:"";
        display:table;
    }

    &:after {
        clear:both;
    }
};

提前致谢。

Answer 1

Extend 内部媒体查询只能扩展同一媒体查询块中定义的样式。原因很明显：由于扩展选择器附加到扩展样式选择器列表，媒体查询受限选择器全局定义样式的 extend 将意味着该媒体特定选择器泄漏到全局范围，从而违反了媒体查询块的用途。

换句话说，如果你有类似的东西：

.clearfix {
    /* bla-bla-bla */
}


@media foo {
    .some-div:extend(.clearfix) {
        // some media specific styles
    }
}

并希望获得以下内容CSS：

.clearfix,
.some-div {
    /* bla-bla-bla */
}


@media foo {
    .some-div {
        /* some media specific styles */
    }
}

您还需要通过将扩展部分移至全局范围来明确说明您的意图，例如：

.clearfix {
    /* bla-bla-bla */
}

.some-div:extend(.clearfix) {}

@media foo {
    .some-div {
        /* some media specific styles */
    }
}

或者：

.clearfix {
    /* bla-bla-bla */
}

.some-div {
    &:extend(.clearfix);

    @media foo {
        /* some media specific styles */
    }
}

Answer 2

@seven-phases-max 确实回答了您关于媒体查询中 extend 的问题，但没有回答您关于所用解决方案的问题。

我认为您使用的是 detached ruleset where you should use a mixin。你可能想知道为什么你应该更喜欢 mixin？我认为使用混合将使您的代码更可重用（和可扩展）。

当我在我的项目中import以下代码时：

@set: {
p1: 0;
p2: 1;
p3: 2;
}

当我想为每个 @set() 调用设置 p4:3 时，由于变量的最后声明获胜规则，我需要定义：

@set: {
p1: 0;
p2: 1;
p3: 2;
p4: 3;
}

以上重复前三个属性（将来可能会更改）。

对来自我的库的 mixins 做同样的事情：

.set() {
p1: 0;
p2: 1;
p3: 2;
}

在我导入上述 mixin 的项目中，我只需要定义：

.set() {
p4: 3;
}

但是当使用媒体查询时，分离的规则集确实可以帮助您使代码更干（在一个地方定义一次媒体查询）。示例：

.large-screens(@rules) {
@media (min-width: 1200px)  {
@rules();
}
}

header {
width: 600px;
.large-screens({width: 100%; max-width: 1500px;})
}

以上编译成CSS如下：

header {
  width: 600px;
}
@media (min-width: 1200px) {
  header {
    width: 100%;
    max-width: 1500px;
  }
}

Less CSS 扩展和媒体查询

Less CSS Extend and media queries

css

less