0

I decided to use SCSS to build a set of helpful mixins (think it will get more popular than LESS over time). What I'm trying to achieve is to pass a set of keywords in random order as Mixin argument, then check which keywords have been passed.

Below is an example with some pseudocode:

@mixin text($args){
  // pseudocode:
  args->sm {font-size: 10px;}
  args->md {font-size: 16px;}
  args->lg {font-size: 24px;}
  args->red {color: red;}
  args->green {color: green;}
  args->blue {color: blue;}
  args->bold {font-weight: bold;}
}

.mytext {
  @include text(red,sm,bold);
}

Any idea? Simpler solution is better :)

Dariusz Sikorski
  • 4,309
  • 5
  • 27
  • 44
  • Why in a random order? This would be easier if you always had a set order to the function, which is normal. – CaribouCode Feb 23 '15 at 21:13
  • It's inspired by setting values for css parameters, which sometimes can be defined in a random order too. Example: border: solid 10px red; works the same as border: solid red 10px. Ordered solution may be fine too if mixin gets too complicated with random option. – Dariusz Sikorski Feb 23 '15 at 21:20
  • 2
    Actually the spec does define a correct order for CSS shorthand properties, however browsers are often forgiving for lazy/slightly incorrect code. I would argue that people should code to spec as much as possible. With regards to your mixins, this would mean using a set order. Try not to over-engineer solutions. – CaribouCode Feb 23 '15 at 21:29

0 Answers0