36 lines
651 B
SCSS
36 lines
651 B
SCSS
@use 'sass:color';
|
|
@use 'sass:math';
|
|
|
|
$base-color: pink;
|
|
|
|
body{
|
|
margin: 0
|
|
}
|
|
|
|
div.columns{
|
|
display: flex;
|
|
height: 100vh;
|
|
|
|
& > div{
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
@mixin color-columns($n){
|
|
@for $i from 1 through $n{
|
|
$color: color.adjust($base-color, $hue: ($i - 1) * math.div(360, $n - 1));
|
|
|
|
& > div:nth-child(#{$i}){
|
|
background-color: $color;
|
|
}
|
|
|
|
& > div:nth-child(#{$i})::before{
|
|
content: "#{$color}";
|
|
}
|
|
}
|
|
}
|
|
|
|
@include color-columns(10);
|
|
} |