Search code examples
sassmixins

SASS Mixin for all borders?

I'm currently working on a site for one of our clients and the design includes a lot of dotted borders. The CSS for these always takes the form of:

border-direction: 1px dotted $bdrColor;

where direction is top, right, bottom or top. As this border is used so frequently throughout the site I thought it would be cool to create a mixin for this which could be referenced when required with me just passing in the direction I wish the border to go. Something along the lines of:

@mixin dotted-border($direction){
border-$direction: 1px dotted $articleSubContentBdrColor; 
}

However my concatenation of my $direction variable is incorrect and the SASS doesnt compile. Is this even possible as I have noticed that Compass have SASS mixins for each direction with their border-radius mixins.

Any help gratefully received.

Solution

  • try this

    @mixin dotted-border($direction,$articleSubContentBdrColor){
   border-#{$direction}: 1px dotted $articleSubContentBdrColor; 
}

    Example

    body{
   @include dotted-border(right, black);
}