目前,我使用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及以下版本无论如何都可以获得全尺寸无媒体查询样式表.代码段: …
我正在尝试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文件的引擎)
我正在使用Bootstrap和LESS进行响应式网页设计.
我过去喜欢LESS的原因之一是因为它可以将HTML元素的所有属性保存在一起.
我在下面的内容是定义.sponsors块的一些规则,然后当视口> = 768px时应用于该块内的元素的一个规则
我不喜欢这条规则如何需要大量额外的代码,以及该规则与其他规则的区别.这也感觉不对.
有什么更好的方法/组织这个？我是否需要将所有内容分解为顶级@media组？
.sponsors
{
li
{
.thumbnail
{
padding-top:20px;
padding-bottom:15px;
img
{
display:block;
margin:0 auto;
}
}
}
}
@media (min-width: 768px)
{
.sponsors
{
li
{
.thumbnail
{
padding-bottom:0px!important;
}
}
}
}
如果有类似的东西,那将是非常甜蜜的:
.thumbnail
{
&[@mediaWidth >=768]
{
padding-bottom:0px!important;
}
}