Switch to sassc for CSS building

Because https://github.com/Kronuz/pyScss/pull/426 is not yet in a
release, also just look at the diffstat!

Dockerfile

@@ -6,6 +6,7 @@ RUN set -eu; \
     apt-get install -y --no-install-recommends \
         python3 python3-pip python3-setuptools python3-wheel \
         libpython3-dev \
+        sassc \
         make build-essential;
 
 COPY requirements.txt /opt/snikket-web-portal/requirements.txt

Makefile

@@ -6,7 +6,7 @@ translation_basepath = snikket_web/translations
 pot_file = $(translation_basepath)/messages.pot
 
 PYTHON3 ?= python3
-SCSSC ?= $(PYTHON3) -m scss --load-path snikket_web/scss/
+SCSSC ?= sassc --load-path snikket_web/scss/
 
 all: build_css compile_translations
 
@@ -14,7 +14,7 @@ build_css: $(generated_css_files)
 
 $(generated_css_files): snikket_web/static/css/%.css: snikket_web/scss/%.scss $(scss_files) $(scss_includes)
 	mkdir -p snikket_web/static/css/
-	$(SCSSC) -o "$@" "$<"
+	$(SCSSC) "$<" "$@"
 
 clean:
 	rm -f $(generated_css_files)

build-requirements.txt

@@ -1,4 +1,3 @@
-pyscss~=1.3
 mypy
 python-dotenv~=0.15
 types-toml

snikket_web/scss/app.scss

@@ -275,22 +275,22 @@ div.form.layout-expanded {
 	}
 
 	@each $type in $text-entry-inputs {
-		input[type=$type] {
+		input[type=#{$type}] {
 			width: 100%;
 			border: none;
 			border-bottom: $w-s4 solid $primary-500;
 			margin-bottom: -$w-s4;
 		}
 
-		input[type=$type].has-error {
+		input[type=#{$type}].has-error {
 			border-right: $w-s4 solid $alert-500;
 		}
 
-		input[type=$type]:hover {
+		input[type=#{$type}]:hover {
 			border-bottom-color: $primary-700;
 		}
 
-		input[type=$type]:focus {
+		input[type=#{$type}]:focus {
 			border-bottom-color: $primary-800;
 		}
 	}
@@ -646,69 +646,6 @@ input[type="submit"], button, .button {
 
 
 
-/* button, .button {
-	margin: 0 $w-s2;
-}
-
-button.lv-primary, .button.lv-primary {
-	background-color: $gray-500;
-	color: $gray-900;
-	border-radius: $w-s4;
-	border: $w-s4 solid $gray-400;
-
-	@each $type, $values in $colours {
-		&.c-#{$type} {
-			border-color: nth($values, 4);
-			background-color: nth($values, 5);
-			color: nth($values, 9);
-		}
-
-		&.c-#{$type}:hover {
-			background-color: nth($values, 4);
-		}
-	}
-}
-
-button.lv-secondary, .button.lv-secondary {
-	background-color: $gray-700;
-	color: $gray-100;
-	border-radius: $w-s4;
-
-	@each $type, $values in $colours {
-		&.c-#{$type} {
-			background-color: nth($values, 7);
-			color: nth($values, 1);
-		}
-	}
-}
-
-button.lv-tertiary, .button.lv-tertiary {
-	background-color: inherit;
-	color: $gray-300;
-	border-radius: $w-s4;
-	text-decoration: underline;
-
-	@each $type, $values in $colours {
-		&.c-#{$type} {
-			color: nth($values, 3);
-		}
-	}
-}
-*/
-
-/*
-	button.lv-secondary.c-#{$type}, .button.lv-secondary.c-#{$type} {
-		background-color: nth($values, 7);
-		color: nth($values, 1);
-	}
-
-	button.lv-tertiary.c-#{$type}, .button.lv-tertiary.c-#{$type} {
-		color: nth($values, 3);
-		text-decoration: underline;
-		background-color: transparent;
-	}
-}*/
-
 /* boxes */
 
 .box {
@@ -1121,7 +1058,7 @@ pre.guru-meditation {
 		}
 
 		@each $type in $text-entry-inputs {
-			input[type=$type] {
+			input[type=#{$type}] {
 				background-color: black;
 			}