问题混合变量与mixin与关键帧动画？答案

【问题标题】：Issue mixing variable with mixin with keyframe animation?问题混合变量与mixin与关键帧动画？
【发布时间】：2017-01-18 06:22:30
【问题描述】：

第一次使用 SCSS，并从 Sass-Lang.com 指南测试我的知识。根据指南，既可以设置变量也可以使用 mixins 来简化 CSS。

我正在编写一个动画，其中 div 从下到上剪辑。我使用变量来设置初始和最终剪辑路径设置，并在调用 mixin 时使用它们。然而我得到了错误，'在“...slider-initial）”之后无效的 CSS：预期的“{”，是“;}”'。我做错了什么？

这是我的代码：

<body>
  <section id='main'>
    <div id='left'></div>
    <div id='right'></div>
  <section>
</body>

$slider-initial: inset(0 0 0 0);
$slider-final: inset(0 0 100% 0);

@mixin slider-clip($slider-state) {
  -webkit-clip-path: $slider-state;
  clip-path: $slider-state;
  }

body {
  height: 100%; width: 100%;
  margin: 0 auto;
}

#main {
  height: 64vh; width: 38vw;
  margin: 0 auto;
  margin-top: 10%;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;

  border: 1vh solid black;
}

#left {
  order: 1;
  width: 4%;
  height: 100%;
  margin-left: 46%;
  background: green;
}

#right {
  opacity: 1;
  order: 2;
  width: 4%;
  height: 100%;
  margin: auto; 
  margin-left: 0;

  animation-name: dropdown;
  animation-duration: 4s;

  background: red;
}

@keyframes dropdown {
    from { @mixin slider-clip($slider-initial); }
    to { @mixin slider-clip($slider-final); }
}

【问题讨论】：

标签： sass

【解决方案1】：

你以错误的方式调用了你的 mixin：

@keyframes dropdown {
  from { @mixin slider-clip($slider-initial); }
  to { @mixin slider-clip($slider-final); }
}

在 sass-lang.com 上的 the guide 中，您可以看到以下如何包含 mixin 的示例：

.box { @include border-radius(10px); }

应用于您的案例，您的代码应如下所示：

@keyframes dropdown {
  from { @include slider-clip($slider-inital); }
  to { @include slider-clip($slider-final); }
}

【讨论】：