1

使用 LESS 编写这个旧 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;
}
4

3 回答 3

2

你不需要嵌套 .paginationNav; 作为其他 div 中的 mixin。

汤姆是对的，似乎 Top/Bottom 应该是 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>

如果是这种情况，您可以将其编写为您的 CSS：

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

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

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

  .paginationNav {float: right; text-align: right;}
  #header {
     .paginationNav {margin-bottom: 10px;}
  }
  #footer {
      .paginationNav {margin-top: 10px;}
  }
于 2011-03-09T03:29:01.400 回答
0

简单的答案是

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

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

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

另请注意，我已从您的 .paginationNav 样式中删除了 .paginationContainerTop/Bottom 限定条件：除非您需要覆盖某些内容或这会产生冲突，否则无需指定继承链。

于 2011-03-08T14:26:30.930 回答
0 
.paginationContainerTop {
    width: 100%;
    margin-bottom: 10px;
    .paginationNav {
        float: right;
        text-align: right;
    }
}
.paginationContainerBottom {
    width: 100%;
    margin-top: 10px;
    .paginationNav {
        float: right;
        text-align: right;
    }
}

我只是使用此工具将您的 css 转换为更少： http ://beautifytools.com/css-to-less-converter.php 希望这会有所帮助:)

于 2015-12-25T19:23:34.213 回答