diff --git a/plugins/woocommerce-blocks/assets/css/abstracts/_breakpoints.scss b/plugins/woocommerce-blocks/assets/css/abstracts/_breakpoints.scss
index 90ce2887719..d191574a77d 100644
--- a/plugins/woocommerce-blocks/assets/css/abstracts/_breakpoints.scss
+++ b/plugins/woocommerce-blocks/assets/css/abstracts/_breakpoints.scss
@@ -10,9 +10,9 @@ $breakpoints: 480px, 600px, 782px, 960px, 1280px, 1440px;
 
 // @todo refactor breakpoints so they use the mixins from Gutenberg
 // https://github.com/WordPress/gutenberg/blob/master/packages/base-styles/_mixins.scss
-@mixin breakpoint( $sizes... ) {
+@mixin breakpoint($sizes...) {
 	@each $size in $sizes {
-		@if type-of( $size ) == string {
+		@if type-of($size) == string {
 			$approved-value: 0;
 			@each $breakpoint in $breakpoints {
 				$and-larger: ">" + $breakpoint;
@@ -49,7 +49,7 @@ $breakpoints: 480px, 600px, 782px, 960px, 1280px, 1440px;
 				@each $breakpoint in $breakpoints {
 					$sizes: $sizes + " " + $breakpoint;
 				}
-				@warn "ERROR in breakpoint( #{ $size } ) : You can only use these sizes[ #{$sizes} ] using the following syntax [ <#{ nth( $breakpoints, 1 ) } >#{ nth( $breakpoints, 1 ) } #{ nth( $breakpoints, 1 ) }-#{ nth( $breakpoints, 2 ) } ]";
+				@warn "ERROR in breakpoint(#{ $size }) : You can only use these sizes[ #{$sizes} ] using the following syntax [ <#{ nth($breakpoints, 1) } >#{ nth($breakpoints, 1) } #{ nth($breakpoints, 1) }-#{ nth($breakpoints, 2) } ]";
 			}
 		}
 		@else {
@@ -57,7 +57,7 @@ $breakpoints: 480px, 600px, 782px, 960px, 1280px, 1440px;
 			@each $breakpoint in $breakpoints {
 				$sizes: $sizes + " " + $breakpoint;
 			}
-			@error "ERROR in breakpoint( #{ $size } ) : Please wrap the breakpoint $size in parenthesis. You can use these sizes[ #{$sizes} ] using the following syntax [ <#{ nth( $breakpoints, 1 ) } >#{ nth( $breakpoints, 1 ) } #{ nth( $breakpoints, 1 ) }-#{ nth( $breakpoints, 2 ) } ]";
+			@error "ERROR in breakpoint(#{ $size }) : Please wrap the breakpoint $size in parenthesis. You can use these sizes[ #{$sizes} ] using the following syntax [ <#{ nth($breakpoints, 1) } >#{ nth($breakpoints, 1) } #{ nth($breakpoints, 1) }-#{ nth($breakpoints, 2) } ]";
 		}
 	}
 }
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/style.scss
index 4172413ed84..739e0998036 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/style.scss
@@ -88,7 +88,7 @@
 	p,
 	.wc-block-components-product-metadata {
 		line-height: 1.375;
-		margin-top: #{ ( $gap-large - $gap ) * 0.5 };
+		margin-top: #{ ($gap-large - $gap) * 0.5 };
 	}
 }
 
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/pagination/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/pagination/style.scss
index b406577fef1..598ec851785 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/pagination/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/pagination/style.scss
@@ -15,7 +15,7 @@
 	padding: 0.3em 0.6em;
 	min-width: 2.2em;
 
-	@include breakpoint( "<782px" ) {
+	@include breakpoint("<782px") {
 		padding: 0.1em 0.2em;
 		min-width: 1.6em;
 	}
@@ -32,7 +32,7 @@
 .wc-block-components-pagination__ellipsis {
 	padding: 0.3em;
 
-	@include breakpoint( "<782px" ) {
+	@include breakpoint("<782px") {
 		padding: 0.1em;
 	}
 }
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/product-list/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/product-list/style.scss
index 9f705177868..d6688b7e48c 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/product-list/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/product-list/style.scss
@@ -100,7 +100,7 @@
 	}
 }
 
-@include breakpoint( "<480px" ) {
+@include breakpoint("<480px") {
 	.wc-block-grid {
 		@for $i from 2 to 9 {
 			&.has-#{$i}-columns {
@@ -119,7 +119,7 @@
 	}
 }
 
-@include breakpoint( "480px-600px" ) {
+@include breakpoint("480px-600px") {
 	.wc-block-grid {
 		@for $i from 2 to 9 {
 			&.has-#{$i}-columns {
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/radio-control/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/radio-control/style.scss
index ef456905ae4..297ede8b443 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/radio-control/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/radio-control/style.scss
@@ -49,7 +49,7 @@
 
 .wc-block-components-radio-control__description,
 .wc-block-components-radio-control__secondary-description {
-	@include font-size( small );
+	@include font-size(small);
 	line-height: 20px;
 }
 
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/store-snackbar-notices/components/style.scss b/plugins/woocommerce-blocks/assets/js/base/context/providers/store-snackbar-notices/components/style.scss
index f92d7c32b3a..e5a419a1810 100644
--- a/plugins/woocommerce-blocks/assets/js/base/context/providers/store-snackbar-notices/components/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/store-snackbar-notices/components/style.scss
@@ -4,7 +4,7 @@
 	left: 16px;
 	width: auto;
 
-	@include breakpoint( "<782px" ) {
+	@include breakpoint("<782px") {
 		position: fixed;
 		top: 10px;
 		left: 0;
@@ -12,7 +12,7 @@
 	}
 
 	.components-snackbar-list__notice-container {
-		@include breakpoint( "<782px" ) {
+		@include breakpoint("<782px") {
 			margin-left: 10px;
 			margin-right: 10px;
 		}
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/checkout-button/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/checkout-button/style.scss
index efa8fb148bb..84bf7a2ea72 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/checkout-button/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/checkout-button/style.scss
@@ -25,13 +25,13 @@
 	}
 }
 
-@include breakpoint( ">782px" ) {
+@include breakpoint(">782px") {
 	.wc-block-cart__submit-container--sticky {
 		display: none;
 	}
 }
 
-@include breakpoint( "<782px" ) {
+@include breakpoint("<782px") {
 	.wc-block-cart__submit-container--sticky {
 		background: $white;
 		bottom: 0;
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/checkout-button/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/checkout-button/style.scss
index efa8fb148bb..84bf7a2ea72 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/checkout-button/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/checkout-button/style.scss
@@ -25,13 +25,13 @@
 	}
 }
 
-@include breakpoint( ">782px" ) {
+@include breakpoint(">782px") {
 	.wc-block-cart__submit-container--sticky {
 		display: none;
 	}
 }
 
-@include breakpoint( "<782px" ) {
+@include breakpoint("<782px") {
 	.wc-block-cart__submit-container--sticky {
 		background: $white;
 		bottom: 0;
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-shipping-methods-block/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-shipping-methods-block/style.scss
index ce5f2ba2f1d..ff27c71b0ae 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-shipping-methods-block/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-shipping-methods-block/style.scss
@@ -1,6 +1,6 @@
 .wc-block-checkout__shipping-option {
 	.wc-block-components-radio-control__option {
-		@include with-translucent-border( 0 0 1px );
+		@include with-translucent-border(0 0 1px);
 		margin: 0;
 		padding: em($gap-small) 0 em($gap-small) em($gap-largest);
 	}
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/payment-methods/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/payment-methods/style.scss
index 488121e6bbe..1a24d0125f4 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/payment-methods/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/payment-methods/style.scss
@@ -31,7 +31,7 @@
 		// Notice the min width ems value is smaller than flex-basis. That's because
 		// by default we want it to have the same width as `expiry-element`, but
 		// if available space is scarce, `cvc-element` should get smaller faster.
-		min-width: unquote("min( 5em, calc(16% - #{$gap-small}))");
+		min-width: unquote("min(5em, calc(16% - #{$gap-small}))");
 	}
 
 	.wc-block-gateway-input {
diff --git a/plugins/woocommerce-blocks/packages/checkout/panel/style.scss b/plugins/woocommerce-blocks/packages/checkout/panel/style.scss
index 2fc5692f861..989e5f08e68 100644
--- a/plugins/woocommerce-blocks/packages/checkout/panel/style.scss
+++ b/plugins/woocommerce-blocks/packages/checkout/panel/style.scss
@@ -1,5 +1,5 @@
 .wc-block-components-panel.has-border {
-	@include with-translucent-border( 1px 0 );
+	@include with-translucent-border(1px 0);
 
 	+ .wc-block-components-panel.has-border::after {
 		border-top-width: 0;
@@ -7,7 +7,7 @@
 }
 
 .wc-block-components-panel.has-border.no-top-border {
-	@include with-translucent-border( 1px 0 );
+	@include with-translucent-border(1px 0);
 	&::after {
 		border-top-width: 0;
 	}
diff --git a/plugins/woocommerce-blocks/packages/checkout/wrapper/style.scss b/plugins/woocommerce-blocks/packages/checkout/wrapper/style.scss
index cde844567f1..32bbf8f9f17 100644
--- a/plugins/woocommerce-blocks/packages/checkout/wrapper/style.scss
+++ b/plugins/woocommerce-blocks/packages/checkout/wrapper/style.scss
@@ -1,5 +1,5 @@
 .wc-block-components-totals-wrapper {
-	@include with-translucent-border( 1px 0 0 );
+	@include with-translucent-border(1px 0 0);
 	padding: $gap 0;
 
 	&.has-bottom-border {
@@ -12,7 +12,7 @@
 		padding: 0;
 
 		> * > * {
-			@include with-translucent-border( 0 0 1px );
+			@include with-translucent-border(0 0 1px);
 			padding: $gap 0;
 
 			&:last-child::after {
@@ -25,7 +25,7 @@
 .wc-block-components-discounts-meta {
 	.wc-block-components-totals-wrapper {
 		&:first-child {
-			@include with-translucent-border( 1px 0 0 );
+			@include with-translucent-border(1px 0 0);
 		}
 	}
 }