Испытание: части головоломки

Проверим знания в испытании.

В исходном коде созданы разные примеси. Вам нужно применить их к кусочкам головоломки так, чтобы кусочки «закрыли» пустоты частей головоломки. Часть примесей применяется без параметров, а некоторые принимают параметры.

В качестве подсказки мы уже применили несколько примесей ко всем кусочкам .piece. Удачи!

Решение

Решение испытания будет доступно через несколько минут. Используйте его, если возникнут сложности. А пока попытайтесь пройти испытание самостоятельно.

.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: 0 0 15px 5px rgba(0, 0, 0, 0.3);
}

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

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

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

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

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

Притормози, дружище

Проходить вызовы части «Примеси в Less» тренажёра «Инструменты автоматизации: препроцессор» можно после регистрации и оформления подписки.

Зарегистрироваться