fix(styles): support sass 1.77.7

closes #20139

package.json

@@ -75,7 +75,7 @@
     "mkdirp": "^3.0.1",
     "moment": "^2.30.1",
     "rimraf": "^5.0.5",
-    "sass": "^1.74.1",
+    "sass": "^1.77.8",
     "semver": "^7.6.0",
     "shelljs": "^0.8.5",
     "stringify-object": "^5.0.0",

packages/vuetify/src/components/VBtn/VBtn.sass

@@ -40,12 +40,12 @@
 
     @supports selector(:focus-visible)
       &::after
-        @include tools.absolute(true)
         pointer-events: none
         border: 2px solid currentColor
         border-radius: inherit
         opacity: 0
         transition: opacity .2s ease-in-out
+        @include tools.absolute(true)
 
       &:focus-visible::after
         opacity: calc(.25 * var(--v-theme-overlay-multiplier))
@@ -66,10 +66,10 @@
     &--elevated
       &:hover,
       &:focus
-        +tools.elevation(map.get($button-elevation, 'hover'))
+        @include tools.elevation(map.get($button-elevation, 'hover'))
 
       &:active
-        +tools.elevation(map.get($button-elevation, 'active'))
+        @include tools.elevation(map.get($button-elevation, 'active'))
 
     &--flat
       box-shadow: none
@@ -228,8 +228,8 @@
 
   .v-btn__overlay,
   .v-btn__underlay
-    @include tools.absolute()
     pointer-events: none
+    @include tools.absolute()
 
   // VCard
   .v-btn

packages/vuetify/src/components/VChip/VChip.sass

@@ -72,12 +72,12 @@
     transition: $chip-filter-transition
 
   .v-chip__overlay
-    @include tools.absolute()
     background-color: currentColor
     border-radius: inherit
     pointer-events: none
     opacity: 0
     transition: opacity .2s ease-in-out
+    @include tools.absolute()
 
   .v-chip--disabled
     opacity: $chip-disabled-opacity

packages/vuetify/src/components/VColorPicker/VColorPicker.sass

@@ -8,8 +8,8 @@
     contain: content
 
     &.v-sheet
-      +tools.elevation($color-picker-elevation)
-      +tools.rounded($color-picker-border-radius)
+      @include tools.elevation($color-picker-elevation)
+      @include tools.rounded($color-picker-border-radius)
 
   // Element
   .v-color-picker__controls
@@ -19,7 +19,7 @@
 
   // Modifier
   .v-color-picker--flat
-    +tools.elevation(0)
+    @include tools.elevation(0)
 
     .v-color-picker__track:not(.v-input--is-disabled) .v-slider__thumb // High specificity
-      +tools.elevation(0)
+      @include tools.elevation(0)

packages/vuetify/src/components/VColorPicker/VColorPickerPreview.sass

@@ -6,9 +6,9 @@
     .v-slider-track__background
       background-color: transparent !important
 
-      +tools.ltr()
+      @include tools.ltr()
         background-image: linear-gradient(to right, transparent, var(--v-color-picker-color-hsv))
-      +tools.rtl()
+      @include tools.rtl()
         background-image: linear-gradient(to left, transparent, var(--v-color-picker-color-hsv))
 
       &::after
@@ -44,10 +44,10 @@
   .v-color-picker-preview__hue
     &:not(.v-input--is-disabled)
       .v-slider-track__background
-        +tools.ltr()
+        @include tools.ltr()
           background: linear-gradient(to right, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%)
 
-        +tools.rtl()
+        @include tools.rtl()
           background: linear-gradient(to left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%)
 
   .v-color-picker-preview__track

packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.sass

@@ -108,10 +108,10 @@
           min-height: $expansion-panel-active-title-min-height
 
   .v-expansion-panel__shadow
-    @include tools.absolute()
-    @include tools.elevation(2)
     border-radius: inherit
     z-index: -1
+    @include tools.absolute()
+    @include tools.elevation(2)
 
   .v-expansion-panel-title
     align-items: center
@@ -134,10 +134,10 @@
       @include tools.active-states('.v-expansion-panel-title__overlay')
 
   .v-expansion-panel-title__overlay
-    @include tools.absolute()
     background-color: currentColor
     border-radius: inherit
     opacity: 0
+    @include tools.absolute()
 
   .v-expansion-panel-title__icon
     display: inline-flex

