spl*_*ter 11 css sass less media-queries
目前,我使用LESS作为我的主要CSS预处理器.我(我相信很多人都有这个需要)在@media查询中定义变量,如:
@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中不起作用,因为编译性质(@myVar仅在每个特定范围内定义@media,但不是全局定义).即使我@myVar在媒体查询之前全局定义,它也不会根据媒体查询进行更新,.myElement无论如何都会获得初始值.
所以,问题是,是否有可能在任何其他CSS预处理器中实现这一点,或者我们注定要覆盖.myElement每个媒体查询中的内容？这个最简单的例子不是问题,但在实际项目中,这可以节省大量时间和复制/粘贴.
编辑: 不是解决方案,而是我的特定项目的解决方法:
<html>为基本字体大小myVar定义LESS变量rem而不是px基本字体大小的衍生@media查询调整不同媒体的基本字体大小.rem(http://caniuse.com/#search=rem).这在IE 8及更低版本中不起作用,但不是因为缺乏支持rem- 它不支持媒体查询.所以IE8及以下版本无论如何都可以获得全尺寸无媒体查询样式表.代码段:
@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,它将不同的字体大小元素与不同的测量块混合在一起.
轻松灵活地满足我的需求.希望对其他人有所帮助.
让我直接回答这个问题:
"是否有可能在任何其他CSS预处理器中实现这一点,或者我们注定要覆盖
.myElement每个媒体查询中的内容？"
答案实际上存在于这个问题中.因为LESS(和其他类似工具)是"预处理器" @media,所以在编译时没有任何意义,因为它没有查看浏览器的媒体状态以进行预处理.该@media州是唯一相关的后预处理,此时任何@someVariable已计算.这就是为什么你要做的事情无法奏效.您@myVar只能在CSS样式表中作为单个值输出,并且该输出在评估浏览器状态之前发生@media.
因此,它与媒体查询的"全局"或"本地"范围无关,而是LESS利用变量将代码编译为CSS的事实,而且是关注的是CSS(不是LESS).@media查询信息.
有关使用LESS构建媒体查询的一些进一步讨论,它们全部在一起而不是分散在整个代码中,请参阅此问题.
小智 5
您可以将媒体查询重构为变量,然后在元素中使用它们.
例:
@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; }
}
哪个产生:
@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;
}
}
整体使媒体查询嵌入变量的未解析的文字并不完全漂亮,但也有助于标准化媒体查询.
它有助于可读性,因为所有的三种行为的.myElement都包含在一个定义并没有改变别的地方(可能是一个完全不同的文件)进行"调试"硬.
关于什么:
@media screen and (max-width: 479px) {
.myElement(10px);
}
@media screen and (min-width: 768px) {
.myElement(30px);
}
.myElement(@myVar) {
.myElement {
padding: @myVar;
}
}