CODEWITHSUNDEEP
csssass
user4255025
user4255025

Reputation:

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

Upvotes: 11

Views: 12460

Answers (3)

Amar Wavare
Amar Wavare

Reputation: 1

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

Upvotes: 0

Sandip - Frontend Developer
Sandip - Frontend Developer

Reputation: 14689

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
}

Upvotes: 9

Karin
Karin

Reputation: 8610

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

Upvotes: 17

Related Questions