0

So, I'm using PureCSS for grids and decided to build a couple helper mixins to later on mix into my components. A particularly helpful one should in principle be something like this: 

.cols(@howmany:1, @of:12){
  .pure-u-@{howmany}-@{of};
}

but that's currently causing LESSCSS 1.7.5 to choke on "unrecognised input"

Am I stuck declaratively telling my classes to use .pure-u-5-24 instead of my slightly easier on the eyes version?

Carlos Vergara
  • 657
  • 6
  • 19
  • 1
    `.pure-u-@{howmany}-@{of};` - Well, no, you can't use interpolation to invoke mixins like this. So depending on your needs you'll have to rethink your approach (in particular it's not evident how in this case `.cols(5, 24);` is better than just `.pure-u-5-24;`). – seven-phases-max Nov 08 '14 at 09:23
  • 1
    Technically the most optimal mixin in this case would be something [like this](https://gist.github.com/seven-phases-max/fbb711a02918e370862f#file-26815367-less). – seven-phases-max Nov 08 '14 at 09:36
  • @seven-phases-max Familiarity mostly. I'm just more used to working with mixins in that fashion. Though the proposed solution works, too. I wish I could mark it as an answer somehow. – Carlos Vergara Nov 08 '14 at 15:09
  • Just out of curiosity, are there any historical reasons for this particular gotcha? I mean, it sounds like something that could be trivially solved by building a symbols table and then interpolating every single instance of those symbols until you essentially just can not find any of them any more, so I kind of guess there is a more important reason lingering somewhere. – Carlos Vergara Nov 08 '14 at 15:25
  • Well, technically it's possible (though it's not trivial as you may think, keywords: lazy loading + scope) the main reason I guess is just lack of worthy use-cases. Less is designed as minimalistic language with mostly use-case driven development so a feature is rarely added there "just because it can be added". In this particular case sooner or later you'll find that the whole approach of re-using existing CSS selectors from whatever CSS library to create your own styles is quite flawed and hackish in a long run (so in context of use-cases one always finds "better" method to achieve a goal). – seven-phases-max Nov 09 '14 at 00:26
  • That's too long story for a comment probably (in short, the key show-stopper for the approach is that those CSS selectors are always written for use in HTML *only* and when it comes to just a bit more complex cases than this one you most likely face the fact that you need just too complex code to hack that existing selector to fit into your styles properly when compared to generating equal stuff from scratch with your own mixins/snippets/building-blocks and/or with a dedicated library). – seven-phases-max Nov 09 '14 at 00:39
  • So in summary, there're much more important things to implement in Less (although there're ideas of allowing to use variables within `extend`, so at some point it will be possible to use `:extend(.pure-u-@{i}-@{n})`, but those don't have higher priority, yet again because thin is usually looks useful only when solving some very specific problems rather than providing a generic design-pattern for a structured development). – seven-phases-max Nov 09 '14 at 00:44

1 Answers1

1

Just reposting @seven-phases-max 's solution. What I specifically want done is better done like this:

.cols(@i, @n) {
  &:extend(.pure-u);
  width: (@i / @n * 100%);
}
seven-phases-max
  • 11,765
  • 1
  • 45
  • 57
Carlos Vergara
  • 657
  • 6
  • 19