Depreciate @import in favor of @use and @forward (#821)

* Depreciate @import in favor of @use (fixes #821)

Co-authored-by: maureenlholland <[email protected]>

CHANGELOG.md

@@ -1,3 +1,34 @@
+# HEAD
+
+## Features
+* **css:** Migrates the sass `@import` with `@use` and `@forward` (#755).
+
+## Migration Tips
+* This version updates how we internally import SCSS files, from the `@import` syntax to `@use` and `@forward`
+* When importing `lib` at the head of your project you will use the `with` keyword instead of
+stating variables explicitly, like this:
+
+```scss
+@use '/assets/sass/protocol/includes/lib' with ($font-path: '/protocol/fonts');
+```
+* To use the global namespace for protocol variables you will need to use the `as` keyword and assign to `*`:
+
+```scss
+@use '../includes/lib' as *;
+```
+* if you don't use `as` you would access variables and mixins from the file using the filename as a namespace:
+
+```scss
+@use '../includes/lib';
+
+.mzp-c-item {
+    @include lib.text-title-md;
+    color: lib.$color-ink-80;
+    margin: lib.$spacing-lg 0;
+}
+```
+* For more information on the `@use` and `@forward` you can visit the [offical SCSS documentation](https://sass-lang.com/documentation/at-rules) or the usage page on the [Protocol documentation website](https://protocol.mozilla.org/docs/usage/overview.html)
+
 # 17.0.1
 
 ## Bug Fixes

assets/sass/protocol/base/_elements.scss

@@ -3,16 +3,16 @@
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 // Reset first
-@import 'elements/reset';
+@use 'elements/reset';
 
 // Sorted alphabetically
-@import 'elements/common';
-@import 'elements/containers';
-@import 'elements/details';
-@import 'elements/document';
-@import 'elements/forms';
-@import 'elements/links';
-@import 'elements/lists';
-@import 'elements/quotes';
-@import 'elements/tables';
-@import 'elements/titles';
+@use 'elements/common';
+@use 'elements/containers';
+@use 'elements/details';
+@use 'elements/document';
+@use 'elements/forms';
+@use 'elements/links';
+@use 'elements/lists';
+@use 'elements/quotes';
+@use 'elements/tables';
+@use 'elements/titles';

assets/sass/protocol/base/_includes.scss

@@ -2,4 +2,4 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-@import 'includes/animations';
+@use 'includes/animations';

assets/sass/protocol/base/elements/_common.scss

@@ -2,7 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-@import '../../includes/lib';
+@use '../../includes/lib' as *;
 
 // Basic styling for some common elements
 

assets/sass/protocol/base/elements/_containers.scss

@@ -2,7 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-@import '../../includes/lib';
+@use '../../includes/lib' as *;
 
 // This wrapper element sets the content width
 .mzp-l-content {

assets/sass/protocol/base/elements/_details.scss

@@ -2,8 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-@import '../../includes/lib';
-@import '../../includes/mixins/details';
+@use '../../includes/lib' as *;
 
 .mzp-c-details,
 details {

assets/sass/protocol/base/elements/_document.scss

@@ -2,7 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-@import '../../includes/lib';
+@use '../../includes/lib' as *;
 
 html {
     font-size: 100%;