JADE
.wrap
each val in ['i', 'j', 'l', 'o', 's', 'z', 't']
div(class='block block--' + val)
- for (var i = 0; i < 4; i++) {
div(class='block__square')
- }
SCSS
/*===== [Base Styling] =====*/
html {
box-sizing: border-box;
background: #F7F3E3;
}
html, body {
height: 100%;
}
*, *:before, *:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
/*===== [Vars & Mixins] =====*/
$color-block-i: #52B3D9;
$color-block-j: #446CB3;
$color-block-l: #EB9532;
$color-block-o: #F4D03F;
$color-block-s: #2ECC71;
$color-block-z: #EF4836;
$color-block-t: #9B59B6;
$width-border: 10px;
$width-square: 50px;
$height-square: $width-square;
@mixin block-border($base-color) {
border-color: lighten($base-color, 15%);
}
/* ===== [Presentation Styling] =====*/
.wrap {
display: flex;
height: 100%;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
/*===== [Blocks] =====*/
.block {
font-size: 0;
margin-bottom: 4rem;
&__square {
width: $width-square;
height: $height-square;
border-width: $width-border;
border-style: outset;
content: '';
}
&--i {
.block__square {
@include block-border($color-block-i);
background: $color-block-i;
}
}
&--j {
width: 3 * $width-square;
.block__square {
@include block-border($color-block-j);
background: $color-block-j;
&:not(:first-child) {
display: inline-block;
}
}
}
&--l {
width: 3 * $width-square;
.block__square {
@include block-border($color-block-l);
background: $color-block-l;
&:not(:last-child) {
display: inline-block;
}
}
}
&--o {
width: $width-square * 2;
.block__square {
@include block-border($color-block-o);
display: inline-block;
background: $color-block-o;
}
}
&--s {
width: $width-square * 3;
.block__square {
@include block-border($color-block-s);
display: inline-block;
background: $color-block-s;
&:first-child {
margin-left: $width-square;
}
}
}
&--z {
width: $width-square * 3;
.block__square {
@include block-border($color-block-z);
display: inline-block;
background: $color-block-z;
&:nth-child(3) {
margin-left: $width-square;
}
}
}
&--t {
.block__square {
@include block-border($color-block-t);
display: inline-block;
background: $color-block-t;
&:first-child {
display: block;
margin-left: $width-square;
}
}
}
}
1 Response