How to write variable with multiple css properties in Sass

Question

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;
}

Crew

Answer 1

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;
}

Vocalism

Answer 2

You can also define one class and use that class in h5:

.borderClass{
   -webkit-border-radius:25px; 
   -moz-border-radius:25px; 
   border-radius:25px;
 }

h5 {
  font-size: 12px;
  padding: 20px;
  background: $red;
  @extend .borderClass
}

Thetis

Answer 3

You can use alternate approach -

@import compass

$yellow: #e09e00
$red: #dc3e39
$green: #379067
$blue: #00a6eb
$purple: #8766ab

$colors: yellow $yellow, red $red, green $green, blue $blue, purple $purple

@each $color in $colors
  section.interview.#{nth($color, 1)}
    padding: 20px
    background: #{nth($color, 2)}
    h2, p
      color: #fff

Waxplant