Less 将普通的旧CSS转换为更少的CSS

用更少的资源编写这个旧CSS的最佳方法是什么

.paginationContainerTop {width:100%; margin-bottom:10px;}
.paginationContainerTop .paginationNav {float:right; text-align:right;}

.paginationContainerBottom {width:100%; margin-top:10px;}
.paginationContainerBottom .paginationNav {float:right; text-align:right;}

根据我的理解，应该是这样的：

.paginationNav {
    float: right; 
    text-align: right;
}

.paginationContainerTop { 
    margin-bottom: 10px;
    .paginationNav;
}

.paginationContainerBottom { 
    margin-top: 10px;
    .paginationNav;
}

简单的答案是

.paginationContainerTop, .paginationContainerBottom {width:100%;}
.paginationNav {float:right; text-align:right;}
.paginationContainerTop {margin-bottom:10px;}
.paginationContainerBottom {margin-top:10px;}

但这对你不利。看起来您正在使用类来表示应该是ID的内容。如果我正确阅读了您的代码，您可能希望将共享属性拆分为类，然后对特定于单个元素的属性使用ID（#paginationContainerTop而不是.paginationContainerTop）。但是，在本例中，您指定的属性（宽度：100%）是默认属性，除非它继承了您所更改的内容，因此CSS可以进一步修剪为：

.paginationNav {float:right; text-align:right;}
.paginationContainerTop {margin-bottom:10px;}
.paginationContainerBottom {margin-top:10px;}

---

还请注意，我已从.paginationNav样式中删除了.paginationContainerTop/Bottom限定：除非您需要重写某些内容或这将产生冲突，否则无需指定继承链。

您不需要嵌套.paginationNav；作为你其他部门的混血儿

Tom是对的，似乎顶部/底部应该是ID，甚至可能没有必要？我想象你的HTML是这样的：

<div id="header">
     <div id="paginationNavTop">
          <div id="paginationNav">[nav stuff]</div
     </div>
</div>

[body stuff]

<div id="footer">
     <div id="paginationNavBottom">
          <div id="paginationNav">[nav stuff styled differently]</div
     </div>
</div>

  .paginationNav {float: right; text-align: right;}
  #header {
     .paginationNav {margin-bottom: 10px;}
  }
  #footer {
      .paginationNav {margin-top: 10px;}
  }

而不是有顶部和底部特定的样式

在LESS中，您可以像这样嵌套代码：

<div id="header">
     <div id="paginationNavTop">
          <div id="paginationNav">[nav stuff]</div
     </div>
</div>

[body stuff]

<div id="footer">
     <div id="paginationNavBottom">
          <div id="paginationNav">[nav stuff styled differently]</div
     </div>
</div>

  .paginationNav {float: right; text-align: right;}
  #header {
     .paginationNav {margin-bottom: 10px;}
  }
  #footer {
      .paginationNav {margin-top: 10px;}
  }

我刚刚使用此工具将css转换为更少：

---

希望这有帮助：）

所有css都是无效的，因此您可以说没有必要更改任何内容。