Question

我是SASS的新手，我在Codepen网站上找到了一个动画代码。就是这样：Codepen link

.spinners
  margin: 60px auto
  .row
    height: 50px
    padding: 10px 0


/* ============================ */
/* VARIABLES                    */
/* ============================ */

$bar-width: 4px
$bar-height: 20px
$bar-color: #00B285
$bar-radius: 2px

我需要一个更大版本的动画，我编辑了变量，这完全正常，直到我还需要一个较小的版本。

所以我在最后再次添加了相同的代码并更改了各自的类。但风格越来越差。顶部的HTML元素变坏了，而下面的HTML元素很好。

由我编辑的代码：Codepen Link

.sspinners
  margin: 60px auto
  .row
    height: 50px
    padding: 10px 0


/* ============================ */
/* VARIABLES                    */
/* ============================ */

$bar-width: 8px
$bar-height: 60px
$bar-color: #00B285
$bar-radius: 2px

你能告诉我为什么会出错吗？或者这是它的工作方式？请纠正我。

提前致谢！

Answer 1

你要覆盖你的变量。

SASS变量的工作方式与其他CSS属性相同，即。仅使用最后一个定义。

您需要为不同元素的任何属性定义新变量，例如。

.spinners
  margin: 60px auto
  .row
    height: 50px
    padding: 10px 0


/* ============================ */
/* VARIABLES                    */
/* ============================ */

/* Default size */

$bar-width: 4px
$bar-height: 20px
$bar-color: #00B285
$bar-radius: 2px

/* large size*/

$bar-large-width: 8px
$bar-large-height: 60px

/* small size*/

$bar-small-width: 2px
$bar-small-height: 10px

在进一步查看代码之后，您还会覆盖所有动画定义和其他CSS属性。您需要使用不同的名称并使用新变量定义每个版本的新版本。

例如，您需要使用新变量使用新名称重新定义bounce-bottom动画：

@keyframes bounce-bottom
  0%
    height: 5px
    margin-top: $bar-height - 5px
  50%
    height: $bar-height
    margin-top: 0px
  100%
    height: 5px
    margin-top: $bar-height - 5px

  ... etc...
}

@keyframes bounce-bottom-large
  0%
    height: 5px
    margin-top: $bar-large-height - 5px
  50%
    height: $bar-large-height
    margin-top: 0px
  100%
    height: 5px
    margin-top: $bar-large-height - 5px

  ... etc...
}

您需要为整个文档重复此过程，确保您不是简单地覆盖您当前的其他定义。

Sass风格搞乱了

1 个答案: