Ответы
Відповідь:$unit: 1.75vmin;
//
$bg-1: darken(#181a19, 6);
$bg-2: darken($bg-1, 1);
$green-1: #546b5a;
$green-2: #344036;
$green-3: #242d2a;
$green-4: #191d20;
$green-5: darken(#111419, 3);
$white-1: #dfddd6;
$white-2: darken($white-1, 10);
$white-3: darken($white-2, 5);
$light-1: #ebe1b0;
$light-2: #84956c;
$light-3: #439483;
$neon: #abf1f1;
$orange: #ff9770;
$yellow: #e8fe84;
$gray-1: #b0b0b0;
$gray-2: darken($gray-1, 10);
$gray-3: darken($gray-2, 5);
$blue-1: #1896de;
$blue-2: #104d90;
$red-1: #e02e24;
$red-2: #70261d;
$red-3: #3e2823;
/***********************/
@mixin cylinder($base, $sides, $degree, $pi, $width, $color) {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
&__side {
position: absolute;
height: (2 * $pi * ($base / 2)) / $sides;
width: $width;
background-color: darken($color, 15);
@for $var from 1 to ($sides + 1) {
&:nth-of-type(#{$var}) {
transform: rotateX($var * $degree / $sides) translateZ($base / 2);
}
}
@for $var from 1 to 20 {
&:nth-of-type(#{$var}) {
background-color: darken($color, $var * 1);
}
}
@for $var from 1 to 20 {
&:nth-last-of-type(#{$var}) {
background-color: darken($color, $var * 1);
}
}
}
&__top,
&__bottom {
position: absolute;
width: $base;
height: $base;
border-radius: 50%;
transform: rotateY(90deg) translateZ($width / 2);
}
&__bottom {
transform: rotateY(90deg) translateZ($width / -2);
}
}
@mixin cube($width, $height, $depth) {
&__front {
@include cube-front($width, $height, $depth);
}
&__back {
@include cube-back($width, $height, $depth);
}
&__right {
@include cube-right($width, $height, $depth);
}
&__left {