Question

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

我正在编写动画，其中div从下到上剪裁。我使用变量设置初始和最终剪辑路径设置，并在调用mixin时使用它们。然而，我得到错误，＆＃34;＆＃34; ... slider-initial）＆＃34;：＃34; {＆＃34;，是＆＃34 ;; }＆＃34;＆＃39 ;.我做错了什么？

这是我的代码：

<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); }
}

Answer 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); }
}

使用关键帧动画向mixin发出混合变量？

1 个答案: