Question

我有一些较少的实用程序，我已经用作扩展 - 这是一个典型的场景。

.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，您应该使用mixin。你可能想知道为什么你应该更喜欢mixin？我认为使用mixin会使您的代码更具可重用性（并且可扩展）。

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

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

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

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

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

对我的库中的mixins做同样的事情：

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

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

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

减少CSS扩展和媒体查询

2 个答案: