将 `!important` 添加到 mixin答案

【问题标题】：Adding `!important` to a mixin将 `!important` 添加到 mixin
【发布时间】：2020-03-11 21:39:42
【问题描述】：

我想将 !important 添加到 mixin。我尝试了以下两种方法，它们都返回错误：

@include linear-gradient(hsl(68%, 94%, 90%), hsl(68%, 90%, 80%)); !important

@include linear-gradient(hsl(68%, 94%, 90%), hsl(68%, 90%, 80%)) !important;

有没有办法正确地做到这一点？

【问题讨论】：

标签： css sass

【解决方案1】：

在某些情况下，我使用一个名为$important 的可选参数，我可以将其传入true。

例子：

my-mixin($important: true);

它看起来像这样，带有一个辅助函数以避免重复我必须切换的属性important：

@function if-important($important){
  @return #{if($important, '!important', '')};
}

@mixin my-mixin($important: false) {
  border-radius: 0; //whatever
  border: 1px solid #ccc if-important($important);
  background-color: #fff if-important($important);
  color: #000 if-important($important);
}

【讨论】：

【解决方案2】：

!important 不能在 mixin 中使用。请参考以下链接。

Adding !important using a Compass Mixin

https://github.com/cloudhead/less.js/issues/547

【讨论】：

谢谢，github的讨论很有趣。

【解决方案3】：

你不能在 Mixin 上使用 !important。

它最终会给你一个 SASS 语法错误。

见this question for more information

【讨论】：

【解决方案4】：

尝试将其作为参数传递：

@mixin anim($params...){

  $values: null;

  @for $i from 0 to length($params) {

    @debug #{nth($params, $i + 1)};

    @if '#{nth($params, $i + 1)}' != '!important' {
      $values: #{nth($params, $i + 1)} $animation__time $animation__easing, $values;
    }
  }
  @if '#{nth($params, length($params))}' != '!important' {
    transition: $values;
  }
  @else {
    transition: $values !important;
  }

}

用法：

@include anim(background-color, color, !important);

【讨论】：