如何使用 scss @include答案

【问题标题】：How to use scss @include如何使用 scss @include
【发布时间】：2021-11-24 22:35:48
【问题描述】：

我有一个 SCSS 文件，我想@include transition(all, 0.5s); 但是 scss 给了

错误信息：

Scss compiler Error: no mixin named transition

这是我的SCSS：

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

【问题讨论】：

标签： css sass scss-mixins

【解决方案1】：

 @mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

然后使用它

@include reset-list

https://sass-lang.com/documentation/at-rules/mixin

但我看到你正在尝试在你的 mixin 中使用参数

https://www.tutorialspoint.com/sass/arguments.htm#:~:text=Explicit%20keyword%20argument%20can%20be,of%20argument%20can%20be%20omitted.

@mixin bordered($color, $width: 2px) {
   color: #77C1EF;
   border: $width solid black;
   width: 450px;
}

.style  {
   @include bordered($color:#77C1EF, $width: 2px);
}

简而言之：在包含之前声明你的 mixin。您的错误表明该 mixin 不存在

@mixin transition($includes, $length) {
   transition: $includes $length;
}

.style  {
   @include transition($includes: all, $length: .2s);
}

【讨论】：