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

Курсы §37. Примеси в LESS
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;
}

1.png1866×857 32.2 KB

в чем ошибка?

2

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

3

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

4

Добрый день. Покритикуйте код.Мой вариант на 100%.

.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);
.absolute-center();
}

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

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

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

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

1 лайк
6 
.piece {
  .shadow();
  .absolute-center;
  .square(50px);
}

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

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

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

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

Мое решение.
100%

.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 {
.absolute-center();
.rotateSkew(45deg);
.square(50px);
}

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

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

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

8

.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 {
.absolute-center();
.square(50px);
.rotateSkew(45deg);
}

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

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

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