如何在 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;
	border-radius: $border-radius;
	background: $red;
}

Answer 1

尝试使用mixin。这是Mixin 部分的一个示例：

@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;
  @extend .borderClass
}