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

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

@angle: 45deg;
@width: 50px;
@height: 100px;

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

.piece-1 {
.rotateSkew(@angle);
.absolute-center();
.square(@width);
}

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

.piece-3 {
.square(@width);
.rotate(@angle);
.absolute-center();
}

.piece-4 {
.size(@width; @height);
.absolute-center();
}

1 лайк
2
  1. выведите в общее правило .absolute-center();
  2. во 2 фигуре используйте формулу @width*1.5
  3. можно еще выразить высоту через ширину @height: @width*2; чтобы не терять пропорции, тогда можно будет управлять всего одной переменной ширины.

Тогда будет отлично, лучший гибкий вариант, из тех что есть на форуме.

3 лайка
3

Спасибо большое, поняла.

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: 10px;
right: 10px;
bottom: 10px;
left: 10px;
margin: auto;
}

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

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

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

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

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

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

5

Отправляю свой вариант решения (Но первый + комментарии - мне очень понравился.):
`.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;
.square(75px);
}

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

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

6

@angle: 45deg;
@width: 50px;
@height: 100px;

.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(50px);
}

.piece-1,
.piece-2,
.piece-3,
.piece-4 {
.absolute-center();
}

.piece-1 {
.rotateSkew(@angle);
}

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

.piece-3 {
.rotate(@angle);
}

.piece-4 {
.size(@width; @height);
}

7

Вобще — спасибо вам большое за всегда точные и суперполезные ответы.