From 4046415ca0da22c29924bcdaf7bcfd78a9036349 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Wed, 14 Jul 2021 12:00:40 -0700
Subject: [PATCH 1/5] Update sass version to 1.35.2 with fixes

- Updates sass module to 1.35.2 to correct 3 vulnerability warnings
- Removes / as a division operator, changes most / 2 to * 0.5

Two deprecation warnings remain that need to be updated to use

```
@use "sass:math";
math.div(numerator, denominator)
```

Warnings in:
	packages/block-library/src/freeform/editor.scss
	packages/block-library/src/gallery/style.scss

The @use command must be declared prior to any other rules and the way
we are building sass for the block-library the files are included and
also built stand-alone, so the @use requirement can't be satisfied.
---
 package-lock.json                             | 137 +++++++++++++++++-
 package.json                                  |   2 +-
 .../src/components/block-draggable/style.scss |   4 +-
 .../components/block-list/block.native.scss   |   4 +-
 .../components/block-list/style.native.scss   |   2 +-
 .../src/components/block-list/style.scss      |   2 +-
 .../src/components/block-mover/style.scss     |  10 +-
 .../components/block-styles/style.native.scss |   4 +-
 .../src/components/block-toolbar/style.scss   |   2 +-
 .../src/components/block-tools/style.scss     |  12 +-
 .../block-variation-picker/style.native.scss  |   4 +-
 .../button-block-appender/styles.native.scss  |   2 +-
 .../src/components/inserter/style.scss        |   2 +-
 .../src/components/link-control/style.scss    |  14 +-
 .../src/components/list-view/style.scss       |   8 +-
 .../media-placeholder/styles.native.scss      |   2 +-
 .../src/columns/editor.native.scss            |   2 +-
 packages/block-library/src/cover/editor.scss  |   2 +-
 packages/block-library/src/cover/style.scss   |   2 +-
 .../block-library/src/gallery/editor.scss     |   2 +-
 packages/block-library/src/gallery/style.scss |   2 +-
 .../block-library/src/navigation/editor.scss  |   4 +-
 .../block-library/src/pullquote/style.scss    |   2 +-
 .../src/social-link/editor.native.scss        |   2 +-
 .../src/social-links/editor.native.scss       |   2 +-
 packages/components/src/button/style.scss     |   4 +-
 .../src/circular-option-picker/style.scss     |   6 +-
 .../src/color-palette/style.native.scss       |   4 +-
 .../src/color-picker/style.native.scss        |   2 +-
 .../custom-gradient-picker/style.native.scss  |   2 +-
 .../components/src/form-toggle/style.scss     |   4 +-
 .../src/form-token-field/style.scss           |   2 +-
 .../src/mobile/audio-player/styles.scss       |   2 +-
 .../mobile/bottom-sheet/styles.native.scss    |   2 +-
 .../mobile/inserter-button/style.native.scss  |   4 +-
 .../src/mobile/picker/styles.native.scss      |   4 +-
 .../segmented-control/style.native.scss       |  10 +-
 .../components/src/resizable-box/style.scss   |  12 +-
 .../components/src/search-control/style.scss  |   2 +-
 .../components/src/toolbar-group/style.scss   |  12 +-
 .../src/components/header/style.scss          |   2 +-
 .../src/components/header/style.scss          |   2 +-
 .../format-library/src/link/modal.native.scss |   2 +-
 .../nux/src/components/dot-tip/style.scss     |  20 +--
 44 files changed, 227 insertions(+), 102 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f9434bdf389f9..3b902f9198dca 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24581,7 +24581,8 @@
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.1.tgz",
 			"integrity": "sha1-GdOGodntxufByF04iu28xW0zYC0=",
-			"dev": true
+			"dev": true,
+			"optional": true
 		},
 		"async-limiter": {
 			"version": "1.0.1",
@@ -25411,7 +25412,8 @@
 			"version": "1.13.0",
 			"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.0.tgz",
 			"integrity": "sha512-EgmjVLMn22z7eGGv3kcnHwSnJXmFHjISTY9E/S5lIcTD3Oxw05QTcBLNkJFzcb3cNueUdF/IN4U+d78V0zO8Hw==",
-			"dev": true
+			"dev": true,
+			"optional": true
 		},
 		"bindings": {
 			"version": "1.5.0",
@@ -26676,6 +26678,7 @@
 			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
 			"integrity": "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==",
 			"dev": true,
+			"optional": true,
 			"requires": {
 				"anymatch": "^2.0.0",
 				"async-each": "^1.0.1",
@@ -26706,7 +26709,8 @@
 					"version": "3.0.0",
 					"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
 					"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-					"dev": true
+					"dev": true,
+					"optional": true
 				}
 			}
 		},
@@ -36126,6 +36130,7 @@
 			"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
 			"integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=",
 			"dev": true,
+			"optional": true,
 			"requires": {
 				"binary-extensions": "^1.0.0"
 			}
@@ -52086,6 +52091,7 @@
 			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz",
 			"integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==",
 			"dev": true,
