Migrate SASS

src/styles/_page.project.settings.scss

@@ -1,3 +1,8 @@
+@use "common";
+@use "var";
+@use "color";
+@use "fa";
+
 #settings {
 	#settings-panel {
 		.settings-header {
@@ -7,7 +12,7 @@
 			.logo {
 				background: rgba(255, 255, 255, .4);
 				padding: 2rem 1rem;
-				border-radius: $block-radius $block-radius 0 0;
+				border-radius: var.$block-radius var.$block-radius 0 0;
 
 				img {
 					width: 100%;
@@ -27,7 +32,7 @@
 					text-align: center;
 					font-size: 0.8em;
 					margin: 0;
-					color: $subtitle-color;
+					color: color.$subtitle;
 					transform: translateX(calc(-0.5 * (12px + 0.5em))); //icon width + margin right
 
 					span {
@@ -74,32 +79,32 @@
 			.settings-section {
 				display: inline-block;
 				margin: 1.5rem 1rem 0 1rem;
-				width: calc(100% - 2 * #{$block-spacing});
+				width: calc(100% - 2 * var.$block-spacing);
 
 				&:last-child {
 					margin-bottom: 1.5rem;
 				}
 
 				h1 {
-					margin: 0 0 $block-spacing;
-					color: $title-color;
+					margin: 0 0 var.$block-spacing;
+					color: color.$title;
 					font-size: 1.5em;
 				}
 
 				.settings-section-body {
 					.radio {
 						&:not(:first-child) {
-							margin-top: $elem-spacing;
+							margin-top: var.$elem-spacing;
 						}
 
 						label {
 							margin-left: .3rem;
 							@extend .clickable;
-							@include no-text-overflow();
+							@include common.no-text-overflow();
 						}
 
 						.download {
-							color: $legend-color;
+							color: color.$legend;
 	
 							&:hover {
 								color: #0078A8;
@@ -128,7 +133,7 @@
 							@extend .fa-unsubscribe;
 						}
 						&.loading {
-							background-color: $message-color;
+							background-color: color.$message;
 							color: white;
 							span {
 								@extend .flicker;