[英] CSS pre-processor with a possibility to define variables in a @media query
问题描述
目前，我使用LESS作为我的主要CSS预处理器。我有（我相信很多人有这个需要）在 @media 查询中定义变量，如：
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;
}
这在LESS中不起作用，因为编译性质c $ c> @myVar 仅在每个特定 @media 的范围内定义，而不是全局定义。即使我在媒体查询之前定义 @myVar ，它也不会根据媒体查询和 .myElement 得到初始值不管什么。
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.
所以，问题是，是否可能在任何其他CSS预处理器实现这一点，或者我们注定要覆盖每个媒体查询中的 .myElement ？在这个最简单的例子中不是一个问题，但在实际项目中这可以节省大量的时间和复制/粘贴。
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：
对于我的特定项目，不是解决方案，而是解决方法：
- 设置字体大小< c $ c>< html> to base font-size
-
myVarrem而不是px作为基本字体大小的导数 - 使用
@media查询 使用 REM单元polyfill 的浏览器，尚不支持
rem （ http://caniuse.com/#search=rem ）。这不会在IE 8和以下，但不是因为缺乏支持 rem - 它不支持媒体查询。因此，IE8及以下版本可获得全尺寸的媒体查询自由样式表。 - Set font-size on
<html>to base font-size myVarLESS variable is defined inreminstead ofpxas a derivative of the base font-size- Use
@mediaqueries 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 forrem– it doesn't support media queries. So IE8 and below get full-size media-queries-free stylesheet anyway.
代码段：
@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;
}
这里是 JSBin ，更多的示例将不同的字体大小的元素与不同测量的块混合。
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.
推荐答案
让我更直接地回答问题：
Let me answer more directly the question:
可以在任何其他CSS预处理器中实现，或者我们
注定要覆盖.myElement在每个媒体查询内？
答案实际上在问题中。因为LESS（和其他类似工具）是一个预处理器，所以 @media 在编译时没有意义，因为它不是在介质状态浏览器进行预处理。 @media 状态仅在预处理之后与相关，此时任何 @someVariable 已经计算。这就是为什么你试图做的不能工作。您的 @myVar 只能在CSS样式表中作为单个值输出，并且输出在浏览器状态由 @media
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.
因此，它与媒体查询的全局或本地范围无关，但LESS使用变量将代码编译成CSS，并且是注意 @media 查询信息的CSS（不是LESS）。
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.
有关使用LESS构建媒体查询的进一步讨论，它们都在一起，并且不分散在整个代码中，请参阅此问题。
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.
这篇关于的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
