更少的 CSS 扩展和媒体查询答案

【问题标题】：Less CSS Extend and media queries更少的 CSS 扩展和媒体查询
【发布时间】：2015-07-06 21:21:48
【问题描述】：

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

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

    &:after {
        clear:both;
    }
}

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

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

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

.clearfix
{
    @clearfix();
}

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

    &:after {
        clear:both;
    }
};

提前致谢。

【问题讨论】：

标签： css less

【解决方案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 */
    }
}

【讨论】：

【解决方案2】：

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

我认为您使用的是detached ruleset，而您应该使用mixin。你可能想知道为什么你应该更喜欢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;
  }
}

【讨论】：