How to convert this css to less

Question

What method would you use to convert the following css into more dry less code:

nav ul,
nav ol,
ul.reset,
ol.reset {
    list-style: none;
    margin: 0;
    padding: 0;
}

Paul · Accepted Answer · 2012-06-12 01:41:15Z

2

Absolutely nothing. That CSS/LESS is great and there isn't a nicer/DRYer way to write it in LESS.

answered Jun 12, 2012 at 1:41

Paul

142k28 gold badges285 silver badges272 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:22:41Z

1

This is the best I could think of:

.resetList() {
    list-style: none;
    margin: 0;
    padding: 0;
}
nav {
    ul, ol {
        .resetList;
    }
}
ul, ol {
    &.reset {
        .resetList;
    }
}

However because of the way mixins work the above would compile to this:

nav ul,
nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.reset,
ol.reset {
  list-style: none;
  margin: 0;
  padding: 0;
}

So I would agree with @ascii-lime that pure CSS is probably the better route for something this simple. Hopefully less will provide an alternative in the future.

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Jun 12, 2012 at 18:16

Web_Designer

75.1k93 gold badges210 silver badges268 bronze badges

Comments

Aniket · Accepted Answer · 2012-06-12 05:34:44Z

0

It won't help much if you want to convert it into LESS. The code will instead become longer by using LESS techniques. It's better to keep it the way it is.

If you still wish to do this, you can try this:

nav {

    list-style: none;
    margin: 0;
    padding: 0;

    ul, ol {

        list-style: none;
        margin: 0;
        padding: 0;

        &.reset {

            list-style: none;
            margin: 0;
            padding: 0;

        }

    }

}

edited Jun 12, 2012 at 5:34

answered Jun 12, 2012 at 4:52

Aniket

9,7585 gold badges44 silver badges62 bronze badges

4 Comments

Sarin Jacob Sunny Over a year ago

It will work? Thanks for sharing your knowledge, first time I am seeing a css like this...

Aniket Over a year ago

@SarinJacobSunny Yeah. It will work. You can check out [LESS](lesscss.org). LESS is a stylesheet preprocessor. So you can play around with your stylesheet in a better manner :)

Sarin Jacob Sunny Over a year ago

I tried the following code in a html page, butnot working. can you help me to find error <style type="text/css"> table { margin: 0; padding: 0; border:1px double #FF0000; td { background:#3300FF; } } </style>

Web_Designer Over a year ago

That won't output the same css. your less requires all .reset classes to be children of a <nav> element to be styled, and your example is nothing close to being dry.

Collectives™ on Stack Overflow

How to convert this css to less

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related