while loop - Can SCSS output less CSS Code? -


i wondering if there's way output lesser lines of css using scss.

@each $cover in cover-cat, cover-dog, cover-bird {     .#{$cover} {         @include bg-no-repeat-center('backgrounds/' + $cover + '.png');         @include screen-size-absolute;         @if $cover == cover-cat {         z-index: 10;     } @else if $cover == cover-dog {         z-index: 20;     } @else {         z-index: 15;         background-attachment: fixed;     }   } } 

and output this:

    .cover-cat { background: url("../images/backgrounds/cover-cat.png") center center no-repeat;   bottom: 0;   height: 100%;   left: 0;   position: absolute;   right: 0;   top: 0;   z-index: 10; }  .cover-bird { background: url("../images/backgrounds/cover-bird.png") center center no-repeat;   bottom: 0;   height: 100%;   left: 0;   position: absolute;   right: 0;   top: 0;   z-index: 15;   background-attachment: fixed; }  .cover-dog { background: url("../images/backgrounds/cover-dog.png") center center no-repeat;   bottom: 0;   height: 100%;   left: 0;   position: absolute;   right: 0;   top: 0;   z-index: 20; } 

is there way make instead:

.cover-dog { background: url("../images/backgrounds/cover-dog.png") center center no-repeat; z-index: 20; }  .cover-cat { background: url("../images/backgrounds/cover-cat.png") center center no-repeat; z-index: 10; }  .cover-bird { background: url("../images/backgrounds/cover-bird.png") center center no-repeat; background-attachment: fixed; z-index: 15; }  .cover-dog, .cover-cat, .cover-bird { bottom: 0; height: 100%; left: 0; position: absolute; right: 0; top: 0; } 

...thought less lines of codes. :) i'm newbie in scss. hope can or enlighten me! thanks!


Comments

Popular posts from this blog

php - regexp cyrillic filename not matches -

c# - OpenXML hanging while writing elements -

sql - Select Query has unexpected multiple records (MS Access) -