Conversion CSS simple à moins

Question

Quelle serait la meilleure façon d'écrire ce vieux CSS en utilisant moins?

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

Sur la base de ma compréhension, ce serait quelque chose comme:

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

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

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

Answer 1

Vous n'avez pas besoin d'imbriquer .paginationNav; comme un mixin à l'intérieur de vos autres divs. Tom a raison, il semble que Top/Bottom devrait être ID, et pourrait même ne pas être nécessaire? J'imagine votre HTML pour ressembler à quelque chose comme ceci:

<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> 

Si tel est le cas, vous pouvez écrire ce que votre CSS:

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

au lieu d'avoir Top et des styles spécifiques Bas.

en moins, vous pouvez imbriquer le code comme ceci:

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

Answer 2

La réponse est simple

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

mais c'est ce que tu fais un mauvais service. Il semble que vous utilisiez des classes pour ce qui devrait être des ID. Si je lis correctement votre code, vous voulez probablement décomposer les propriétés partagées en classes, puis utiliser les ID (#paginationContainerTop au lieu de .paginationContainerTop) pour les propriétés spécifiques aux éléments individuels. Cependant, dans ce cas, vous spécifiez une propriété (largeur: 100%) qui est la valeur par défaut à moins qu'il hérite quelque chose que vous avez changé, de sorte que le CSS peut encore être parés à:

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

Notez également que je Vous avez supprimé la qualification .paginationContainerTop/Bottom de vos styles .paginationNav: à moins que vous ayez besoin de surcharger quelque chose ou que cela crée un conflit, il n'est pas nécessaire de spécifier une chaîne d'héritage.

Answer 3

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

je viens d'utiliser cet outil pour convertir votre css à moins: http://beautifytools.com/css-to-less-converter.php espérons que cette aide :)