Converting plain old CSS to 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;
}

All css is valid less, so you could say there is no need to change anything. — mcfedr
– mcfedr, Commented Dec 26, 2015 at 8:59

Sedat Kapanoglu · Accepted Answer · 2012-11-08 18:15:05Z

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

Tom · Accepted Answer · 2011-03-08 14:26:30Z

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.

seven-phases-max · Accepted Answer · 2015-12-26 09:16:50Z

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

i just used this tool to convert your css to less: http://beautifytools.com/css-to-less-converter.php hope this helps :)

edited Dec 26, 2015 at 9:16

seven-phases-max

11.9k1 gold badge47 silver badges58 bronze badges

answered Dec 25, 2015 at 19:23

khaven

12 bronze badges

Collectives™ on Stack Overflow

Converting plain old CSS to Less

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related