diff --git a/package-lock.json b/package-lock.json
index 06e9fda615..65fd243ebf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12210,9 +12210,9 @@
       "dev": true
     },
     "sass": {
-      "version": "1.32.12",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.12.tgz",
-      "integrity": "sha512-zmXn03k3hN0KaiVTjohgkg98C3UowhL1/VSGdj4/VAAiMKGQOE80PFPxFP2Kyq0OUskPKcY5lImkhBKEHlypJA==",
+      "version": "1.34.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.34.0.tgz",
+      "integrity": "sha512-rHEN0BscqjUYuomUEaqq3BMgsXqQfkcMVR7UhscsAVub0/spUrZGBMxQXFS2kfiDsPLZw5yuU9iJEFNC2x38Qw==",
       "dev": true,
       "requires": {
         "chokidar": ">=3.0.0 <4.0.0"
diff --git a/package.json b/package.json
index a759fb82ca..793a3cd9cc 100644
--- a/package.json
+++ b/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",
diff --git a/src/css/components/_big-play.scss b/src/css/components/_big-play.scss
index 64d0352c65..22c4e6eeee 100644
--- a/src/css/components/_big-play.scss
+++ b/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,
diff --git a/src/css/components/_layout.scss b/src/css/components/_layout.scss
index e914568789..886c636637 100644
--- a/src/css/components/_layout.scss
+++ b/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
diff --git a/src/css/utilities/_linear-gradient.scss b/src/css/utilities/_linear-gradient.scss
index 4128a31834..29ff668ff0 100644
--- a/src/css/utilities/_linear-gradient.scss
+++ b/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));
   }