-1

Why doesn't this work:

@mixin link($props) {
  &:link,
  &:visited { $props };
}

I keep getting this error:

Invalid CSS after "...sited { $props ": expected ":", was "};"

0

1 Answer 1

0

The syntax is a bit off is a couple of places, try something like:

@mixin link ($props) {
 &:hover,
 &:visited { color: $props; }
}

Where the 'color' could be any css rule. I feel that this article has a few good sass mixin examples for reference: http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/

5
  • What if I want to do more than just color? Like... @include link(color: #fff; background: #000;);
    – ha404
    Oct 6, 2014 at 23:25
  • @mixin link ($color, $bgcolor) { &:hover, &:visited { color: $props; background: $bgcolor} } Oct 7, 2014 at 4:02
  • What if I wanted to do way more than that without having to specify more vars? @include link(display: block; width: 100px; height: 100px; color: #fff; background: url(awesome.jpg) no-repeat 0 0 / contain;); I think it would be way more flexible if a mixin could do this.
    – ha404
    Oct 7, 2014 at 21:56
  • yup, all that. You can do it. Again, check out that link I posted above for reference. Oct 8, 2014 at 3:22
  • Actually, looking at the duplicate question from cimmanon above led me to use @content instead of using the parameter $props. It's like using arguments in javascript instead of params: @mixin link { &:link, &:visited { @content }; }
    – ha404
    Oct 8, 2014 at 16:55

Not the answer you're looking for? Browse other questions tagged or ask your own question.