Mischvariable mit Mixin mit Keyframe-Animation ausgeben?

Das erste Mal mit SCSS, und mein Wissen aus dem Sass-Lang.com Guide testen. Laut dem Leitfaden ist es möglich, Variablen zu setzen und Mixins zu verwenden, um Ihr CSS zu vereinfachen.Mischvariable mit Mixin mit Keyframe-Animation ausgeben?

Ich habe eine Animation programmiert, wo das div von unten nach oben abgeschnitten wird. Ich habe Variablen verwendet, um die ersten und letzten Einstellungen für den Clippfad festzulegen und sie beim Aufrufen eines Mixins zu verwenden. Trotzdem bekomme ich den Fehler 'Ungültiges CSS nach "... slider-initial)": expected "{", war ";}"'. Was mache ich falsch?

Hier ist mein 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); } 
}

Quelle

2016-09-10 Allison Stafford

Sie nannten Ihre mixin in einer falschen Weise:

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

In the guide auf sass-lang.com können Sie sehen, Das folgende Beispiel zum Einbinden eines Mixins:

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

zu Ihrem Fall angewendet, sollte Ihr Code wie folgt aussehen:

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

Quelle

2016-09-10 15:04:23

Mischvariable mit Mixin mit Keyframe-Animation ausgeben?

Antwort

Verwandte Themen