-1

How can I mixin a style that doesn't begin with a class or ID into another style?

[class*='col-'] {
 float: left;
 padding-right: 20px;
 @media @medium{
 padding-right: 0px;
 }
}

.col-2-3 {
 width: 66.66%;
 [class*='col-']  
}
Harry
  • 87,580
  • 25
  • 202
  • 214
Michael Fitzgerald
  • 37
  • 7

2 Answers2

1

It seems like there is no way to call such a mixin (one where there is only a attribute selectors without a preceding class or id selector) even in the latest version of the compiler. The below statement found in the Less website seems to imply that only those with class or id selectors are considered mixins.

You can mix-in class selectors and id selectors, e.g.

So, your best bet would be to use the extend function which seems to work fine.

The below Less code which uses the extend feature

[class*='col-'] {
  float: left;
  padding-right: 20px;
  @media (min-width: 20px){
    padding-right: 0px;
  }
}

.col-2-3 {
  width: 66.66%;
  &:extend([class*='col-']);
}

produces the following output when compiled.

[class*='col-'],
.col-2-3 {
  float: left;
  padding-right: 20px;
}
@media (min-width: 20px) {
  [class*='col-'],
  .col-2-3 {
    padding-right: 0px;
  }
}
.col-2-3 {
  width: 66.66%;
}

Using extend is also more advantageous because it groups selectors and shortens the code.

If for whatever reasons you don't wish to use the extend feature and limit yourself to only a mixin call then the only option is to write the common rules into a separate mixin (like in below snippet) and call it at both places.

.common-props(){
  float: left;
  padding-right: 20px;
  @media (min-width: 20px){
    padding-right: 0px;
  }
}
[class*='col-'] {
  .common-props();
}

.col-2-3 {
  width: 66.66%;
  .common-props();
}

Putting the common props within a mixin with parentheses would make sure that the mixin itself is not output in the compiled CSS.

Harry
  • 87,580
  • 25
  • 202
  • 214
  • "This, in my opinion is a very valid feature request." - there're were a few, but no, it's barely ever accepted (there're strong objections: 1. ambiguous syntax 2. no real need (to resuse existing CSS rulesets one always use `extend`). Personally I even never name "CSS ruleset" as "a mixin" and always recommend to avoid using one as another (this is just a legacy feature with a lot of pitfalls). – seven-phases-max Nov 08 '15 at 08:02
  • Hmm, if there have already been discussions around it then no point in raising another one. I just thought that since you could call the other selectors, you should be able to call this also. And I think the root cause is that what constitutes a mixin and what is just a CSS ruleset is rather ambiguous. Either only those with parentheses should be considered mixins (or) all CSS rulesets should also be mixins by default. Making just class and id selectors look as though they are mixins doesn't really make it easy to understand. – Harry Nov 08 '15 at 08:07
  • 1
    "Either only those with parentheses should be considered mixins" - Well, yes, ideally I wouild like to see this reflected in the documentation - indeed, the documetation introducing mixins as plain class and id rulesets is very unfortunate today (pushing the wrong direction from the earlier steps). But this is just a legacy text - just one of those to be reworked eventually (some documentation sections went almost unchanged from the very first versions). But as a feature itself ("using class and id rulesets as mixins") it has of course to remain for backward compatibility. – seven-phases-max Nov 08 '15 at 08:24
  • Yeah, understand that point about backward compatibility @seven-phases-max. You are spot on. – Harry Nov 08 '15 at 08:47
-1

I think your only option is two wrap the [class*='col-] selector 'with a class' so that it can be mixed in.

.column {
  [class*='col-'] {
   float: left;
   padding-right: 20px;
   @media @medium{
     padding-right: 0px;
   }
  }
}

.col-2-3 {
 width: 66.66%;
 .column;
}
James Lawson
  • 8,150
  • 48
  • 47
  • 1
    I downvoted it only because it results in `.col-2-3 [class *= 'col-']` selector that obviously is not what meant in the Q (i.e. this code just won't really work). – seven-phases-max Nov 08 '15 at 08:30