Less 将此CSS转换为更少的CSS_Less

Less 将此CSS转换为更少的CSS

less

Less 将此CSS转换为更少的CSS,less,Less,我有下面的CSS代码，我想把它转换成更少的 .navbar-nav, .navbar-nav > li, .navbar-nav > li > a { height: 100% !important; } 以下是HTML： <ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a></li&g

我有下面的CSS代码，我想把它转换成更少的

.navbar-nav,
.navbar-nav > li,
.navbar-nav > li > a {
    height: 100% !important;
}

以下是HTML：

<ul class="nav navbar-nav">
                        <li class="active"><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li class="dropdown">

                        </li>
                    </ul>

将CSS转换为LESS的正确或最佳方法是什么？

我建议Lessify:。只要输入你的CSS，就可以得到更少

您也可以查看此网站管理员线程：。

我建议Lessify:。只要输入你的CSS，就可以得到更少

您还可以查看此网站管理员线程：。

选项1-原样你可以一直保持原样。有效的CSS也是有效的更少

选项2-带扩展的父嵌套使用

extend

的嵌套较少语法生成相同的代码：

.navbar-nav {
  height: 100% !important;
  > li {
    &:extend(.navbar-nav);
    > a {
      &:extend(.navbar-nav);      
    }
  }
}

如果
.navbar nav
具有与之相关的其他属性，则这可能会产生不必要的副作用，因为所有这些属性也将被带入嵌套元素

选项3-与选项2类似，但避免使用其他属性这个的输出实际上是这个CSS：

* > .navbar-nav,
.navbar-nav > li,
.navbar-nav > li > a {
  height: 100% !important;
}

但是

*>.navbar nav

将匹配所有与

相同的元素。navbar nav

将匹配所有相同的元素，并且至少这允许您将三个元素组合在一起，而不会在

li

和

元素上设置不需要的属性，这些元素可能也需要在

.navbar nav

元素中进行设置（如果存在问题）

选项4-伪造类别设置假类名还允许您在

.navbar nav

中保留单独的属性，但会生成一些额外的、未使用的css：

.setHeight {
  height: 100% !important; 
}

.navbar-nav {
  &:extend(.setHeight);
  > li {
    &:extend(.setHeight);
    > a {
      &:extend(.setHeight);      
    }
  }
}

CSS输出如下：

.setHeight,
.navbar-nav,
.navbar-nav > li,
.navbar-nav > li > a {
  height: 100% !important;
}

（未来）选项5-与选项4类似，但没有虚假类别将来（在本文撰写时，LESS的当前版本是1.5.1），LESS可能支持扩展纯混合，在这种情况下，类似的操作将起作用，从而不会生成伪造的类名：

.setHeight() {
  height: 100% !important; 
}

.navbar-nav {
  &:extend(.setHeight);
  > li {
    &:extend(.setHeight);
    > a {
      &:extend(.setHeight);      
    }
  }
}

结论什么是“最好的”纯粹是其他因素的问题，只有您可以为您的项目确定。在许多情况下，最好是保持代码原样（选项1），但根据LESS结构和CSS属性布局的其余部分，可能有理由使用另一个选项。