目前,我使用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及以下版本无论如何都可以获得全尺寸无媒体查询样式表.代码段: …
假设有一个像这样的声明(它实际上是Bootstrap):
@media screen and (min-width: 768px) {
.navbar {
padding-top: 0;
}
}
是否可以像访问其他类或mixin一样访问此媒体查询中的.navbar(它还有一个声明在它之外)？我想在其他地方重新使用它的声明(好吧,不完全是这个,但你明白了:-)),例如:
.left-nav {
.navbar; // Use the one from the media query here.
}
LESS可以实现吗？
我已经看到了一个非常相似的问题,虽然这里的区别在于我不能重构
.navbar在媒体查询之外,因为这是在Bootstrap的LESS文件中.我理解帽子LESS并不关心媒体查询,因为它们只是另一种选择器; 但是如何在这些选择器中访问声明(我尝试了一些明显的但没有奏效).
任何帮助,将不胜感激.
我正在尝试LESS(不是SASS语法的粉丝)并且一直试图找出用它进行媒体查询的最佳方法.
我通过这篇博文了解了如何用LESS"做"媒体查询,但它指出了这一事实,这会导致所有媒体查询在生成的CSS中分离和分散.这并没有真正打扰我(我可以不关心结果,更多关心它的工作).困扰我的是一条评论,该评论在从iOS设备查看时讨论了问题,而评论者发现,一旦整合了媒体查询,问题就解决了.
有没有人找到使用LESS媒体查询的好解决方案？
我开始这种工作的方式就像......
//Have an overall structure...
.overall(){
//Have ALL your CSS that would be modified by media queries and heavily use
//variables that are set inside of each media queries.
}
@media only screen and (min-width: 1024px){
//Define variables for this media query (widths/etc)
.overall
}
我知道这可能存在一些问题,但目前的设置似乎并没有那么有用.
所以我想我的问题是,是否有任何好的解决方案/黑客允许分组媒体查询？
(只是因为我使用无点作为解析我的.less文件的引擎)
使用LESS的Mixins非常简单:
.some-rules() {
/* some rules */
}
.some-class {
.some-rules;
}
但是,假设我在媒体查询中有一个规则集,例如:
@media (min-width: 800px) {
.my_ruleset {
/* more rules */
}
}
如何将这样的规则集包含在mixin中？
我的动机是我使用Bootstrap.我试图避免使用其选择器在语义上污染我的标记,而宁愿将其规则集合作为mixins.鉴于上面的第一个例子,这很简单,但我不确定如何合并@media选择器.
编辑
具体而言,这里是代码的总结我试图使用作为一个mixin:
.container {
.container-fixed();
}
// ...
@media (min-width: @screen-sm) {
.container {
max-width: @container-sm;
}
// ...
}
@media (min-width: @screen-md) {
.container {
max-width: @container-md;
}
// ...
}
@media (min-width: @screen-lg-min) {
.container {
max-width: @container-lg;
}
// ...
}