Rajesh B Rajesh B - 1 year ago 96
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 Source

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;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download