Duplicating CSS rules in less

Question

I have something like this in me .less file

.form-section {

.special-check {
    width: 100%;
    display: block;
    .ui-selectmenu-button();
    width: auto;
    overflow: hidden;
}

which will ofc. generate .form-section .special-check and I want to have something like this .form-section .special-check, .something but I don't know how to do it in less. ofc i could just copy and pase rules for .something but that's not good solution. Do you know how to do it?

Thank you very much for your time.

Fabrizio Calderan · Accepted Answer · 2014-12-05T16:57:31.643

2

No need to duplicate the rules:

.something {
  width: 100%;
  display: block;
  overflow: hidden;
}   

.form-section {
   .special-check:extend(.something){};
}

or also

.form-section {
   .special-check {
      width: 100%;
      display: block;
      overflow: hidden;
   }
}

.something:extend(.form-section .special-check){};

The result is the same, it only depends on who is extending who

Compiled output

.form-section .special-check,
.something {
  width: 100%;
  display: block;
  overflow: hidden;
}

Further reference: http://lesscss.org/features/#extend-feature-extending-nested-selectors

edited Dec 05 '14 at 16:57

answered Dec 05 '14 at 16:43

Fabrizio Calderan

120,726
26
164
177

yea but you have duplicated rules here. I want to have these rules only once like this .form-section .special-check, .something – user13746 Dec 05 '14 at 16:50
oh right, see my update – Fabrizio Calderan Dec 05 '14 at 16:50

score -1 · Answer 2 · answered Dec 05 '14 at 16:43

-1

alternatively

.form-special {
   width: 100%;
   display: block;
   .ui-selectmenu-button();
   width: auto;
   overflow: hidden;
}

.form-section { .special-check { .form-special; }}
.something { .form-special; }

answered Dec 05 '14 at 16:43

David Nguyen

8,368
2
33
49

Duplicating CSS rules in less

2 Answers2