Converting plain old CSS to Less - less

Question

What would be the best way to write this old CSS using 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;}
Based on my understanding, it would be something like:
.paginationNav {
float: right;
text-align: right;
}
.paginationContainerTop {
margin-bottom: 10px;
.paginationNav;
}
.paginationContainerBottom {
margin-top: 10px;
.paginationNav;
}

Answer 1

You don't need to nest .paginationNav; as a mixin inside your other divs.
Tom is right, it seems Top/Bottom should be IDs, and might not even be necessary? I'm imagining your HTML to look something like this:
<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>
If that's the case, you could write this as your CSS:
.paginationNav {float: right; text-align: right;}
#header .paginationNav {margin-bottom: 10px;}
#footer .paginationNav {margin-top: 10px;}
instead of having Top and Bottom specific styles.
In LESS, you could nest the code like this:
.paginationNav {float: right; text-align: right;}
#header {
.paginationNav {margin-bottom: 10px;}
}
#footer {
.paginationNav {margin-top: 10px;}
}

Answer 2

The simple answer is
.paginationContainerTop, .paginationContainerBottom {width:100%;}
.paginationNav {float:right; text-align:right;}
.paginationContainerTop {margin-bottom:10px;}
.paginationContainerBottom {margin-top:10px;}
but that's doing you a disservice. It looks like you're using classes for what should be IDs. If I'm reading your code correctly, you probably want to break the shared properties out into classes and then use IDs (#paginationContainerTop instead of .paginationContainerTop) for the properties that are specific to individual elements. However, in this case you're specifying a property (width: 100%) that is the default unless it inherits something you've changed, so the CSS can be further trimmed to:
.paginationNav {float:right; text-align:right;}
.paginationContainerTop {margin-bottom:10px;}
.paginationContainerBottom {margin-top:10px;}
Also note that I've taken away the .paginationContainerTop/Bottom qualification from your .paginationNav styles: unless you need to override something or this will create a conflict, there's no need to specify an inheritance chain.

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;
}
}
i just used this tool to convert your css to less:
http://beautifytools.com/css-to-less-converter.php
hope this helps :)