如何在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
}

Answer 3

您可以使用替代方法 -

    $deviceMediaBreakpoints: (
      phone: 599px,
      tabPortrait: 600px,
      tabLandscape: 900px,
      desktop: 1200px,
      projector: 1800px,
    );

    :export {
      deviceMediaBreakpoints: $deviceMediaBreakpoints,
    }