Sass Mixin for border-radius

What is SASS?

When we develop web applications, we know that the number of style sheet increases, lines of css may be of ten thousands. It becomes more complex as we go ahead, so difficult to maintain. In this scenario, css pre-processors comes into role. Sass lets us to use features that don’t exist in CSS yet like variables, nesting, mixins, inheritance etc… In this article we will see how to use Sass mixin for border radius. The way of writing SASS is similar to the normal css.

SASS Mixin for border-radius

As all of who know css3, the border radius property is added in the following way.

.border-radius {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

The vender pre-fix like ‘-webkit’, ‘-moz’ etc are added for browser compatibility. If we are not using the vendor pre-fix, the border-radius will not work in properly on different version of browsers. When we add border radius for multiple elements, with different border-radius values, the number of lines will increase, number X 4. For eg. 5 elements with border radius, with different values will be 5 X 4 = 20 lines.

Here comes SASS mixin with the magic. Let us see the SASS mixin code and the details

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

A mixin is createdd using ‘@mixin’, we add a name for the sass mixin ; ‘border-radius’ and add variable named $radius inside the parenthesis. When we use the border radius mixin, we can pass the value of whatever we want.

The use of SASS mixin in our css code

Following is the example for mixin usage in our css.

.my-div { @include border-radius(5px); }

The generated css will be the following.

.my-div {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
}

Easy? Here we have used same radius value for all the sides. In case if we want to use different values for the radius? Let us see how to add sass mixin for different radius values.

SASS mixin for different radius values.

Following is the way to add sass mixin in your css with different values…

.my-div { @include border-radius(5px 5px 10px 10px); }

So the output will be:

.box {
  -webkit-border-radius: 5px 5px 10px 10px;
  -moz-border-radius: 5px 5px 10px 10px;
  -ms-border-radius: 5px 5px 10px 10px;
  border-radius: 5px 5px 10px 10px;
}

If you want to add single side border radius properties using sass mixin, following code can be used

@mixin border-top-radius($radius) {
  -webkit-border-top-right-radius: $radius;
  border-top-right-radius: $radius;
   -webkit-border-top-left-radius: $radius;
   border-top-left-radius: $radius;
   background-clip: padding-box;
}
@mixin border-right-radius($radius) {
  -webkit-border-bottom-right-radius: $radius;
  border-bottom-right-radius: $radius;
     -webkit-border-top-right-radius: $radius;
     border-top-right-radius: $radius;
     background-clip: padding-box;
}
@mixin border-bottom-radius($radius) {
  -webkit-border-bottom-right-radius: $radius;
  border-bottom-right-radius: $radius;
   -webkit-border-bottom-left-radius: $radius;
   border-bottom-left-radius: $radius;
   background-clip: padding-box;
}
@mixin border-left-radius($radius) {
  -webkit-border-bottom-left-radius: $radius;
  border-bottom-left-radius: $radius;
     -webkit-border-top-left-radius: $radius;
     border-top-left-radius: $radius;
     background-clip: padding-box;
}

Looks good? Let start learning SASS…