chore: Update sass and remove now deprecated / for division. (#7253)

Fixes #7244

package.json

@@ -142,7 +142,7 @@
     "rollup-plugin-node-resolve": "^4.2.4",
     "rollup-plugin-progress": "^1.1.2",
     "rollup-plugin-stub": "^1.2.0",
-    "sass": "^1.21.0",
+    "sass": "^1.34.0",
     "semver": "^5.7.0",
     "shelljs": "^0.8.3",
     "shx": "^0.3.2",

src/css/components/_big-play.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .video-js .vjs-big-play-button {
   font-size: 3em;
   line-height: $big-play-button--line-height;
@@ -30,8 +32,8 @@
 .vjs-big-play-centered .vjs-big-play-button {
   top: 50%;
   left: 50%;
-  margin-top: -($big-play-button--height / 2);
-  margin-left: -($big-play-button--width / 2);
+  margin-top: -(math.div($big-play-button--height, 2));
+  margin-left: -(math.div($big-play-button--width, 2));
 }
 
 .video-js:hover .vjs-big-play-button,

src/css/components/_layout.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .video-js {
   // display:inline-block would be closer to the video el's display:inline
   // but it results in flash reloading when going into fullscreen [#2205]
@@ -63,7 +65,7 @@
 // Fill the width of the containing element and use padding to create the
 // desired aspect ratio. Default to 16x9 unless another ratio is given.
 @mixin apply-aspect-ratio($width, $height) {
-  padding-top: 100% * ($height/$width);
+  padding-top: 100% * math.div($height, $width);
 }
 
 // Not including a default AR in vjs-fluid because it would override

src/css/utilities/_linear-gradient.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 // These functions and mixins taken from:
 //
 // "Building a linear-gradient Mixin in Sass" by Hugo Giraudel
@@ -12,10 +14,9 @@
 /// @return {Number} Converted angle
 @function convert-angle($value, $unit) {
   $convertable-units: deg grad turn rad;
-  $conversion-factors: 1 (10grad/9deg) (1turn/360deg) (3.1415926rad/180deg);
+  $conversion-factors: 1 math.div(10grad, 9deg) math.div(1turn, 360deg) math.div(3.1415926rad, 180deg);
   @if index($convertable-units, unit($value)) and index($convertable-units, $unit) {
-    @return $value
-             / nth($conversion-factors, index($convertable-units, unit($value)))
+    @return math.div($value, nth($conversion-factors, index($convertable-units, unit($value))))
              * nth($conversion-factors, index($convertable-units, $unit));
   }