Tutorial by Examples

The following Less: .paragraph{ font-size: 12px; color: blue; background: white; } .parent{ font-size: 14px; color: black; background: green; .nestedParagraph:extend(.paragraph){ } } will compile into the following css: .paragraph, .parent .nestedParagraph { ...

The following Less .paragraph{ font-size: 12px; color: darkgrey; background: white; } .special-paragraph{ font-size: 24px; font-weight: bold; color: black; } .parent{ background: lightgrey; .nestedParagraph{ &:extend(.paragraph); &:extend(.special-p...

You may also extend nested selectors. The below Less .otherChild{ color: blue; } .otherParent{ color: red; .otherChild{ font-size: 12px; color: green; } } .parent{ .nestedParagraph{ &:extend(.otherParent .otherChild); } } Will compile to .otherChild...

The following Less div.paragraph{ color: blue; } *.paragraph{ color: green; } .otherClass.paragraph{ color: red; } .paragraph.otherClass{ color: darkgrey; } .parent{ .nestedParagraph{ &:extend(.paragraph); } } Will compile into div.paragraph { colo...

The following Less .addDivider::before{ content: ""; height: 80%; background: white; width: 1px; position: absolute; top: 10%; left: 0; } .nav-bar{ background: black; display: flex; flex-direction: row; width: 400px; .nav-item{ color: white...