+			"optional": true,
 			"requires": {
 				"graceful-fs": "^4.1.11",
 				"micromatch": "^3.1.10",
@@ -53447,12 +53453,129 @@
 			}
 		},
 		"sass": {
-			"version": "1.26.12",
-			"resolved": "https://registry.npmjs.org/sass/-/sass-1.26.12.tgz",
-			"integrity": "sha512-hmSwtBOWoS9zwe0yAS+QmaseVCUELiGV22gXHDR7+9stEsVuEuxfY1GhC8XmUpC+Ir3Hwq7NxSUNbnmkznnF7g==",
+			"version": "1.35.2",
+			"resolved": "https://registry.npmjs.org/sass/-/sass-1.35.2.tgz",
+			"integrity": "sha512-jhO5KAR+AMxCEwIH3v+4zbB2WB0z67V1X0jbapfVwQQdjHZUGUyukpnoM6+iCMfsIUC016w9OPKQ5jrNOS9uXw==",
 			"dev": true,
 			"requires": {
-				"chokidar": ">=2.0.0 <4.0.0"
+				"chokidar": ">=3.0.0 <4.0.0"
+			},
+			"dependencies": {
+				"anymatch": {
+					"version": "3.1.2",
+					"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
+					"integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+					"dev": true,
+					"requires": {
+						"normalize-path": "^3.0.0",
+						"picomatch": "^2.0.4"
+					}
+				},
+				"binary-extensions": {
+					"version": "2.2.0",
+					"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+					"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+					"dev": true
+				},
+				"braces": {
+					"version": "3.0.2",
+					"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+					"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+					"dev": true,
+					"requires": {
+						"fill-range": "^7.0.1"
+					}
+				},
+				"chokidar": {
+					"version": "3.5.2",
+					"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
+					"integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
+					"dev": true,
+					"requires": {
+						"anymatch": "~3.1.2",
+						"braces": "~3.0.2",
+						"fsevents": "~2.3.2",
+						"glob-parent": "~5.1.2",
+						"is-binary-path": "~2.1.0",
+						"is-glob": "~4.0.1",
+						"normalize-path": "~3.0.0",
+						"readdirp": "~3.6.0"
+					}
+				},
+				"fill-range": {
+					"version": "7.0.1",
+					"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+					"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+					"dev": true,
+					"requires": {
+						"to-regex-range": "^5.0.1"
+					}
+				},
+				"glob-parent": {
+					"version": "5.1.2",
+					"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+					"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+					"dev": true,
+					"requires": {
+						"is-glob": "^4.0.1"
+					}
+				},
+				"is-binary-path": {
+					"version": "2.1.0",
+					"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+					"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+					"dev": true,
+					"requires": {
+						"binary-extensions": "^2.0.0"
+					}
+				},
+				"is-glob": {
+					"version": "4.0.1",
+					"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+					"integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+					"dev": true,
+					"requires": {
+						"is-extglob": "^2.1.1"
+					}
+				},
+				"is-number": {
+					"version": "7.0.0",
+					"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+					"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+					"dev": true
+				},
+				"normalize-path": {
+					"version": "3.0.0",
+					"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+					"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+					"dev": true
+				},
+				"readdirp": {
+					"version": "3.6.0",
+					"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+					"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+					"dev": true,
+					"requires": {
+						"picomatch": "^2.2.1"
+					},
+					"dependencies": {
+						"picomatch": {
+							"version": "2.3.0",
+							"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
+							"integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
+							"dev": true
+						}
+					}
+				},
+				"to-regex-range": {
+					"version": "5.0.1",
+					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+					"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+					"dev": true,
+					"requires": {
+						"is-number": "^7.0.0"
+					}
+				}
 			}
 		},
 		"sass-loader": {
diff --git a/package.json b/package.json
index 353062288db8c..a344c25fb82a6 100644
--- a/package.json
+++ b/package.json
@@ -200,7 +200,7 @@
 		"react-test-renderer": "17.0.1",
 		"rimraf": "3.0.2",
 		"rtlcss": "2.6.2",
-		"sass": "1.26.12",
+		"sass": "1.35.2",
 		"sass-loader": "10.1.1",
 		"semver": "7.3.2",
 		"simple-git": "^2.35.0",
diff --git a/packages/block-editor/src/components/block-draggable/style.scss b/packages/block-editor/src/components/block-draggable/style.scss
index b33fced9af2ab..618e17dc2fa95 100644
--- a/packages/block-editor/src/components/block-draggable/style.scss
+++ b/packages/block-editor/src/components/block-draggable/style.scss
@@ -1,7 +1,7 @@
 .block-editor-block-draggable-chip-wrapper {
 	position: absolute;
 	// Offset position so that cursor is centered over the drag handle.
-	top: -#{$block-toolbar-height / 2};
+	top: -#{$block-toolbar-height * 0.5};
 	left: 0;
 }
 
@@ -25,7 +25,7 @@
 		justify-content: flex-start;
 
 		> .components-flex__item {
-			margin-right: $grid-unit-15 / 2;
+			margin-right: $grid-unit-15 * 0.5;
 
 			&:last-child {
 				margin-right: 0;
diff --git a/packages/block-editor/src/components/block-list/block.native.scss b/packages/block-editor/src/components/block-list/block.native.scss
index c86f81c5bc7dd..78905de5bd733 100644
--- a/packages/block-editor/src/components/block-list/block.native.scss
+++ b/packages/block-editor/src/components/block-list/block.native.scss
@@ -24,8 +24,8 @@
 }
 
 .containerBorderFullWidth {
-	left: -$solid-border-space / 2;
-	right: -$solid-border-space / 2;
+	left: -$solid-border-space * 0.5;
+	right: -$solid-border-space * 0.5;
 }
 
 .dimmed {
diff --git a/packages/block-editor/src/components/block-list/style.native.scss b/packages/block-editor/src/components/block-list/style.native.scss
index 0ea60d5be690c..fe63d30b4d0b2 100644
--- a/packages/block-editor/src/components/block-list/style.native.scss
+++ b/packages/block-editor/src/components/block-list/style.native.scss
@@ -77,7 +77,7 @@
 }
 
 .innerAppender {
-	margin: $block-edge-to-content / 2;
+	margin: $block-edge-to-content * 0.5;
 }
 
 .blockBorder {
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 2e150322c1762..d091c51fc40e0 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -90,7 +90,7 @@
 				box-shadow 0.1s linear;
 			right: 0;
 			left: 0;
-			top: -$default-block-margin / 2;
+			top: -$default-block-margin * 0.5;
 			border-radius: $radius-block-ui;
 			border-top: 4px solid $gray-400;
 		}
diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss
index b1a54d739ca57..59bdee240fc53 100644
--- a/packages/block-editor/src/components/block-mover/style.scss
+++ b/packages/block-editor/src/components/block-mover/style.scss
@@ -38,14 +38,14 @@
 
 		@include break-small() {
 			// The !important modifier should be removed when https://github.com/WordPress/gutenberg/issues/24898 refactors the spacing grid.
-			height: $block-toolbar-height/2;
-			width: $block-toolbar-height - $grid-unit-15 / 2;
+			height: $block-toolbar-height*0.5;
+			width: $block-toolbar-height - $grid-unit-15 * 0.5;
 			padding-right: $grid-unit-15 - $border-width !important;
-			padding-left: $grid-unit-15 / 2 !important;
+			padding-left: $grid-unit-15 * 0.5 !important;
 
 			// Extra specificity to override standard toolbar button styles.
 			&.block-editor-block-mover-button {
-				min-width: $block-toolbar-height - $grid-unit-15 / 2;
+				min-width: $block-toolbar-height - $grid-unit-15 * 0.5;
 			}
 		}
 
@@ -106,7 +106,7 @@
 		.block-editor-block-mover-button.has-icon {
 			height: $block-toolbar-height;
 			// Overrides .components-toolbar-group styles
-			width: $block-toolbar-height / 2;
+			width: $block-toolbar-height * 0.5;
 			padding-left: 0;
 			padding-right: 0;
 
diff --git a/packages/block-editor/src/components/block-styles/style.native.scss b/packages/block-editor/src/components/block-styles/style.native.scss
index 709c8b286f93f..d21c43ea3eae0 100644
--- a/packages/block-editor/src/components/block-styles/style.native.scss
+++ b/packages/block-editor/src/components/block-styles/style.native.scss
@@ -11,11 +11,11 @@ $image-height: 64px;
 
 .imageWrapper {
 	height: $image-height;
-	margin-bottom: $grid-unit / 2;
+	margin-bottom: $grid-unit * 0.5;
 }
 
 .rounded {
-	border-radius: $image-height / 2;
+	border-radius: $image-height * 0.5;
 	overflow: hidden;
 }
 
diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index 6a747fa59cd8a..1f7199363fa2b 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -89,7 +89,7 @@
 
 	// Compensate for width of block switcher.
 	.block-editor-block-mover {
-		margin-left: -$grid-unit-15 / 2;
+		margin-left: -$grid-unit-15 * 0.5;
 	}
 }
 
diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss
index 072b085f387bc..5ad272a0369c8 100644
--- a/packages/block-editor/src/components/block-tools/style.scss
+++ b/packages/block-editor/src/components/block-tools/style.scss
@@ -42,8 +42,8 @@
 
 	justify-content: center;
 
-	top: calc(50% - #{  $button-size-small / 2 });
-	left: calc(50% - #{  $button-size-small / 2 });
+	top: calc(50% - #{  $button-size-small * 0.5 });
+	left: calc(50% - #{  $button-size-small * 0.5 });
 }
 
 .block-editor-block-list__block-popover-inserter {
@@ -150,11 +150,11 @@
 
 	// Extra specificity to override standard toolbar button styles.
 	.block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button {
-		min-width: $block-toolbar-height/2;
-		width: $block-toolbar-height/2;
+		min-width: $block-toolbar-height*0.5;
+		width: $block-toolbar-height*0.5;
 
 		svg {
-			min-width: $block-toolbar-height/2;
+			min-width: $block-toolbar-height*0.5;
 		}
 	}
 }
@@ -204,7 +204,7 @@
 		align-items: center;
 
 		> .components-flex__item {
-			margin-right: $grid-unit-15 / 2;
+			margin-right: $grid-unit-15 * 0.5;
 		}
 	}
 	.components-button.has-icon.block-selection-button_drag-handle {
diff --git a/packages/block-editor/src/components/block-variation-picker/style.native.scss b/packages/block-editor/src/components/block-variation-picker/style.native.scss
index 8c86b4506cc4b..cfee074a24a98 100644
--- a/packages/block-editor/src/components/block-variation-picker/style.native.scss
+++ b/packages/block-editor/src/components/block-variation-picker/style.native.scss
@@ -1,8 +1,8 @@
 .contentContainerStyle {
 	flex-direction: row;
 	padding-bottom: $grid-unit-15;
-	padding-left: $grid-unit-20 / 2;
-	padding-right: $grid-unit-20 / 2;
+	padding-left: $grid-unit-20 * 0.5;
+	padding-right: $grid-unit-20 * 0.5;
 }
 
 .containerStyle {
diff --git a/packages/block-editor/src/components/button-block-appender/styles.native.scss b/packages/block-editor/src/components/button-block-appender/styles.native.scss
index cfa1985878f77..7faa8953a4ef0 100644
--- a/packages/block-editor/src/components/button-block-appender/styles.native.scss
+++ b/packages/block-editor/src/components/button-block-appender/styles.native.scss
@@ -27,7 +27,7 @@
 .addBlockButton {
 	color: $white;
 	background-color: $gray;
-	border-radius: $button-size-small / 2;
+	border-radius: $button-size-small * 0.5;
 	overflow: hidden;
 	size: $button-size-small;
 }
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index 8792dfe969909..399b9481d27b1 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -106,7 +106,7 @@ $block-inserter-tabs-height: 44px;
 	z-index: z-index(".block-editor-inserter__search");
 
 	.components-search-control__icon {
-		right: $grid-unit-10 + ($grid-unit-60 - $icon-size) / 2;
+		right: $grid-unit-10 + ($grid-unit-60 - $icon-size) * 0.5;
 	}
 }
 
diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss
index 3d5d5941bb774..e6976e47a16c7 100644
--- a/packages/block-editor/src/components/link-control/style.scss
+++ b/packages/block-editor/src/components/link-control/style.scss
@@ -51,7 +51,7 @@ $preview-image-height: 140px;
 }
 
 .block-editor-link-control__search-error {
-	margin: -$grid-unit-20/2 $grid-unit-20 $grid-unit-20; // negative margin to bring the error a bit closer to the button
+	margin: -$grid-unit-20*0.5 $grid-unit-20 $grid-unit-20; // negative margin to bring the error a bit closer to the button
 }
 
 .block-editor-link-control__search-actions {
@@ -68,8 +68,8 @@ $preview-image-height: 140px;
 	 *  - Horizontally, pad to the minimum of: default input padding, or the
 	 *    equivalent of the vertical padding.
 	 */
-	top: $grid-unit-20 + 1px + ( ( 40px - $button-size ) / 2 );
-	right: $grid-unit-20 + 1px + min($grid-unit-10, ( 40px - $button-size ) / 2);
+	top: $grid-unit-20 + 1px + ( ( 40px - $button-size ) * 0.5 );
+	right: $grid-unit-20 + 1px + min($grid-unit-10, ( 40px - $button-size ) * 0.5);
 }
 
 .components-button .block-editor-link-control__search-submit .has-icon {
@@ -92,7 +92,7 @@ $preview-image-height: 140px;
 	}
 
 	&::before {
-		height: $grid-unit-20/2;
+		height: $grid-unit-20*0.5;
 		top: 0;
 		bottom: auto;
 	}
@@ -112,7 +112,7 @@ $preview-image-height: 140px;
 
 .block-editor-link-control__search-results {
 	margin: 0;
-	padding: $grid-unit-20/2 $grid-unit-20 $grid-unit-20/2;
+	padding: $grid-unit-20*0.5 $grid-unit-20 $grid-unit-20*0.5;
 	max-height: 200px;
 	overflow-y: auto; // allow results list to scroll
 
@@ -434,8 +434,8 @@ $preview-image-height: 140px;
 		 *    then artificially create spacing that mimics as if the spinner
 		 *    were center-padded to the same width as an icon button.
 		 */
-		top: $grid-unit-20 + 1px + ( ( 40px - $spinner-size ) / 2 );
-		right: $grid-unit-20 + 1px + ( $button-size * $block-editor-link-control-number-of-actions ) + ( ( $button-size - $spinner-size ) / 2 );
+		top: $grid-unit-20 + 1px + ( ( 40px - $spinner-size ) * 0.5 );
+		right: $grid-unit-20 + 1px + ( $button-size * $block-editor-link-control-number-of-actions ) + ( ( $button-size - $spinner-size ) * 0.5 );
 	}
 }
 
diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index 610edb31d7b1c..a8f766af5bae4 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -6,7 +6,7 @@
 
 	// Move upwards when in modal.
 	.components-modal__content & {
-		margin: (-$grid-unit-15) (-$grid-unit-15 / 2) 0;
+		margin: (-$grid-unit-15) (-$grid-unit-15 * 0.5) 0;
 		width: calc(100% + #{ $grid-unit-15 });
 	}
 }
@@ -65,7 +65,7 @@
 		align-items: center;
 		width: 100%;
 		height: auto;
-		padding: ($grid-unit-15 / 2) $grid-unit-15 ($grid-unit-15 / 2) 0;
+		padding: ($grid-unit-15 * 0.5) $grid-unit-15 ($grid-unit-15 * 0.5) 0;
 		text-align: left;
 		color: $gray-900;
 		border-radius: 2px;
@@ -169,7 +169,7 @@
 		}
 
 		&.is-up-button {
-			margin-top: -$grid-unit-15 / 2;
+			margin-top: -$grid-unit-15 * 0.5;
 			align-items: flex-end;
 			svg {
 				bottom: -$grid-unit-05;
@@ -177,7 +177,7 @@
 		}
 
 		&.is-down-button {
-			margin-bottom: -$grid-unit-15 / 2;
+			margin-bottom: -$grid-unit-15 * 0.5;
 			align-items: flex-start;
 			svg {
 				top: -$grid-unit-05;
diff --git a/packages/block-editor/src/components/media-placeholder/styles.native.scss b/packages/block-editor/src/components/media-placeholder/styles.native.scss
index ffb0135b66d16..708c2f07755e3 100644
--- a/packages/block-editor/src/components/media-placeholder/styles.native.scss
+++ b/packages/block-editor/src/components/media-placeholder/styles.native.scss
@@ -62,7 +62,7 @@
 .addMediaButton {
 	color: $white;
 	background-color: $toolbar-button;
-	border-radius: $button-size-small / 2;
+	border-radius: $button-size-small * 0.5;
 	overflow: hidden;
 	size: $button-size-small;
 }
diff --git a/packages/block-library/src/columns/editor.native.scss b/packages/block-library/src/columns/editor.native.scss
index 3010c25a3fd8f..e65fad2c17bb7 100644
--- a/packages/block-library/src/columns/editor.native.scss
+++ b/packages/block-library/src/columns/editor.native.scss
@@ -8,7 +8,7 @@
 }
 
 .columnMargin {
-	margin: $block-edge-to-content / 2;
+	margin: $block-edge-to-content * 0.5;
 }
 
 .columnAppender {
diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
index 659e236081e8e..a2a0455b3d30e 100644
--- a/packages/block-library/src/cover/editor.scss
+++ b/packages/block-library/src/cover/editor.scss
@@ -50,7 +50,7 @@
 
 [data-align="left"] > .wp-block-cover,
 [data-align="right"] > .wp-block-cover {
-	max-width: $content-width / 2;
+	max-width: $content-width * 0.5;
 	width: 100%;
 }
 
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index 05d5fe58a7655..43155f41d9ebf 100644
--- a/packages/block-library/src/cover/style.scss
+++ b/packages/block-library/src/cover/style.scss
@@ -76,7 +76,7 @@
 	// Apply max-width to floated items that have no intrinsic width
 	&.alignleft,
 	&.alignright {
-		max-width: $content-width / 2;
+		max-width: $content-width * 0.5;
 		width: 100%;
 	}
 
diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
index 9a07be2a23d73..739a7099b764b 100644
--- a/packages/block-library/src/gallery/editor.scss
+++ b/packages/block-library/src/gallery/editor.scss
@@ -95,7 +95,7 @@ figure.wp-block-gallery {
 		// Use smaller buttons to fit when there are many columns.
 		.columns-7 &,
 		.columns-8 & {
-			padding: $grid-unit-05 / 2;
+			padding: $grid-unit-05 * 0.5;
 		}
 	}
 
diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss
index 6f460da4bcb88..17aedd88494e6 100644
--- a/packages/block-library/src/gallery/style.scss
+++ b/packages/block-library/src/gallery/style.scss
@@ -129,7 +129,7 @@
 	// Apply max-width to floated items that have no intrinsic width.
 	&.alignleft,
 	&.alignright {
-		max-width: $content-width / 2;
+		max-width: $content-width * 0.5;
 		width: 100%;
 	}
 
diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index 8e3a0240f62dc..e4a8194e03529 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -115,7 +115,7 @@ $colors-selector-size: 22px;
 		margin-right: auto;
 
 		// colors-selector - selection status.
-		border-radius: $colors-selector-size / 2;
+		border-radius: $colors-selector-size * 0.5;
 		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
 
 		width: $colors-selector-size;
@@ -353,7 +353,7 @@ $color-control-label-height: 20px;
 	font-family: $default-font;
 
 	.components-button.components-dropdown-menu__toggle.has-icon {
-		padding: ($grid-unit-15 / 2) $grid-unit-05 ($grid-unit-15 / 2) $grid-unit-15;
+		padding: ($grid-unit-15 * 0.5) $grid-unit-05 ($grid-unit-15 * 0.5) $grid-unit-15;
 		display: flex;
 		flex-direction: row-reverse; // This puts the chevron, which is hidden from screen readers, on the right.
 	}
diff --git a/packages/block-library/src/pullquote/style.scss b/packages/block-library/src/pullquote/style.scss
index 7a260d0dff26f..002a828a92369 100644
--- a/packages/block-library/src/pullquote/style.scss
+++ b/packages/block-library/src/pullquote/style.scss
@@ -5,7 +5,7 @@
 
 	&.alignleft,
 	&.alignright {
-		max-width: $content-width / 2;
+		max-width: $content-width * 0.5;
 
 		p {
 			font-size: 1.25em;
diff --git a/packages/block-library/src/social-link/editor.native.scss b/packages/block-library/src/social-link/editor.native.scss
index 8ba00f70b4191..be0919d2c33fb 100644
--- a/packages/block-library/src/social-link/editor.native.scss
+++ b/packages/block-library/src/social-link/editor.native.scss
@@ -8,7 +8,7 @@
 .iconContainer {
 	height: $button-size;
 	width: $button-size;
-	border-radius: $button-size / 2;
+	border-radius: $button-size * 0.5;
 	align-items: center;
 	justify-content: center;
 }
diff --git a/packages/block-library/src/social-links/editor.native.scss b/packages/block-library/src/social-links/editor.native.scss
index 14a2c72be16c2..cfba35769c719 100644
--- a/packages/block-library/src/social-links/editor.native.scss
+++ b/packages/block-library/src/social-links/editor.native.scss
@@ -6,7 +6,7 @@
 	width: $button-size;
 	height: $button-size;
 	background-color: $light-ultra-dim;
-	border-radius: $button-size / 2;
+	border-radius: $button-size * 0.5;
 	margin-right: 4 * $block-selected-margin;
 	margin-bottom: 2 * $block-selected-margin;
 }
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index 8a00e365cd38f..bb6910496a059 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -154,7 +154,7 @@
 		white-space: nowrap;
 		color: var(--wp-admin-theme-color);
 		background: transparent;
-		padding: $grid-unit-15 / 2; // This reduces the horizontal padding on tertiary/text buttons, so as to space them optically.
+		padding: $grid-unit-15 * 0.5; // This reduces the horizontal padding on tertiary/text buttons, so as to space them optically.
 
 		.dashicon {
 			display: inline-block;
@@ -163,7 +163,7 @@
 
 		// Pull left if the tertiary button stands alone after a description, so as to vertically align with items above.
 		p + & {
-			margin-left: -($grid-unit-15 / 2);
+			margin-left: -($grid-unit-15 * 0.5);
 		}
 	}
 
diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss
index 353a432dda663..49bd4a34298f4 100644
--- a/packages/components/src/circular-option-picker/style.scss
+++ b/packages/components/src/circular-option-picker/style.scss
@@ -63,14 +63,14 @@ $color-palette-circle-spacing: 12px;
 	border: none;
 	border-radius: 50%;
 	background: transparent;
-	box-shadow: inset 0 0 0 ($color-palette-circle-size / 2);
+	box-shadow: inset 0 0 0 ($color-palette-circle-size * 0.5);
 	transition: 100ms box-shadow ease;
 	@include reduce-motion("transition");
 	cursor: pointer;
 
 	&:hover {
 		// Override default button hover style.
-		box-shadow: inset 0 0 0 ($color-palette-circle-size / 2) !important;
+		box-shadow: inset 0 0 0 ($color-palette-circle-size * 0.5) !important;
 	}
 
 	&.is-pressed {
@@ -118,7 +118,7 @@ $color-palette-circle-spacing: 12px;
 
 	&.components-button:focus {
 		background-color: transparent;
-		box-shadow: inset 0 0 0 ($color-palette-circle-size / 2);
+		box-shadow: inset 0 0 0 ($color-palette-circle-size * 0.5);
 		outline: none;
 	}
 }
diff --git a/packages/components/src/color-palette/style.native.scss b/packages/components/src/color-palette/style.native.scss
index f23bbae26f65e..3343dda21303a 100644
--- a/packages/components/src/color-palette/style.native.scss
+++ b/packages/components/src/color-palette/style.native.scss
@@ -8,10 +8,10 @@
 }
 
 .verticalSeparator {
-	border-width: $border-width / 2;
+	border-width: $border-width * 0.5;
 	border-color: $light-gray-400;
 	height: 38px;
-	margin-right: $grid-unit-20 / 2;
+	margin-right: $grid-unit-20 * 0.5;
 	align-self: center;
 }
 
diff --git a/packages/components/src/color-picker/style.native.scss b/packages/components/src/color-picker/style.native.scss
index 86fe28fd92814..9932830e4e313 100644
--- a/packages/components/src/color-picker/style.native.scss
+++ b/packages/components/src/color-picker/style.native.scss
@@ -55,7 +55,7 @@
 
 .picker {
 	padding: $grid-unit-20;
-	border-radius: $grid-unit-20 / 2;
+	border-radius: $grid-unit-20 * 0.5;
 	height: 200px;
 }
 
diff --git a/packages/components/src/custom-gradient-picker/style.native.scss b/packages/components/src/custom-gradient-picker/style.native.scss
index 0182c37cd853b..3d7c35050d151 100644
--- a/packages/components/src/custom-gradient-picker/style.native.scss
+++ b/packages/components/src/custom-gradient-picker/style.native.scss
@@ -1,3 +1,3 @@
 .angleControl {
-	padding-top: $grid-unit-20 / 2;
+	padding-top: $grid-unit-20 * 0.5;
 }
diff --git a/packages/components/src/form-toggle/style.scss b/packages/components/src/form-toggle/style.scss
index d4b74aaa1f4f5..5e24548d80dd1 100644
--- a/packages/components/src/form-toggle/style.scss
+++ b/packages/components/src/form-toggle/style.scss
@@ -16,7 +16,7 @@ $toggle-border-width: 1px;
 		border: $toggle-border-width solid $gray-900;
 		width: $toggle-width;
 		height: $toggle-height;
-		border-radius: $toggle-height / 2;
+		border-radius: $toggle-height * 0.5;
 		transition: 0.2s background ease;
 		@include reduce-motion("transition");
 	}
@@ -40,7 +40,7 @@ $toggle-border-width: 1px;
 	&.is-checked .components-form-toggle__track {
 		background-color: var(--wp-admin-theme-color);
 		border: $toggle-border-width solid var(--wp-admin-theme-color);
-		border: #{ $toggle-height / 2 } solid transparent; // Expand the border to fake a solid in Windows High Contrast Mode.
+		border: #{ $toggle-height * 0.5 } solid transparent; // Expand the border to fake a solid in Windows High Contrast Mode.
 	}
 
 	.components-form-toggle__input:focus + .components-form-toggle__track {
diff --git a/packages/components/src/form-token-field/style.scss b/packages/components/src/form-token-field/style.scss
index c2942d5c2741f..8cd31d6420d7e 100644
--- a/packages/components/src/form-token-field/style.scss
+++ b/packages/components/src/form-token-field/style.scss
@@ -5,7 +5,7 @@
 	align-items: center;
 	width: 100%;
 	margin: 0 0 $grid-unit-10 0;
-	padding: $grid-unit-05/2 $grid-unit-05;
+	padding: $grid-unit-05*0.5 $grid-unit-05;
 	cursor: text;
 
 
diff --git a/packages/components/src/mobile/audio-player/styles.scss b/packages/components/src/mobile/audio-player/styles.scss
index 6dbdb7c09c5f5..8710c25a9300d 100644
--- a/packages/components/src/mobile/audio-player/styles.scss
+++ b/packages/components/src/mobile/audio-player/styles.scss
@@ -12,7 +12,7 @@
 @mixin circle($width) {
 	width: $width;
 	height: $width;
-	border-radius: $width/2;
+	border-radius: $width*0.5;
 }
 
 .iconContainer {
diff --git a/packages/components/src/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss
index 70c2b40997a41..fcb17feedf0fc 100644
--- a/packages/components/src/mobile/bottom-sheet/styles.native.scss
+++ b/packages/components/src/mobile/bottom-sheet/styles.native.scss
@@ -27,7 +27,7 @@
 }
 
 .emptyHeader {
-	margin-top: $grid-unit-20 / 2;
+	margin-top: $grid-unit-20 * 0.5;
 }
 
 .background {
diff --git a/packages/components/src/mobile/inserter-button/style.native.scss b/packages/components/src/mobile/inserter-button/style.native.scss
index c73f535eecf9f..c8adb8624aec7 100644
--- a/packages/components/src/mobile/inserter-button/style.native.scss
+++ b/packages/components/src/mobile/inserter-button/style.native.scss
@@ -61,8 +61,8 @@
 	flex-direction: column;
 	justify-content: flex-start;
 	align-items: center;
-	padding-left: $grid-unit-20 / 2;
-	padding-right: $grid-unit-20 / 2;
+	padding-left: $grid-unit-20 * 0.5;
+	padding-right: $grid-unit-20 * 0.5;
 	padding-top: 0;
 	padding-bottom: 0;
 }
diff --git a/packages/components/src/mobile/picker/styles.native.scss b/packages/components/src/mobile/picker/styles.native.scss
index f2da6f5052474..0e3bc40cd388e 100644
--- a/packages/components/src/mobile/picker/styles.native.scss
+++ b/packages/components/src/mobile/picker/styles.native.scss
@@ -1,6 +1,6 @@
 .separator {
-	margin-top: $grid-unit-20 / 2;
-	margin-bottom: $grid-unit-20 / 2;
+	margin-top: $grid-unit-20 * 0.5;
+	margin-bottom: $grid-unit-20 * 0.5;
 	margin-left: -$grid-unit-20;
 	margin-right: -$grid-unit-20;
 	height: $border-width;
diff --git a/packages/components/src/mobile/segmented-control/style.native.scss b/packages/components/src/mobile/segmented-control/style.native.scss
index f7a5ed392dba7..e09cb5caf6daa 100644
--- a/packages/components/src/mobile/segmented-control/style.native.scss
+++ b/packages/components/src/mobile/segmented-control/style.native.scss
@@ -1,12 +1,12 @@
 $container-height: 32px;
 $segment-height: 28px;
 $segment-spacing: 2px;
-$border-width-ios: $border-width / 2;
+$border-width-ios: $border-width * 0.5;
 $border-width-android: $border-width;
 $border-radius-ios: 7px;
 
 .segment {
-	border-radius: $segment-height / 2;
+	border-radius: $segment-height * 0.5;
 	padding: 6px $grid-unit-20;
 	align-items: center;
 	justify-content: center;
@@ -38,7 +38,7 @@ $border-radius-ios: 7px;
 .container {
 	min-height: $container-height;
 	background-color: $light-ultra-dim;
-	border-radius: $container-height / 2;
+	border-radius: $container-height * 0.5;
 	align-items: center;
 	flex-direction: row;
 	align-self: center;
@@ -60,7 +60,7 @@ $border-radius-ios: 7px;
 	position: absolute;
 	min-height: $segment-height - 2 * $border-width-ios;
 	border-width: $border-width;
-	border-radius: $container-height / 2;
+	border-radius: $container-height * 0.5;
 	border-color: $light-ultra-dim;
 }
 
@@ -91,7 +91,7 @@ $border-radius-ios: 7px;
 .row {
 	flex-direction: row;
 	align-items: center;
-	padding: $grid-unit-20 / 2 $grid-unit-20;
+	padding: $grid-unit-20 * 0.5 $grid-unit-20;
 }
 
 .flex {
diff --git a/packages/components/src/resizable-box/style.scss b/packages/components/src/resizable-box/style.scss
index f1b05debb8305..e6150ddf1e139 100644
--- a/packages/components/src/resizable-box/style.scss
+++ b/packages/components/src/resizable-box/style.scss
@@ -28,8 +28,8 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 	background: $white;
 	cursor: inherit;
 	position: absolute;
-	top: calc(50% - #{ceil($resize-handler-size / 2)});
-	right: calc(50% - #{ceil($resize-handler-size / 2)});
+	top: calc(50% - #{ceil($resize-handler-size * 0.5)});
+	right: calc(50% - #{ceil($resize-handler-size * 0.5)});
 }
 
 // This is the "visible" resize handle for side handles - the line
@@ -143,18 +143,18 @@ See https://bugs.webkit.org/show_bug.cgi?id=187903. */
 
 /*!rtl:begin:ignore*/
 .components-resizable-box__handle-right {
-	right: calc(#{$resize-handler-container-size / 2} * -1);
+	right: calc(#{$resize-handler-container-size * 0.5} * -1);
 }
 
 .components-resizable-box__handle-left {
-	left: calc(#{$resize-handler-container-size / 2} * -1);
+	left: calc(#{$resize-handler-container-size * 0.5} * -1);
 }
 
 .components-resizable-box__handle-top {
-	top: calc(#{$resize-handler-container-size / 2} * -1);
+	top: calc(#{$resize-handler-container-size * 0.5} * -1);
 }
 
 .components-resizable-box__handle-bottom {
-	bottom: calc(#{$resize-handler-container-size / 2} * -1);
+	bottom: calc(#{$resize-handler-container-size * 0.5} * -1);
 }
 /*!rtl:end:ignore*/
diff --git a/packages/components/src/search-control/style.scss b/packages/components/src/search-control/style.scss
index 247b726fc9dd9..8ee799bcf99c8 100644
--- a/packages/components/src/search-control/style.scss
+++ b/packages/components/src/search-control/style.scss
@@ -37,7 +37,7 @@
 .components-search-control__icon {
 	position: absolute;
 	top: 0;
-	right: ( $grid-unit-60 - $icon-size ) / 2;
+	right: ( $grid-unit-60 - $icon-size ) * 0.5;
 	bottom: 0;
 	display: flex;
 	align-items: center;
diff --git a/packages/components/src/toolbar-group/style.scss b/packages/components/src/toolbar-group/style.scss
index dc1152e6794e0..977d7ca51d9f0 100644
--- a/packages/components/src/toolbar-group/style.scss
+++ b/packages/components/src/toolbar-group/style.scss
@@ -93,9 +93,9 @@ div.components-toolbar {
 	> .components-button:first-child,
 	> div:first-child > .components-button,
 	> .components-dropdown:first-child .components-button {
-		min-width: $block-toolbar-height - $grid-unit-15 / 2;
+		min-width: $block-toolbar-height - $grid-unit-15 * 0.5;
 		padding-left: $grid-unit-15 - $border-width;
-		padding-right: $grid-unit-15 / 2;
+		padding-right: $grid-unit-15 * 0.5;
 
 		&::before {
 			left: $grid-unit-10;
@@ -109,8 +109,8 @@ div.components-toolbar {
 	> div > .components-button,
 	> .components-dropdown .components-button {
 		min-width: $block-toolbar-height - $grid-unit-15;
-		padding-left: $grid-unit-15 / 2; // 6px.
-		padding-right: $grid-unit-15 / 2;
+		padding-left: $grid-unit-15 * 0.5; // 6px.
+		padding-right: $grid-unit-15 * 0.5;
 
 		svg {
 			min-width: $button-size-small; // This is the optimal icon size, and we size the whole button after this.
@@ -127,8 +127,8 @@ div.components-toolbar {
 	> .components-button:last-child,
 	> div:last-child > .components-button,
 	> .components-dropdown:last-child .components-button {
-		min-width: $block-toolbar-height - $grid-unit-15 / 2;
-		padding-left: $grid-unit-15 / 2;
+		min-width: $block-toolbar-height - $grid-unit-15 * 0.5;
+		padding-left: $grid-unit-15 * 0.5;
 		padding-right: $grid-unit-15 - $border-width;
 
 		&::before {
diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
index ef53c3a4d39f9..1ec7871c96c71 100644
--- a/packages/edit-post/src/components/header/style.scss
+++ b/packages/edit-post/src/components/header/style.scss
@@ -70,7 +70,7 @@
 
 	.editor-post-saved-state,
 	.components-button.is-tertiary {
-		padding: 0 #{ $grid-unit-15 / 2 };
+		padding: 0 #{ $grid-unit-15 * 0.5 };
 	}
 
 	.edit-post-more-menu .components-button,
diff --git a/packages/edit-site/src/components/header/style.scss b/packages/edit-site/src/components/header/style.scss
index b7fd7852ad2fd..b13300b2f9713 100644
--- a/packages/edit-site/src/components/header/style.scss
+++ b/packages/edit-site/src/components/header/style.scss
@@ -132,7 +132,7 @@ body.is-navigation-sidebar-open {
 
 	.editor-post-saved-state,
 	.components-button.is-tertiary {
-		padding: 0 #{$grid-unit-15 / 2};
+		padding: 0 #{$grid-unit-15 * 0.5};
 	}
 
 	.edit-site-more-menu .components-button,
diff --git a/packages/format-library/src/link/modal.native.scss b/packages/format-library/src/link/modal.native.scss
index be63cf5ffbe82..8c4bb97b76be3 100644
--- a/packages/format-library/src/link/modal.native.scss
+++ b/packages/format-library/src/link/modal.native.scss
@@ -6,7 +6,7 @@
 	padding-bottom: 0;
 	padding-left: $block-edge-to-content;
 	padding-right: $block-edge-to-content;
-	padding-top: $block-edge-to-content/2;
+	padding-top: $block-edge-to-content*0.5;
 }
 
 .content {
diff --git a/packages/nux/src/components/dot-tip/style.scss b/packages/nux/src/components/dot-tip/style.scss
index 7aded0dbb3e5c..afd21e4780cd1 100644
--- a/packages/nux/src/components/dot-tip/style.scss
+++ b/packages/nux/src/components/dot-tip/style.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 $dot-size: 8px; // Size of the indicator dot
 $dot-scale: 3;  // How much the pulse animation should scale up by in size
 
@@ -15,17 +17,17 @@ $dot-scale: 3;  // How much the pulse animation should scale up by in size
 		background: rgba(#00739c, 0.9);
 		opacity: 0.9;
 		height: $dot-size * $dot-scale;
-		left: -($dot-size * $dot-scale) / 2;
-		top: -($dot-size * $dot-scale) / 2;
-		transform: scale((1 / $dot-scale));
+		left: -($dot-size * $dot-scale) * 0.5;
+		top: -($dot-size * $dot-scale) * 0.5;
+		transform: scale(math.div(1, $dot-scale));
 		width: $dot-size * $dot-scale;
 	}
 
 	&::after {
 		background: #00739c;
 		height: $dot-size;
-		left: -$dot-size / 2;
-		top: -$dot-size / 2;
+		left: -$dot-size * 0.5;
+		top: -$dot-size * 0.5;
 		width: $dot-size;
 	}
 
@@ -56,16 +58,16 @@ $dot-scale: 3;  // How much the pulse animation should scale up by in size
 
 	// Position the dot right next to the edge of the button
 	&[data-y-axis="top"] {
-		margin-top: -$dot-size / 2;
+		margin-top: -$dot-size * 0.5;
 	}
 	&[data-y-axis="bottom"] {
-		margin-top: $dot-size / 2;
+		margin-top: $dot-size * 0.5;
 	}
 	&[data-y-axis="middle"][data-y-axis="left"] {
-		margin-left: -$dot-size / 2;
+		margin-left: -$dot-size * 0.5;
 	}
 	&[data-y-axis="middle"][data-y-axis="right"] {
-		margin-left: $dot-size / 2;
+		margin-left: $dot-size * 0.5;
 	}
 
 	// Position the tip content away from the dot

From 7626e049b0517ffa995d16f23b61c1c4373a92c4 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Fri, 16 Jul 2021 13:25:30 -0700
Subject: [PATCH 2/5] Refactor build script to add @use first

The @use statements must be the first item in sass files and so required
refactoring the way we build and insert common import statements.
---
 bin/packages/build-worker.js                  | 38 ++++++++++---------
 .../block-library/src/freeform/editor.scss    |  2 +-
 packages/block-library/src/gallery/style.scss |  2 +-
 .../nux/src/components/dot-tip/style.scss     |  1 -
 4 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/bin/packages/build-worker.js b/bin/packages/build-worker.js
index 37f29a4613638..c6a32c959bcee 100644
--- a/bin/packages/build-worker.js
+++ b/bin/packages/build-worker.js
@@ -92,27 +92,29 @@ async function buildCSS( file ) {
 		makeDir( path.dirname( outputFile ) ),
 		readFile( file, 'utf8' ),
 	] );
+
+	const importLists = [
+		'colors',
+		'breakpoints',
+		'variables',
+		'mixins',
+		'animations',
+		'z-index',
+	]
+		// Editor styles should be excluded from the default CSS vars output.
+		.concat(
+			file.includes( 'common.scss' ) || ! file.includes( 'block-library' )
+				? [ 'default-custom-properties' ]
+				: []
+		)
+		.map( ( imported ) => `@import "${ imported }";` )
+		.join( ' ' );
+
 	const builtSass = await renderSass( {
 		file,
 		includePaths: [ path.join( PACKAGES_DIR, 'base-styles' ) ],
-		data:
-			[
-				'colors',
-				'breakpoints',
-				'variables',
-				'mixins',
-				'animations',
-				'z-index',
-			]
-				// Editor styles should be excluded from the default CSS vars output.
-				.concat(
-					file.includes( 'common.scss' ) ||
-						! file.includes( 'block-library' )
-						? [ 'default-custom-properties' ]
-						: []
-				)
-				.map( ( imported ) => `@import "${ imported }";` )
-				.join( ' ' ) + contents,
+		//
+		data: ''.concat( '@use "sass:math";', importLists, contents ),
 	} );
 
 	const result = await postcss(
diff --git a/packages/block-library/src/freeform/editor.scss b/packages/block-library/src/freeform/editor.scss
index 6dafe11198ea2..b397761e6d7ea 100644
--- a/packages/block-library/src/freeform/editor.scss
+++ b/packages/block-library/src/freeform/editor.scss
@@ -228,7 +228,7 @@
 
 	@for $i from 1 through 9 {
 		.gallery-columns-#{ $i } .gallery-item {
-			width: #{ (100 / $i) + "%" };
+			width: #{ math.div(100, $i) + "%" };
 		}
 	}
 
diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss
index 17aedd88494e6..788259032f153 100644
--- a/packages/block-library/src/gallery/style.scss
+++ b/packages/block-library/src/gallery/style.scss
@@ -106,7 +106,7 @@
 		@for $i from 3 through 8 {
 			&.columns-#{ $i } .blocks-gallery-image,
 			&.columns-#{ $i } .blocks-gallery-item {
-				width: calc(#{ 100% / $i } - #{ 1em * ( $i - 1 ) / $i });
+				width: calc(#{ math.div(100%, $i) } - #{ math.div(1em * ( $i - 1 ), $i) });
 				margin-right: 1em;
 			}
 		}
diff --git a/packages/nux/src/components/dot-tip/style.scss b/packages/nux/src/components/dot-tip/style.scss
index afd21e4780cd1..c7cf8e5bcb006 100644
--- a/packages/nux/src/components/dot-tip/style.scss
+++ b/packages/nux/src/components/dot-tip/style.scss
@@ -1,4 +1,3 @@
-@use "sass:math";
 
 $dot-size: 8px; // Size of the indicator dot
 $dot-scale: 3;  // How much the pulse animation should scale up by in size

From 907dc6ec5783824b05757ebe673f61bdcd2c1bef Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Fri, 16 Jul 2021 16:09:22 -0700
Subject: [PATCH 3/5] Upgrade scripts sass module to 1.35.2

---
 packages/scripts/CHANGELOG.md | 1 +
 packages/scripts/package.json | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md
index fecf158f37b08..6013426e8721c 100644
--- a/packages/scripts/CHANGELOG.md
+++ b/packages/scripts/CHANGELOG.md
@@ -15,6 +15,7 @@
 -   Update `markdownlint` package to `0.23.1` ([#32633](https://github.com/WordPress/gutenberg/pull/32633)).
 -   Update `markdownlint-cli` package to `0.27.1` ([#32633](https://github.com/WordPress/gutenberg/pull/32633)).
 -   Update `eslint-plugin-markdown` package to `2.20.0` ([#33432](https://github.com/WordPress/gutenberg/pull/33432)).
+-   Update `sass` package to `1.35.2` ([#33433](https://github.com/WordPress/gutenberg/pull/33433)).
 
 ## 16.1.0 (2021-05-20)
 
diff --git a/packages/scripts/package.json b/packages/scripts/package.json
index 9e900b5934dc9..b11cc8bc7052e 100644
--- a/packages/scripts/package.json
+++ b/packages/scripts/package.json
@@ -72,7 +72,7 @@
 		"puppeteer-core": "^10.1.0",
 		"read-pkg-up": "^1.0.1",
 		"resolve-bin": "^0.4.0",
-		"sass": "^1.26.11",
+		"sass": "^1.35.2",
 		"sass-loader": "^10.1.1",
 		"source-map-loader": "^0.2.4",
 		"stylelint": "^13.8.0",

From 3add9a738d4e11ff2cd97488103e181a62b9bff8 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Fri, 16 Jul 2021 17:16:18 -0700
Subject: [PATCH 4/5] :shakes-fist-at: package-lock.json

---
 package-lock.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 3b902f9198dca..f5177661194d4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15534,7 +15534,7 @@
 				"puppeteer-core": "^10.1.0",
 				"read-pkg-up": "^1.0.1",
 				"resolve-bin": "^0.4.0",
-				"sass": "^1.26.11",
+				"sass": "^1.35.2",
 				"sass-loader": "^10.1.1",
 				"source-map-loader": "^0.2.4",
 				"stylelint": "^13.8.0",

From 8996dcd4e4742a50bba023366d46c77d86dab03b Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Mon, 19 Jul 2021 11:34:19 +0200
Subject: [PATCH 5/5] Add missing use statement for math in Storybook

---
 storybook/style.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/storybook/style.scss b/storybook/style.scss
index 2133b26b3cb43..451443e87d6e5 100644
--- a/storybook/style.scss
+++ b/storybook/style.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 // Loading @wordpress/base-styles as they have mixins and other dependencies
 // used within @wordpress/*/src/*.scss
 @import "~@wordpress/base-styles/animations";