Question

有一个奇怪的问题让我疯了。我是scss的新手，这是我的第一个项目 - 有点讨厌它。

所以我有一些mixins工作得很好，但是一个似乎不起作用。面对面，我尝试过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中设置的名称。

发生什么事了?????

Answer 1

应该是：

@mixin keyframes($name) {
  @-o-keyframes #{$name} { @content };
  @-moz-keyframes #{$name} { @content };
  @-webkit-keyframes #{$name} { @content }; 
  @-keyframes #{$name} { @content };
}

Answer 2

如果你想在SASS中输出一个不是CSS值的变量，你需要像这样使用interpolation syntax：

@mixin keyframes($name) {
  @-o-keyframes #{$name} { @content };
  @-moz-keyframes #{$name} { @content };
  @-webkit-keyframes #{$name} { @content }; 
  @-keyframes #{$name} { @content };
}

SCSS变量没有将名称传递给css

2 个答案: