@bgColor: #87e1ff;
@faceColor: #fad4be;
@hatColor: white;
.main {
width: 400px;
height: 300px;
}
.finn {
position: absolute;
top: 40%;
left: 50%;
transform: translateY(-50%);
margin-left: -75px;
}
.face {
position: absolute;
width: 150px;
height: 90px;
border: 2px solid #333;
background: @faceColor;
border-radius: e("75px/45px");
}
.hat {
position: absolute;
left: -25px;
top: -20px;
width: 200px;
height: 130px;
border: 2px solid #333;
background: @hatColor;
border-radius: e("100px/50px");
}
.ear(@left) {
position: absolute;
z-index: 101;
left: @left;
top: -25px;
width: 22px;
height: 20px;
background: @hatColor;
border: 2px solid #333;
border-radius: 80px 80px 0 0;
}
.ear_bg(@left, @borderLeft, @borderRight) {
position: absolute;
z-index: 102;
left: @left;
top: -3px;
width: 22px;
height: 35px;
background: @hatColor;
border-left: @borderLeft;
border-right: @borderRight;
}
.ear_left {
.ear(-25px);
}
.ear_left_bg {
.ear_bg(-25px, 2px solid #333, none);
}
.ear_right {
.ear(153px);
}
.ear_right_bg {
.ear_bg(155px, none, 2px solid #333);
}
.eye(@left) {
position: absolute;
left: @left;
top: 35px;
width: 8px;
height: 14px;
background: #333;
border-radius: e("8px/14px");
}
.eye_left {
.eye(30px);
}
.eye_right {
.eye(115px);
}
.mouth {
&::before {
position: absolute;
content: "";
left: 51px;
top: 40px;
width: 50px;
height: 25px;
background: #333;
border-radius: e("50px/25px");
}
&::after {
position: absolute;
content: "";
left: 45px;
top: 20px;
width: 60px;
height: 40px;
background: @faceColor;
border-radius: e("80px/30px");
}
}
body {
background: @bgColor;
}
View Compiled