packages/vuetify/src/components/VField/VField.sass

@@ -8,8 +8,6 @@
 @include tools.layer('components')
   /* region INPUT */
   .v-field
-    --v-theme-overlay-multiplier: 1
-
     display: grid
     grid-template-areas: "prepend-inner field clear append-inner"
     grid-template-columns: min-content minmax(0, 1fr) min-content min-content
@@ -22,17 +20,18 @@
     grid-area: control
     position: relative
 
-    &--disabled
-      opacity: var(--v-disabled-opacity)
-      pointer-events: none
-
+    --v-theme-overlay-multiplier: 1
     --v-field-padding-start: #{$field-control-padding-start}
     --v-field-padding-end: #{$field-control-padding-end}
     --v-field-padding-top: #{$field-control-padding-top}
     --v-field-padding-bottom: #{$field-control-padding-bottom}
     --v-field-input-padding-top: #{$field-input-padding-top}
     --v-field-input-padding-bottom: #{$field-input-padding-bottom}
 
+    &--disabled
+      opacity: var(--v-disabled-opacity)
+      pointer-events: none
+
     .v-chip
       --v-chip-height: #{$field-chip-height}
 
@@ -50,14 +49,12 @@
       background: $field-control-solo-background
       border-color: transparent
       color: $field-control-solo-color
-
       @include tools.elevation($field-control-solo-elevation)
 
     &--variant-solo-inverted
       background: $field-control-solo-background
       border-color: transparent
       color: $field-control-solo-inverted-color
-
       @include tools.elevation($field-control-solo-elevation)
 
       &.v-field--focused

packages/vuetify/src/components/VGrid/VGrid.sass

@@ -19,7 +19,7 @@
   //
   // Rows contain and clear the floats of your columns.
   .v-row
-    +make-row
+    @include make-row
 
     & + .v-row
       margin-top: settings.$grid-gutter * .5

packages/vuetify/src/components/VGrid/_mixins.sass

@@ -12,7 +12,7 @@
 // For each breakpoint, define the maximum width of the container in a media query
 @mixin make-container-max-widths($max-widths: settings.$container-max-widths, $breakpoints: settings.$grid-breakpoints)
   @each $breakpoint, $container-max-width in $max-widths
-    +tools.media-breakpoint-up($breakpoint, $breakpoints)
+    @include tools.media-breakpoint-up($breakpoint, $breakpoints)
       max-width: $container-max-width
 
 @mixin make-row($gutter: settings.$grid-gutter)
@@ -53,7 +53,7 @@
     .v-col#{$infix},
     .v-col#{$infix}-auto
       @extend %grid-column
-    +tools.media-breakpoint-up($breakpoint, $breakpoints)
+    @include tools.media-breakpoint-up($breakpoint, $breakpoints)
       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
       .v-col#{$infix}
         flex-basis: 0
@@ -65,10 +65,10 @@
         max-width: 100% // Reset earlier grid tiers
       @for $i from 1 through $columns
         .v-col#{$infix}-#{$i}
-          +make-col($i, $columns)
+          @include make-col($i, $columns)
       // `$columns - 1` because offsetting by the width of an entire row isn't possible
       @for $i from 0 through $columns - 1
         @if not ($infix == "" and $i == 0)
           // Avoid emitting useless .offset-0
           .offset#{$infix}-#{$i}
-            +make-col-offset($i, $columns)
+            @include make-col-offset($i, $columns)

packages/vuetify/src/components/VList/VListItem.sass

@@ -25,12 +25,12 @@
 
     @supports selector(:focus-visible)
       &::after
-        @include tools.absolute(true)
         pointer-events: none
         border: 2px solid currentColor
         border-radius: 4px
         opacity: 0
         transition: opacity .2s ease-in-out
+        @include tools.absolute(true)
 
       &:focus-visible::after
         opacity: calc(.15 * var(--v-theme-overlay-multiplier))

packages/vuetify/src/components/VOtpInput/VOtpInput.sass

@@ -5,13 +5,12 @@
 
 @include tools.layer('components')
   .v-otp-input
-    @include tools.rounded(4px)
-
     align-items: center
     display: flex
     justify-content: center
     padding: $otp-input-padding
     position: relative
+    @include tools.rounded(4px)
 
     .v-field
       height: 100%

packages/vuetify/src/components/VOverflowBtn/VOverflowBtn.sass

