我正在使用 Bootstrap 和 LESS 进行响应式网页设计。
我过去喜欢 LESS 的原因之一是它可以将 HTML 元素的所有属性保留在一起。
我下面有一些定义的规则.sponsors
块,然后是当视口 >= 768px 时应用于该块内的元素的一条规则
我不喜欢该规则需要大量额外代码,也不喜欢该规则与其他规则的区别。也感觉不对。
执行此操作/组织此操作的更好方法是什么?我是否需要首先将所有内容分解为顶层@media
groups?
.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;
}
}
我认为您可以嵌套媒体查询,LESS (>1.3.0) 会在编译期间将它们“冒泡”到样式表的根目录。
.sponsors
{
li
{
.thumbnail
{
padding-top:20px;
padding-bottom:15px;
@media (min-width: 768px) {
padding-bottom:0px!important;
}
img
{
display:block;
margin:0 auto;
}
}
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)