Hari krishnan Hari krishnan - 7 months ago 23
HTML Question

Sass styles messing up

I am new to SASS and i had found a animator code on Codepen website. This is it: 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


I needed a bigger version of the animation and i edited the variables and that was perfectly working fine, until I needed a smaller version also.

So I added the same code again at the end and changed the respective classes. but the styles are getting bad. The HTML element at the top is getting bad while the following one is good.

Edited code by me: 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


Can you please tell why is that getting wrong? Or it is this way it is working? Please correct me.

Thanks in advance!

Answer

You are overriding your variables.

SASS variables work like any other CSS property ie. Only the last definition will be used.

You need to define new variables for any properties that change for your different elements eg.

.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

After looking further at your code, you are also overriding all of your animation definitions and other CSS properties. You need to define a new version of each of these with a different name and using the new variables.

For example, your bounce-bottom animation needs to be redefined with a new name using the new variables:

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

You need to repeat this process for your entire document making sure that you aren't simply overriding your other definitions like you are currently.