Части головоломки [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 {
.rotateSkew(45deg);
.size(50px; 50px);
}

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

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

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

2

не хватает по одной примеси в каждом .piece

3

Вы имеете ввиду, что не хватает “.absolute-center();” ?
Смотрите .piece { …
Или вы что-то другое увидели?

4

С первым кусочком долго почему-то провозился :frowning:

Части головоломки 
.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 {
    .size(50px, 50px);
    .rotateSkew(45deg);
}

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

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

.piece-4 {
    .size(50px, 100px);
}
1 лайк