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
Post a Comment