Sass 風格混亂

Question

我是 SASS 的新手，我在 Codepen 網站上找到了一個動畫師代碼。 就是這樣： Codepen 鏈接

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


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

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

我需要一個更大版本的動畫，我編輯了變量，這一切都很好，直到我也需要一個更小的版本。

所以我在最后再次添加了相同的代碼並更改了相應的類。 但是風格越來越差。 頂部的 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...
}

您需要對整個文檔重復此過程，以確保您不會像當前那樣簡單地覆蓋其他定義。