Question

Firefox 31.0在使用sass mixin时不响应border-radius，但是当我明确添加border-radius：50％时，我得到了正确的结果。

@mixin vendor($property, $value, $vendors) {
  @each $vendor in $vendors {
    @if ($vendor == 'webkit') {
      -webkit-#{$property}: $value;
    }

    @if ($vendor == 'moz') {
      -moz-#{$property}: $value;
    }

    @if ($vendor == 'ms') {
      -ms-#{$property}: $value;
    }

    @if ($vendor == 'o') {
      -o-#{$property}: $value;
    }

    @if ($vendor == 'official') {
      $property: $value;
    }
  }
}

然后课程就像这样。

 .social-btn {
      width: 30px;
      height: 30px;
      @include vendor(border-radius, 50%, webkit moz o official);
      background: $color-primary;
      display: inline-block;
      color: $color-white;
      font-size: 1.429rem;
      line-height: 30px;
      text-align: center;
      &:hover, &:focus {
        background: $color-green;
        color: $color-white;
      }
    }

我找不到任何错误。

修改

Firefox输出看起来像这样

.organiser-profile .company-info .social-btn {
  width: 30px;
  height: 30px;
  background: none repeat scroll 0% 0% #242830;
  display: inline-block;
  color: #FFF;
  font-size: 1.429rem;
  line-height: 30px;
  text-align: center;
}

Chrome输出

.organiser-profile .company-info .social-btn {
  width: 30px;
  height: 30px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  background: #242830;
  display: inline-block;
  color: white;
  font-size: 1.429rem;
  line-height: 30px;
  text-align: center;
}

Answer 1

问题就在这里：

@if ($vendor == 'official') {
  $property: $value;
}

您所做的只是将$property设置为$value传入的任何内容。你需要使用插值：

@if ($vendor == 'official') {
  #{$property}: $value;
}

Firefox没有回应mixin

1 个答案: