diff --git a/3rdparty b/3rdparty
index 09596e43fba86a3643879595a8fb6fece4af6a78..7bbfe82c51aa168683ae6e47e3da7d3e587f6ca4 160000
--- a/3rdparty
+++ b/3rdparty
@@ -1 +1 @@
-Subproject commit 09596e43fba86a3643879595a8fb6fece4af6a78
+Subproject commit 7bbfe82c51aa168683ae6e47e3da7d3e587f6ca4
diff --git a/core/css/css-variables.scss b/core/css/css-variables.scss
index 4190c6773e1d09063002c1b4c244318e7aa5535e..2e0fbad5aa1237479b538a8add69e34bcda72173 100644
--- a/core/css/css-variables.scss
+++ b/core/css/css-variables.scss
@@ -3,55 +3,55 @@
 // All css4 variables must be fixed! Scss is a PRE processor
 // css4 variables are processed after scss!
 :root {
-	--color-main-text: $color-main-text;
-	--color-main-background: $color-main-background;
-	--color-main-background-translucent: $color-main-background-translucent;
+	--color-main-text: #{$color-main-text};
+	--color-main-background: #{$color-main-background};
+	--color-main-background-translucent: #{$color-main-background-translucent};
 
-	--color-background-hover: $color-background-hover;
-	--color-background-dark: $color-background-dark;
-	--color-background-darker: $color-background-darker;
+	--color-background-hover: #{$color-background-hover};
+	--color-background-dark: #{$color-background-dark};
+	--color-background-darker: #{$color-background-darker};
 
-	--color-placeholder-light: $color-placeholder-light;
-	--color-placeholder-dark: $color-placeholder-dark;
+	--color-placeholder-light: #{$color-placeholder-light};
+	--color-placeholder-dark: #{$color-placeholder-dark};
 
-	--color-primary: $color-primary;
-	--color-primary-light: $color-primary-light;
-	--color-primary-text: $color-primary-text;
-	--color-primary-text-dark: $color-primary-text-dark;
-	--color-primary-element: $color-primary-element;
-	--color-primary-element-light: $color-primary-element-light;
+	--color-primary: #{$color-primary};
+	--color-primary-light: #{$color-primary-light};
+	--color-primary-text: #{$color-primary-text};
+	--color-primary-text-dark: #{$color-primary-text-dark};
+	--color-primary-element: #{$color-primary-element};
+	--color-primary-element-light: #{$color-primary-element-light};
 
-	--color-error: $color-error;
-	--color-warning: $color-warning;
-	--color-success: $color-success;
+	--color-error: #{$color-error};
+	--color-warning: #{$color-warning};
+	--color-success: #{$color-success};
 
-	--color-text-maxcontrast: $color-text-maxcontrast;
-	--color-text-light: $color-main-text;
-	--color-text-lighter: $color-text-maxcontrast;
+	--color-text-maxcontrast: #{$color-text-maxcontrast};
+	--color-text-light: #{$color-main-text};
+	--color-text-lighter: #{$color-text-maxcontrast};
 
-	--image-logo: $image-logo;
-	--image-login-background: $image-login-background;
-	--image-logoheader: $image-logoheader;
-	--image-favicon: $image-favicon;
+	--image-logo: #{$image-logo};
+	--image-login-background: #{$image-login-background};
+	--image-logoheader: #{$image-logoheader};
+	--image-favicon: #{$image-favicon};
 
-	--color-loading-light: $color-loading-light;
-	--color-loading-dark: $color-loading-dark;
+	--color-loading-light: #{$color-loading-light};
+	--color-loading-dark: #{$color-loading-dark};
 
-	--color-box-shadow: $color-box-shadow;
+	--color-box-shadow: #{$color-box-shadow};
 
-	--color-border: $color-border;
-	--color-border-dark: $color-border-dark;
-	--border-radius: $border-radius;
-	--border-radius-large: $border-radius-large;
-	--border-radius-pill: $border-radius-pill;
+	--color-border: #{$color-border};
+	--color-border-dark: #{$color-border-dark};
+	--border-radius: #{$border-radius};
+	--border-radius-large: #{$border-radius-large};
+	--border-radius-pill: #{$border-radius-pill};
 
-	--font-face: $font-face;
-	--default-font-size: $default-font-size;
+	--font-face: #{$font-face};
+	--default-font-size: #{$default-font-size};
 
-	--default-line-height: $default-line-height;
+	--default-line-height: #{$default-line-height};
 
-	--animation-quick: $animation-quick;
-	--animation-slow: $animation-slow;
+	--animation-quick: #{$animation-quick};
+	--animation-slow: #{$animation-slow};
 
-	--header-height: $header-height;
+	--header-height: #{$header-height};
 }
diff --git a/core/css/functions.scss b/core/css/functions.scss
index c34765154e4ac5122d7eb6b65cab94d7b5202668..7489e574e9707d79764a0e96930ba575fe047500 100644
--- a/core/css/functions.scss
+++ b/core/css/functions.scss
@@ -27,6 +27,7 @@
  * @return string The color without #
  */
 @function remove-hash-from-color($color) {
+	$color: unquote($color);
 	$index: str-index(inspect($color), '#');
 	@if $index {
 		$color: str-slice(inspect($color), 2);
diff --git a/lib/private/Template/SCSSCacher.php b/lib/private/Template/SCSSCacher.php
index 1c6ca661839c29ea0b7a7ec935b9bc486e135de0..72685a5117c179f222b1b3c0725c61cfb28e4633 100644
--- a/lib/private/Template/SCSSCacher.php
+++ b/lib/private/Template/SCSSCacher.php
@@ -47,8 +47,7 @@ use OCP\IMemcache;
 use OCP\IURLGenerator;
 use ScssPhp\ScssPhp\Compiler;
 use ScssPhp\ScssPhp\Exception\ParserException;
-use ScssPhp\ScssPhp\Formatter\Crunched;
-use ScssPhp\ScssPhp\Formatter\Expanded;
+use ScssPhp\ScssPhp\OutputStyle;
 
 class SCSSCacher {
 
@@ -313,14 +312,12 @@ class SCSSCacher {
 		]);
 
 		// Continue after throw
-		$scss->setIgnoreErrors(true);
 		if ($this->config->getSystemValue('debug')) {
 			// Debug mode
-			$scss->setFormatter(Expanded::class);
-			$scss->setLineNumberStyle(Compiler::LINE_COMMENTS);
+			$scss->setOutputStyle(OutputStyle::EXPANDED);
 		} else {
 			// Compression
-			$scss->setFormatter(Crunched::class);
+			$scss->setOutputStyle(OutputStyle::COMPRESSED);
 		}
 
 		try {
@@ -391,8 +388,8 @@ class SCSSCacher {
 		$this->injectedVariables = null;
 
 		// do not clear locks
-		$this->cacheFactory->createDistributed('SCSS-deps-')->clear();
-		$this->cacheFactory->createDistributed('SCSS-cached-')->clear();
+		$this->depsCache->clear();
+		$this->isCachedCache->clear();
 
 		$appDirectory = $this->appData->getDirectoryListing();
 		foreach ($appDirectory as $folder) {
diff --git a/tests/lib/Template/SCSSCacherTest.php b/tests/lib/Template/SCSSCacherTest.php
index 4295c800d027d9ff252bc5721a68e095b3a1c8e5..15966521a53253fa363226eadfc25c4415be7097 100644
--- a/tests/lib/Template/SCSSCacherTest.php
+++ b/tests/lib/Template/SCSSCacherTest.php
@@ -56,6 +56,8 @@ class SCSSCacherTest extends \Test\TestCase {
 	/** @var ICache|\PHPUnit\Framework\MockObject\MockObject */
 	protected $depsCache;
 	/** @var ICacheFactory|\PHPUnit\Framework\MockObject\MockObject */
+	protected $isCachedCache;
+	/** @var ICacheFactory|\PHPUnit\Framework\MockObject\MockObject */
 	protected $cacheFactory;
 	/** @var IconsCacher|\PHPUnit\Framework\MockObject\MockObject */
 	protected $iconsCacher;
@@ -88,9 +90,15 @@ class SCSSCacherTest extends \Test\TestCase {
 			}));
 		$this->cacheFactory = $this->createMock(ICacheFactory::class);
 		$this->depsCache = $this->createMock(ICache::class);
-		$this->cacheFactory->expects($this->at(0))
+		$this->isCachedCache = $this->createMock(ICache::class);
+		$this->cacheFactory
 			->method('createDistributed')
-			->willReturn($this->depsCache);
+			->withConsecutive()
+			->willReturnOnConsecutiveCalls(
+				$this->depsCache,
+				$this->isCachedCache,
+				$this->createMock(ICache::class)
+			);
 
 		$this->themingDefaults = $this->createMock(ThemingDefaults::class);
 		$this->themingDefaults->expects($this->any())->method('getScssVariables')->willReturn([]);
@@ -537,11 +545,10 @@ class SCSSCacherTest extends \Test\TestCase {
 			->method('getDirectoryListing')
 			->willReturn([$file]);
 
-		$cache = $this->createMock(ICache::class);
-		$this->cacheFactory->expects($this->exactly(2))
-			->method('createDistributed')
-			->willReturn($cache);
-		$cache->expects($this->exactly(2))
+		$this->depsCache->expects($this->once())
+			->method('clear')
+			->with('');
+		$this->isCachedCache->expects($this->once())
 			->method('clear')
 			->with('');
 		$this->appData->expects($this->once())