更少的CSS扩展和媒体查询

我使用了一些较少的实用程序作为扩展—下面是一个典型的场景

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

    &:after {
        clear:both;
    }
}

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

我想做的是声明一次代码并重用它。我提出了这个模式，它可以工作，允许我在媒体查询中或任何适合的地方使用该工具

问题是我做错了，extend应该在媒体查询中起作用，或者有更好的方法来解决这个问题

.clearfix
{
    @clearfix();
}

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

    &:after {
        clear:both;
    }
};

---

提前感谢。

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

换句话说，如果您有以下情况：

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

---

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

---

@seven Phase max会回答您关于媒体查询的问题，但不会回答您关于所用解决方案的问题

我认为你使用的是a，你应该使用a。你可能想知道为什么你更喜欢混音？我认为使用mixin将使您的代码更加可重用（和可扩展）

当我在项目中输入以下代码时：

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

当我想为每个

@set（）

调用设置

p4:3

时，由于变量的最后一个声明wins规则，我需要定义：

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

以上重复了前三个属性（以后可能会更改）

在“我的库”中对mixin执行相同的操作：

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

---

@seven Phase max会回答您关于媒体查询的问题，但不会回答您关于所用解决方案的问题

我认为你使用的是a，你应该使用a。你可能想知道为什么你更喜欢混音？我认为使用mixin将使您的代码更加可重用（和可扩展）

当我在项目中输入以下代码时：

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

当我想为每个

@set（）

调用设置

p4:3

时，由于变量的最后一个声明wins规则，我需要定义：

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

以上重复了前三个属性（以后可能会更改）

在“我的库”中对mixin执行相同的操作：

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