Части головоломки [8/30] 100%, но не все примеси использовала

Курсы §37. Примеси в LESS
1

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

.skew(@angle) {
transform: skewX(@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);
.absolute-center()
}

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

.piece-2 {
.round();
.square(75px);
}

.piece-3 {
.square(50px);
.rotate(45deg);
}

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

2

Также не все примеси использовал,
.piece {
.shadow();
.absolute-center;
.square(50px);
}

.piece-1 {
.rotateSkew(45deg)
}

.piece-2 {
.round;
.square(75px);
}

.piece-3 {
.rotate(45deg)
}

.piece-4 {
.size(50px;100px)
}
Вот по сути весь код на 100%

3

Думаю, все привмеси не используются потому, что не которые из них являются частью других примесей. Мы их используем, но сами того не видя )

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

.skew(@angle) {
transform: skewX(@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);
.absolute-center();

}

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

.piece-2 {
.round();

.size(75px; 75px;)

}

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

.piece-4 {

.size(50px; 100px)

}

4

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

.skew(@angle) {
transform: skewX(@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);
.size(50px; 50px);
.rotateSkew(45deg);
}

.piece-1 {
.absolute-center;
.shadow;
}

.piece-2 {
.absolute-center;
.shadow;
.round;
.size(75px; 75px);
.rotateSkew(0);
}

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

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