SCSS
@import "compass/css3";
$n: 6;
section {
height: 100%;
position: absolute;
width: calc(100% / #{$n});
@for $i from 1 through $n {
&:nth-of-type(#{$i}) {
left: calc((100% / #{$n}) * #{$i - 1});
}
}
}
.lbg1 {
background-color: rgb(241, 196, 15);
@include filter-gradient(#f1c40f, #e74c3c, horizontal);
@include background-image(linear-gradient(left top, rgb(241, 196, 15) 0%, rgb(231, 76, 60) 100%));
}
.lbg2 {
background-color: rgb(41, 128, 185);
@include filter-gradient(#2980b9, #1abc9c, vertical);
@include background-image(linear-gradient(top, rgb(41, 128, 185) 0%, rgb(26, 188, 156) 100%));
}
.lbg3 {
background-color: rgb(192, 57, 43);
@include filter-gradient(#c0392b, #34495e, horizontal);
@include background-image(linear-gradient(left top, rgb(192, 57, 43) 0%, rgb(52, 73, 94) 100%));
}
.lbg4 {
background-color: rgb(170, 170, 170);
@include filter-gradient(#aaaaaa, #707070, horizontal);
@include background-image(radial-gradient(center, ellipse cover, rgb(170, 170, 170) 0%, rgb(112, 112, 112) 100%));
}
.lbg5 {
background-color: rgb(255, 255, 255);
@include filter-gradient(#ffffff, #e74c3c, vertical);
@include background-image(linear-gradient(top, rgb(255, 255, 255) 0%, rgb(241, 196, 15) 50%, rgb(231, 76, 60) 100%));
}
.lbg6 {
background-color: rgb(142, 68, 173);
@include filter-gradient(#8e44ad, #3498db, horizontal);
@include background-image(linear-gradient(left bottom, rgb(142, 68, 173) 0%, rgb(52, 152, 219) 100%));
}
