Allison Stafford Allison Stafford - 2 months ago 14
Sass (Sass) Question

Issue mixing variable with mixin with keyframe animation?

First time using SCSS, and testing my knowledge from the Sass-Lang.com guide. According to the guide, it is possible to both set variables and use mixins to simplify your CSS.

I was coding an animation where the div is clipped from bottom to top. I used variables to set the initial and final clip-path settings, and used them while calling a mixin. Yet I get the error, 'Invalid CSS after "...slider-initial)": expected "{", was "; }"'. What am I doing wrong?

Here is my code:

<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

You called your mixin in a wrong way:

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

In the guide on sass-lang.com, you can see the following example of how to include a mixin:

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

Applied to your case, your code should look like this:

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