CSS pre-processor with a possibility to define var

Currently, I am using LESS as my main CSS pre-processor. I have (and I am sure a lot of people have this need) to define variables in a @media query like:

@media screen and (max-width: 479px) {
    myVar: 10px;
}
@media screen and (min-width: 480px) and (max-width: 767px) {
    myVar: 20px;
}
@media screen and (min-width: 768px) {
    myVar: 30px;
}

.myElement {
    padding: @myVar;
}

This doesn't work in LESS, because of the compiling nature (@myVar is defined within a scope of each particular @media only, but not globally). Even if I define @myVar globally before the media queries, it is not updated in accordance to the media queries and .myElement gets that initial value no matter what.

So, the question is, is it possible to achieve this in any other CSS pre-processor, or we are doomed to override the .myElement within each media query? Not a problem in this simplest example, but in real projects this could save a lot of time and copy/pasting.

EDIT: Not a solution, but a workaround for my particular project:

Set font-size on <html> to base font-size
myVar LESS variable is defined in rem instead of px as a derivative of the base font-size
Use @media queries to adjust base font-size for different media.
OPTIONAL Use REM unit polyfill for browsers, that don't yet support rem (http://caniuse.com/#search=rem). This will not work in IE 8 and below, but not because of lack of support for rem – it doesn't support media queries. So IE8 and below get full-size media-queries-free stylesheet anyway.

Code snippet:

@myVar: .77rem; // roughly 10px, 20px and 30px respectively

html { font-size: 13px }
@media screen and (min-width: 480px) and (max-width: 767px) {
    html { font-size: 26px }
}
@media screen and (min-width: 768px) {
    html { font-size: 39px }
}

.myElement {
    padding: @myVar;
}

Here is a JSBin with more extensive example that mixes different font-size elements with differently measured blocks.

Easy and flexible for my needs. Hopefully will be helpful for somebody else.

标签： css less media-queries sass

3条回答

我想做一个坏孩纸

2楼-- · 2019-01-25 08:38

what about:

@media screen and (max-width: 479px) {
    .myElement(10px);
}

@media screen and (min-width: 768px) {
    .myElement(30px);
}


.myElement(@myVar) {
    .myElement {
        padding: @myVar;
    }
}

0人赞添加讨论(0) 举报

淡お忘

3楼-- · 2019-01-25 08:45

You could refactor it out putting media queries in variables, and then using them within elements.

Example:

@phone: ~"screen and (max-width: 479px)";
@tablet: ~"screen and (min-width: 480px) and (max-width: 767px)";
@desktop: ~"screen and (min-width: 768px)";

.myElement {
  @media @phone { padding: 10px; }
  @media @tablet { padding: 20px; }
  @media @desktop { padding: 30px; }
}

Which produces:

@media screen and (max-width: 479px) {
  .myElement {
    padding: 10px;
  }
}
@media screen and (min-width: 480px) and (max-width: 767px) {
  .myElement {
    padding: 20px;
  }
}
@media screen and (min-width: 768px) {
  .myElement {
    padding: 30px;
  }
}

The whole make the media query an unparsed literal embed in a variable is not exactly pretty but also helps standardizing media queries.

And it helps readability because all of the three behaviors of .myElement are contained in one definition and not changed somewhere else (which could be an entirely different file) making "debugging" hard.

0人赞添加讨论(0) 举报

Bombasti

4楼-- · 2019-01-25 08:52

Let me answer more directly the question:

"Is it possible to achieve this in any other CSS pre-processor, or we are doomed to override the .myElement within each media query?"

The answer actually resides in the question. Because LESS (and other similar tools) is a "pre-processor," the @media means nothing to it at compilation time, because it is not looking at the media state of the browser for its preprocessing. The @media state is only relevant after the preprocessing, at which point any @someVariable has already been calculated. This is why what you are trying to do cannot work. Your @myVar can only be output as a single value in a CSS style sheet, and that output occurs before the browser state is ever evaluated by @media.

So it does not have to do with the "global" or "local" scope of a media query, but the fact that LESS compiles the code into CSS utilizing the variables, and it is the CSS (not LESS) that pays attention to the @media query information.

For some further discussion on building media queries with LESS in such a way that they are all together and not scattered throughout the code, see this question.

0人赞添加讨论(0) 举报

CSS pre-processor with a possibility to define var

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间