如何在Sass中編寫具有多個css屬性的變量

Question

我是Sass的學習者，想要在瀏覽器兼容性中包含25px的邊框半徑但出現錯誤。任何幫助，將不勝感激。

$red: #F00; 
 

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

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

Answer 1

嘗試使用混入。下面是來自Mixin section一個例子：

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

您可以使用此像這樣：

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

Answer 2

可以也H5定義一個類，並使用這個類：

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

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