SCSS使用@include transition时报错no mixin named transition如何解决？

报错原因 #

no mixin named transition报错的核心原因是：你使用@include指令调用了一个从未被预先定义的名为transition的mixin。
SCSS中@include的作用是调用提前用@mixin语法声明的可复用代码块，原生CSS的transition属性不能直接加@include前缀使用。

解决方法 #

提供两种可落地的方案：

方案1：直接使用原生CSS语法（推荐） #

当前主流浏览器对transition属性的兼容性已经足够完善，不需要额外做前缀兼容的场景下，直接删除@include前缀，按原生CSS写法即可：

a {
  float: left;
  line-height: 70px;
  text-decoration: none;
  color: white;
  transition: all 0.3s;
  &:hover {
    background-color: #444;
    transition: all .5s;
  }
}

方案2：先定义transition mixin再调用 #

如果你需要自动生成多浏览器前缀的兼容代码，可以先在SCSS文件头部定义transition对应的mixin，再用@include调用：

// 需放在所有调用@include transition的代码之前
@mixin transition($properties, $duration, $timingFunc: ease, $delay: 0s) {
  -webkit-transition: $properties $duration $timingFunc $delay;
  -moz-transition: $properties $duration $timingFunc $delay;
  -ms-transition: $properties $duration $timingFunc $delay;
  -o-transition: $properties $duration $timingFunc $delay;
  transition: $properties $duration $timingFunc $delay;
}

完成mixin定义后，你原有代码就可以正常编译运行。

内容的提问来源于stack exchange，提问作者Noa