减少CSS扩展和媒体查询

Question

我有一些Less扩展的实用工具 - 这是一个典型的场景。

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

    &:after { 
     clear:both; 
    } 
} 

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

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

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

.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

@七阶段-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; 
} 

以上重复前三个属性（未来可能会发生变化）。

做与混入一样，从我的图书馆：

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

在我的项目，进口上述混入我将只定义：

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