-1
Имея странную проблему, которая сводит меня с ума. Я новичок в scss, и это мой первый проект - и он уже ненавидит его.SCSS переменная, не передающая имя в css
Итак, у меня есть некоторые смесители, которые отлично работают, но, похоже, не работают. На лице я пробовал 3 подобных mixis, написанных другими людьми, и никто из них не работает.
Вот код ..... В моем файле _mixins.scss является:
@mixin keyframes($name) {
@-o-keyframes $name { @content };
@-moz-keyframes $name { @content };
@-webkit-keyframes $name { @content };
@-keyframes $name { @content };
}
@mixin animation-name($name...) {
-o-animation-name: $name;
-moz-animation-name: $name;
-webkit-animation-name: $name;
animation-name: $name;
}
@mixin animation-duration($duration...) {
-o-animation-duration: $duration;
-moz-animation-duration: $duration;
-webkit-animation-duration: $duration;
animation-duration: $duration;
}
@mixin animation-duration($duration...) {
-o-animation-duration: $duration;
-moz-animation-duration: $duration;
-webkit-animation-duration: $duration;
animation-duration: $duration;
}
@mixin animation-timing-function($timing...) {
-o-animation-timing-function: $timing;
-moz-animation-timing-function: $timing;
-webkit-animation-timing-function: $timing;
animation-timing-function: $timing;
}
@mixin animation-iteration-count($count...) {
-o-animation-iteration-count: $count;
-moz-animation-iteration-count: $count;
-webkit-animation-iteration-count: $count;
animation-iteration-count: $count;
}
@mixin animation-direction($direction...) {
-o-animation-direction: $direction;
-moz-animation-direction: $direction;
-webkit-animation-direction: $direction;
animation-direction: $direction;
}
@mixin animation-fill-mode($fill...) {
-o-animation-fill-mode: $fill;
-moz-animation-fill-mode: $fill;
-webkit-animation-fill-mode: $fill;
animation-fill-mode: $fill;
}
@mixin animation-play-state($state...) {
-o-animation-play-state: $state;
-moz-animation-play-state: $state;
-webkit-animation-play-state: $state;
animation-play-state: $state;
}
@mixin animation($animation...) {
-o-animation: $animation;
-moz-animation: $animation;
-webkit-animation: $animation;
animation: $animation;
}
и в моем файле base.scss является:
@include keyframes(fadeIn) {
from {
opacity:0;
}
to {
opacity:1;
}
}
.nav-about a {
color: #fff;
@include animation-name(fadeIn);
@include animation-duration(1s);
@include animation-iteration-count(infinite);
@include animation-direction(alternate);
}
Что составляется в css:
@-o-keyframes $name {
from {
opacity: 0; }
to {
opacity: 1; } }
@-moz-keyframes $name {
from {
opacity: 0; }
to {
opacity: 1; } }
@-webkit-keyframes $name {
from {
opacity: 0; }
to {
opacity: 1; } }
@-keyframes $name {
from {
opacity: 0; }
to {
opacity: 1; } }
#about-page .nav-about a {
color: #fff;
text-shadow: 0 0 6px #FFFFFF;
-o-animation-name: bob;
-moz-animation-name: bob;
-webkit-animation-name: bob;
animation-name: bob;
-o-animation-duration: 1s;
-moz-animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-o-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-o-animation-direction: alternate;
-moz-animation-direction: alternate;
-webkit-animation-direction: alternate;
animation-direction: alternate; }
Как вы видите, переменная отображается в CSS вместо имени, которое я задал в base.scss.
Что происходит ?????