Search code examples
csssassmixins

Writing a SCSS mixin for a custom border

I waqs wondering if I could use a mixin for custom borders. All borders on my website will be solid, so I can leaven that in place, but all the other values can vary. That means, the place (here falsy called 'direction') i.e. left, right, top or bottom, the size in pixels of the border and its colour. I tried the following but Prepros throws an error Invalid CSS after " border-": expected "{", was "$direction: $si...".

@mixin border($direction,$size,$colour) {
  border-$direction: $size solid $colour;
}
Solution

  • You just have to use variable interpolation. Example: 

    @mixin border($direction,$size,$colour) {
  border-#{$direction}: $size solid $colour;
}

    Example on SassMeister: http://sassmeister.com/gist/b5119d77bae5582a0cc5

    The key is adding #{ and } around the border direction to get it expanded.