Испытание: части головоломки [8/30]


#1

.round() {
border-radius: 50%;
}

.skew(@angle) {
transform: skewX(@angle);
}

.skewY(@angle) {
transform: skewY(@angle);
}

.rotate(@angle) {
transform: rotate(@angle);
}

.rotateSkew(@angle) {
transform: rotate(@angle) skewX(@angle);
}

.size(@width; @height) {
width: @width;
height: @height;
}

.square(@width) {
.size(@width; @width);
}

.absolute-center() {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}

.shadow() {
box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.3);
}

.piece {
.shadow();
.square(10px);
}

.piece-1 {
.shadow();
.size(36px;72px);
.absolute-center();
.skewY(45deg);
}

.piece-2 {
.shadow();
.size(75px;75px);
border-radius: 50%;
.absolute-center;
}

.piece-3 {
.shadow();
.size(50px;50px);
.rotate(45deg);
.absolute-center();
}

.piece-4 {
.shadow();
.size(50px;100px);
.absolute-center;
}

в чем ошибка?


#2

.piece-1 {
.absolute-center();
.rotateSkew(45deg);
.square(50px);
}


#3

Можно не писать .shadow() в каждом элементе, так как он уже подставлен в общий селектор .piece. Старайтесь минимизировать код.