Fix SASS deprecation

This is a super annoying breaking change in sass (it also happens in `node-sass`/`node-scss`), but there seems to be no way around it.

context: https://sass-lang.com/documentation/breaking-changes/slash-div
This commit is contained in:
Marcus Blättermann 2022-09-13 01:01:43 +02:00
parent 2ea50bd2fb
commit b4117ebc94
No known key found for this signature in database
GPG Key ID: A1E1F04008AC450D
5 changed files with 16 additions and 10 deletions

View File

@ -1,3 +1,4 @@
@use 'sass:math'
@import base @import base
$triangle-size: 2rem $triangle-size: 2rem
@ -55,14 +56,14 @@ $border-radius: 6px
// Banner effect // Banner effect
&:after &:after
position: absolute position: absolute
bottom: -$triangle-size / 2 bottom: math.div(-$triangle-size, 2)
left: $border-radius / 2 left: math.div($border-radius, 2)
width: 0 width: 0
height: 0 height: 0
border-color: transparent border-color: transparent
border-style: solid border-style: solid
border-top-color: var(--color-dark) border-top-color: var(--color-dark)
border-width: $triangle-size / 2 0 0 calc(#{$triangle-size} - #{$border-radius / 2}) border-width: math.div($triangle-size, 2) 0 0 calc(#{$triangle-size} - #{math.div($border-radius, 2)})
content: "" content: ""
@include breakpoint(max, sm) @include breakpoint(max, sm)

View File

@ -1,3 +1,5 @@
@use 'sass:math'
.root .root
margin-bottom: var(--spacing-md) margin-bottom: var(--spacing-md)
@ -7,7 +9,7 @@
@each $ratio1, $ratio2 in (16, 9), (4, 3) @each $ratio1, $ratio2 in (16, 9), (4, 3)
.ratio#{$ratio1}x#{$ratio2} .ratio#{$ratio1}x#{$ratio2}
padding-bottom: (100% * $ratio2 / $ratio1) padding-bottom: (100% * math.div($ratio2, $ratio1))
.iframe .iframe
position: absolute position: absolute

View File

@ -1,3 +1,4 @@
@use 'sass:math'
@import base @import base
$grid-gap-wide: 5rem $grid-gap-wide: 5rem
@ -9,7 +10,7 @@ $flex-gap: 2rem
@if $gap == 0 @if $gap == 0
flex: 0 0 100% / $cols flex: 0 0 100% / $cols
@else @else
flex: 0 0 calc(#{100% / $cols} - #{$gap * ($cols - 1)}) flex: 0 0 calc(#{math.div(100%, $cols)} - #{$gap * ($cols - 1)})
.root .root
display: flex display: flex

View File

@ -1,3 +1,4 @@
@use 'sass:math'
@import base @import base
.root .root
@ -82,7 +83,7 @@
vertical-align: middle vertical-align: middle
margin-right: 0.5rem margin-right: 0.5rem
cursor: pointer cursor: pointer
border-radius: $size / 4 border-radius: math.div($size, 4)
background: var(--color-back) background: var(--color-back)
position: relative position: relative
top: -1px top: -1px

View File

@ -1,3 +1,4 @@
@use 'sass:math'
@import base @import base
$crumb-bullet: 14px $crumb-bullet: 14px
@ -58,7 +59,7 @@ $crumb-bar: 2px
position: relative position: relative
.crumb .crumb
margin-bottom: $crumb-bullet / 2 margin-bottom: math.div($crumb-bullet, 2)
position: relative position: relative
padding-left: 2rem padding-left: 2rem
color: var(--color-theme) color: var(--color-theme)
@ -71,7 +72,7 @@ $crumb-bar: 2px
width: $crumb-bullet width: $crumb-bullet
height: $crumb-bullet height: $crumb-bullet
position: absolute position: absolute
top: $crumb-bullet / 4 top: math.div($crumb-bullet, 4)
left: 0 left: 0
content: "" content: ""
border-radius: 50% border-radius: 50%
@ -83,13 +84,13 @@ $crumb-bar: 2px
height: 100% height: 100%
position: absolute position: absolute
top: $crumb-bullet top: $crumb-bullet
left: ($crumb-bullet - $crumb-bar) / 2 left: math.div(($crumb-bullet - $crumb-bar), 2)
content: "" content: ""
background: var(--color-subtle) background: var(--color-subtle)
&:first-child:before &:first-child:before
height: calc(100% + #{$crumb-bullet * 2}) height: calc(100% + #{$crumb-bullet * 2})
top: -$crumb-bullet / 2 top: math.div(-$crumb-bullet, 2)
.crumb-active .crumb-active
color: var(--color-dark) color: var(--color-dark)