将普通旧CSS转换为Less

使用LESS编写旧CSS的最佳方式是什么？将普通旧CSS转换为Less

.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; 
}

来源

2011-03-08 keruilin

所有的CSS是有效的少，所以你可以说没有必要改变任何东西。 – mcfedr 2015-12-26 08:59:50

您不需要嵌套.paginationNav;作为你的其他divs中的混合。

汤姆是对的，它似乎顶部/底部应该是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;}

，而不是具有顶部和底部的具体样式。

在更短的，你可以窝这样的代码：

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

来源

2011-03-09 03:29:01

简单的答案是

.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限定条件：除非您需要重写某些内容，否则会产生冲突，因此不需要指定继承链。

来源

2011-03-08 14:26:30 Tom

.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-25 19:23:34 khaven

将普通旧CSS转换为Less

回答

相关问题