-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.avatar {
--avatarSize: 100%;
}
}
-.avatar-18 {
- --avatarSize: 18px;
- --initialFontSize: 13px;
-}
+$sizes: '18', '25', '28', '32', '34', '35', '36', '40', '48', '75', '80', '100', '120';
-.avatar-25 {
- --avatarSize: 25px;
+@each $size in $sizes {
+ .avatar-#{$size} {
+ --avatarSize: #{$size}px;
+ }
}
-.avatar-32 {
- --avatarSize: 32px;
-}
-
-.avatar-34 {
- --avatarSize: 34px;
-}
-
-.avatar-36 {
- --avatarSize: 36px;
-}
-
-.avatar-40 {
- --avatarSize: 40px;
+.avatar-18 {
+ --initialFontSize: 13px;
}
.avatar-100 {
- --avatarSize: 100px;
--initialFontSize: 40px;
}
.avatar-120 {
- --avatarSize: 120px;
--initialFontSize: 46px;
}