サススタイルが乱れる

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要素は悪くなっています。

は、私がコードを編集：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プロパティもすべて上書きします。これらのそれぞれの新しいバージョンを異なる名前で定義し、新しい変数を使用する必要があります。あなたは、単純ではないことを確認し、あなたの文書全体ために、このプロセスを繰り返す必要があり

@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... 
} 

：たとえば

は、あなたのbounce-bottomアニメーションが新しい変数を使用して新しい名前で再定義する必要がありますあなたのようなあなたの他の定義を上書きします。