@@ -1,7 +1,7 @@
 @import './_variables.scss'
 
 // Theme
-+theme(v-overflow-btn) using ($material)
+@include theme(v-overflow-btn) using ($material)
   &#{&} > .v-input__control > .v-input__slot
     border-color: map-get($material, 'dividers')
 

packages/vuetify/src/components/VSelectionControl/VSelectionControl.sass

@@ -74,11 +74,11 @@
       opacity: 0
 
     &::before
-      @include tools.absolute(true)
       border-radius: 100%
       background-color: currentColor
       opacity: 0
       pointer-events: none
+      @include tools.absolute(true)
 
     &:hover::before
       opacity: calc(#{map.get(settings.$states, 'hover')} * var(--v-theme-overlay-multiplier))

packages/vuetify/src/components/VSkeletonLoader/VSkeletonLoader.sass

@@ -48,12 +48,11 @@
       position: relative
 
       &::after
-        @include tools.absolute(true)
-
         animation: $skeleton-loader-loading-animation
         background: $skeleton-loader-bone-background
         transform: $skeleton-loader-loading-transform
         z-index: 1
+        @include tools.absolute(true)
 
     &__avatar
       border-radius: 50%

packages/vuetify/src/components/VSlider/VSliderThumb.sass

@@ -106,9 +106,9 @@
     .v-slider-thumb__label
       bottom: $slider-thumb-label-offset
 
-      +tools.ltr()
+      @include tools.ltr()
         transform: translateX(-50%)
-      +tools.rtl()
+      @include tools.rtl()
         transform: translateX(50%)
 
       &::before

packages/vuetify/src/components/VStepper/VStepper.sass

@@ -4,23 +4,21 @@
 
 @include tools.layer('components')
   .v-stepper.v-sheet
+    overflow: hidden
     @include tools.elevation($stepper-elevation)
     @include tools.rounded($stepper-border-radius)
 
-    overflow: hidden
-
     &.v-stepper--flat
       @include tools.elevation(0)
 
   .v-stepper-header
-    @include tools.elevation($stepper-header-elevation)
-
     align-items: center
     display: flex
     position: relative
     overflow-x: auto
     justify-content: space-between
     z-index: 1
+    @include tools.elevation($stepper-header-elevation)
 
     .v-divider
       margin: $stepper-header-divider-margin

packages/vuetify/src/components/VStepper/VStepperItem.sass

@@ -90,5 +90,5 @@
 
   .v-stepper-item__overlay,
   .v-stepper-item__underlay
-    @include tools.absolute()
     pointer-events: none
+    @include tools.absolute()

packages/vuetify/src/components/VSwitch/VSwitch.sass

@@ -101,20 +101,20 @@
     .v-selection-control__input
       border-radius: 50%
       transition: $switch-control-input-transition
-      +tools.ltr()
+      position: absolute
+      @include tools.ltr()
         transform: translateX(-$switch-thumb-transform)
-      +tools.rtl()
+      @include tools.rtl()
         transform: translateX($switch-thumb-transform)
-      position: absolute
 
       .v-icon
         position: absolute
 
     .v-selection-control--dirty
       .v-selection-control__input
-        +tools.ltr()
+        @include tools.ltr()
           transform: translateX($switch-thumb-transform)
-        +tools.rtl()
+        @include tools.rtl()
           transform: translateX(-$switch-thumb-transform)
 
     &.v-switch--indeterminate
@@ -134,25 +134,25 @@
 
       .v-selection-control__wrapper
         transform: $switch-thumb-vertical-transform
-        
+
 @media (forced-colors: active)
   .v-switch
     .v-switch__loader
-      .v-progress-circular 
+      .v-progress-circular
         color: currentColor
 
     .v-switch__thumb
       background-color: buttontext
 
     .v-switch__track,
     .v-switch__thumb
-      border: 1px solid 
+      border: 1px solid
       color: buttontext
 
     &:not(.v-switch--loading):not(.v-input--disabled)
       .v-selection-control--dirty
         .v-switch__thumb
-          background-color: highlight 
+          background-color: highlight
 
     &:not(.v-input--disabled)
       .v-selection-control--dirty
@@ -188,4 +188,4 @@
       &.v-switch--inset,
       &.v-switch--indeterminate
         .v-switch__thumb
-          border-width: 0 
+          border-width: 0