interaktionsweise/hippie-style
1
1
Fork 0
Code Pull requests Releases Activity

feat: Replace deprecated sass things

Browse source 
- Global built-in functions
- Color functions
This commit is contained in:
sthag 2025-10-25 08:59:09 +02:00
parent 225c1dd55c
commit b739ddefda
13 changed files with 96 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

26
mixins/_color.scss
View file

@ -1,20 +1,22 @@
@use "sass:map";
@mixin addDefaultColors() {
@if map-has-key($color_palette, alpha) {
$alpha_color: map-get($color_palette, alpha) !global;
@if map.has-key($color_palette, alpha) {
$alpha_color: map.get($color_palette, alpha) !global;
}
@if map-has-key($color_palette, bravo) {
$bravo_color: map-get($color_palette, bravo) !global;
@if map.has-key($color_palette, bravo) {
$bravo_color: map.get($color_palette, bravo) !global;
}
@if map-has-key($color_palette, charlie) {
$charlie_color: map-get($color_palette, charlie) !global;
@if map.has-key($color_palette, charlie) {
$charlie_color: map.get($color_palette, charlie) !global;
}
@if map-has-key($color_palette, delta) {
$delta_color: map-get($color_palette, delta) !global;
@if map.has-key($color_palette, delta) {
$delta_color: map.get($color_palette, delta) !global;
}
@if map-has-key($color_palette, echo) {
$echo_color: map-get($color_palette, echo) !global;
@if map.has-key($color_palette, echo) {
$echo_color: map.get($color_palette, echo) !global;
}
@if map-has-key($color_palette, foxtrot) {
$foxtrot_color: map-get($color_palette, foxtrot) !global;
@if map.has-key($color_palette, foxtrot) {
$foxtrot_color: map.get($color_palette, foxtrot) !global;
}
}

14
mixins/_sprite.scss
View file

@ -1,3 +1,5 @@
@use "sass:list";
// SCSS variables are information about icon's compiled state, stored under its original file name
//
// .icon-home {
@ -84,21 +86,21 @@ $spritesheet: (96px, 64px, '../art/sprite.png', $spritesheet-sprites, );
// // HTML
// <i class="icon icon-home"></i>
@mixin sprite-width($sprite) {
width: nth($sprite, 5);
width: list.nth($sprite, 5);
}
@mixin sprite-height($sprite) {
height: nth($sprite, 6);
height: list.nth($sprite, 6);
}
@mixin sprite-position($sprite) {
$sprite-offset-x: nth($sprite, 3);
$sprite-offset-y: nth($sprite, 4);
$sprite-offset-x: list.nth($sprite, 3);
$sprite-offset-y: list.nth($sprite, 4);
background-position: $sprite-offset-x $sprite-offset-y;
}
@mixin sprite-image($sprite) {
$sprite-image: nth($sprite, 9);
$sprite-image: list.nth($sprite, 9);
background-image: url(#{$sprite-image});
}
@ -115,7 +117,7 @@ $spritesheet: (96px, 64px, '../art/sprite.png', $spritesheet-sprites, );
// @include sprites($spritesheet-sprites);
@mixin sprites($sprites) {
@each $sprite in $sprites {
$sprite-name: nth($sprite, 10);
$sprite-name: list.nth($sprite, 10);
.#{$sprite-name} {
@include sprite($sprite);
}