2023-05-30 11:56:49 +02:00
|
|
|
{% codeExample 'example-if' %}
|
2023-05-31 19:45:19 +02:00
|
|
|
@use "sass:math";
|
|
|
|
|
2023-05-30 23:23:34 +02:00
|
|
|
@mixin avatar($size, $circle: false) {
|
|
|
|
width: $size;
|
|
|
|
height: $size;
|
2023-05-30 11:56:49 +02:00
|
|
|
|
2023-05-30 23:23:34 +02:00
|
|
|
@if $circle {
|
2023-05-31 19:45:19 +02:00
|
|
|
border-radius: math.div($size, 2);
|
2023-05-30 23:23:34 +02:00
|
|
|
}
|
2023-05-30 11:56:49 +02:00
|
|
|
}
|
|
|
|
|
2023-05-30 23:23:34 +02:00
|
|
|
.square-av {
|
|
|
|
@include avatar(100px, $circle: false);
|
|
|
|
}
|
|
|
|
.circle-av {
|
|
|
|
@include avatar(100px, $circle: true);
|
|
|
|
}
|
|
|
|
===
|
2023-05-31 20:03:30 +02:00
|
|
|
@use "sass:math"
|
|
|
|
|
2023-05-30 23:23:34 +02:00
|
|
|
@mixin avatar($size, $circle: false)
|
|
|
|
width: $size
|
|
|
|
height: $size
|
2023-05-30 11:56:49 +02:00
|
|
|
|
2023-05-30 23:23:34 +02:00
|
|
|
@if $circle
|
2023-05-31 19:45:19 +02:00
|
|
|
border-radius: math.div($size, 2)
|
2023-05-30 11:56:49 +02:00
|
|
|
|
2023-05-31 20:11:29 +02:00
|
|
|
|
|
|
|
|
2023-05-30 23:23:34 +02:00
|
|
|
.square-av
|
|
|
|
@include avatar(100px, $circle: false)
|
2023-05-31 20:11:29 +02:00
|
|
|
|
2023-05-30 23:23:34 +02:00
|
|
|
.circle-av
|
|
|
|
@include avatar(100px, $circle: true)
|
2023-05-30 11:56:49 +02:00
|
|
|
{% endcodeExample %}
|