Less CSS扩展和媒体查询 [英] Less CSS Extend and media queries

问题描述

我有一些Less扩展的实用程序，这是一个典型的情况。

  .clearfix 
 {
&：before，
&：after {
 content：; 
 display：table; 
} 
 
&：after {
 clear：both; 
} 
} 
  

但是，现在我发现自己使用媒体查询extend不会，很好，扩展到所有这些情况。

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

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

  .clearfix 
 {
 @clearfix（）; 
} 
 
 @clearfix：
 {
&：before，
&：after {
 content：; 
 display：table; 
} 
 
&：after {
 clear：both; 
} 
}; 
  

提前感谢。

方案

在媒体查询中扩展只能扩展在同一媒体查询块中定义的样式。原因很明显：因为扩展选择器被附加到扩展样式选择器列表，所以媒体查​​询有限选择器的全局定义样式的 extend 意味着该媒体的泄漏特定选择器到全局范围，从而违反媒体查询块的目的。

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

  .clearfix {
 / * bla-bla-bla * / 
} 
 
 
 @media foo {
 .some-div：extend（.clearfix）{
 //一些媒体特定样式
} 
} 
  pre> 
 
 
并且想要获得以下CSS：
  .clearfix ，
 .some-div {
 / * bla-bla-bla * / 
} 
 
 
 @media foo {
 .some -div {
 / *一些媒体特定样式* / 
} 
} 
  
 
 $ b b 
您还需要通过将扩展部分移动到全局范围来明确指定您的意图，例如：
  .clearfix {
 / * bla-bla-bla * / 
} 
 
 .some-div：extend（.clearfix）{} 
 
 @media foo {
 .some-div {
 / *一些媒体特定样式* / 
} 
} 
  
或者：
  .clearfix {
 / * bla-bla-bla * / 
} 
 
 .some-div {
&：extend（.clearfix）; 
 
 @media foo {
 / *一些媒体特定样式* / 
} 
} 
  
 
I have a few Less utilities that I've used as extends - here's a typical scenario.
.clearfix
{
    &:before,
    &:after {
        content:"";
        display:table;
    }

    &:after {
        clear:both;
    }
}
However, I now find myself using media queries and the extend doesn't, well, extend, to all these scenarios.

What I would like to do is to declare the code once and reuse it. I came up with this pattern which works and allows me to use the utility inside media queries, or wherever it suits.

The question is I am doing it wrong, and the extend should work inside a media query, or is there a better of tackling this.
.clearfix
{
    @clearfix();
}

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

    &:after {
        clear:both;
    }
};
Thanks in advance.
解决方案
Extend inside media queries can extend only styles defined in the same media query block. The reason is obvious: since the extending selector is appended to the list of extended style selectors, extend of the globally defined style by a media query limited selector would mean leaking of that media specific selector to the global scope thus violating the purpose of the media query block.

In other words, if you have something like:
.clearfix {
    /* bla-bla-bla */
}


@media foo {
    .some-div:extend(.clearfix) {
        // some media specific styles
    }
}
And want to get the following CSS:
.clearfix,
.some-div {
    /* bla-bla-bla */
}


@media foo {
    .some-div {
        /* some media specific styles */
    }
}
You'll need to specify your intentions explicitly by moving the extending part to the global scope as well, e.g.:
.clearfix {
    /* bla-bla-bla */
}

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

@media foo {
    .some-div {
        /* some media specific styles */
    }
}
Or alternatively:
.clearfix {
    /* bla-bla-bla */
}

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

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


                        
这篇关于Less CSS扩展和媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！