Convert Less Nested CSS to Standard CSS

LESS CSS nesting classes

The & character has the function of a this keyword, actually (a thing I did not know at the moment of writing the answer). It is possible to write:

.class1 {
    &.class2 {}
}

and the CSS that will be generated will look like this:

.class1.class2 {}

For the record, @grobitto was the first to post this piece of information.

---

[ORIGINAL ANSWER]

LESS doesn't work this way.

.class1.class2 {} - defines two classes on the same DOM node, but

.class1 {
    .class2 {}
}

defines nested nodes. .class2 will only be applied if it is a child of a node with the class class1.

I've been confused with this too and my conclusion is that LESS needs a this keyword :).

Less css nesting?

The below is the most (to my knowledge) that you could re-factor or reduce this code and make it part of the same nested structure.

Basically, all that I have done is group all selectors which have similar properties/rulesets and similar selector hierarchy together. For selectors where the properties/rulesets are same but the hierarchy is a bit different, we could use the :extend feature. The advantage is that when you make any change to the list of properties (or rulesets) used by the base, the list of properties assigned to the selector which is extending the base will also be updated and thereby avoid the need to overwrite in all places.

Possible drawback is that in future if you want to assign different property list for them then you have to rework the structure. So, choose the grouping or use of extend accordingly.

.edit-qa-table{
    thead {
        tr, tbody tr{
            th:first-child + th{
                text-align: center;
            }
        }
        .thead-append{
            &:first-child{
                + th + th{
                    min-width: 130px;
                }
            }
            th:first-child{
                width: 45%;
            }
        }
    }
    tbody tr td{
        vertical-align: middle;
    }
    > tbody > tr > td:first-child + td:extend(.edit-qa-table thead tr th:first-child + th){};
}

What operator '&' before a less tag means and how I can convert to scss

div& .well

this means a div container with the class well

to convert to css:

.pri-expander-list-parameters-outer {
    margin-bottom: 10px;
}

.pri-expander-list-parameters-outer .well {
    padding: 0 10px;
}

Is there a way to nest CSS selectors?

With the current CSS (2.1) version, nesting selectors isn't possible.

You'll have to use something called a CSS preprocessor which does several things, including allowing nested selectors.

I'd recommend SASS (SCSS), and another out there is LESS. You'll need some extra things setup on your PC/Mac for automatically converting preprocessor files to regular CSS files - plenty of other questions and research points on that out there.

If you use SCSS, you can check out what its like on SassMeister so you can see what the nested selectors will look like compiled.

---

Related Topics