Rajesh B Rajesh B - 3 months ago 9
Sass (Sass) Question

How to write variable with multiple css properties in Sass

I'm learner of Sass, and want to include border radius of 25px with browser compatibility but getting error. Any help would be appreciated.



$red: #F00;

$border-radius:
-webkit-border-radius:25px;
-moz-border-radius:25px;
border-radius:25px;

h5 {
font-size: 12px;
padding: 20px;
border-radius: $border-radius;
background: $red;
}




Answer

Try using a mixin. Here's an example from the Mixin section:

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

You can use this like so:

h5 {
    @include border-radius(25px);
    font-size: 12px;
    padding: 20px;
    background: $red;
}