diff --git a/install/package.json b/install/package.json
index e19ddc4695..bf22db9a0f 100644
--- a/install/package.json
+++ b/install/package.json
@@ -30,7 +30,7 @@
     "dependencies": {
         "@adactive/bootstrap-tagsinput": "0.8.2",
         "@isaacs/ttlcache": "1.2.0",
-        "ace-builds": "1.9.5",
+        "ace-builds": "1.10.1",
         "archiver": "5.3.1",
         "async": "3.2.4",
         "autoprefixer": "10.4.8",
diff --git a/public/language/en-GB/admin/appearance/customise.json b/public/language/en-GB/admin/appearance/customise.json
index 97abb5ede5..c95e62c0f0 100644
--- a/public/language/en-GB/admin/appearance/customise.json
+++ b/public/language/en-GB/admin/appearance/customise.json
@@ -1,7 +1,7 @@
 {
-	"custom-css": "Custom CSS/LESS",
-	"custom-css.description": "Enter your own CSS/LESS declarations here, which will be applied after all other styles.",
-	"custom-css.enable": "Enable Custom CSS/LESS",
+	"custom-css": "Custom CSS/SASS",
+	"custom-css.description": "Enter your own CSS/SASS declarations here, which will be applied after all other styles.",
+	"custom-css.enable": "Enable Custom CSS/SASS",
 
 	"custom-js": "Custom Javascript",
 	"custom-js.description": "Enter your own javascript here. It will be executed after the page is loaded completely.",
diff --git a/public/src/admin/appearance/customise.js b/public/src/admin/appearance/customise.js
index 5e9a943e79..31a156cf3b 100644
--- a/public/src/admin/appearance/customise.js
+++ b/public/src/admin/appearance/customise.js
@@ -9,7 +9,7 @@ define('admin/appearance/customise', ['admin/settings', 'ace/ace'], function (Se
 			$('#customJS').text($('#customJS-holder').val());
 			$('#customHTML').text($('#customHTML-holder').val());
 
-			initACE('customCSS', 'less', '#customCSS-holder');
+			initACE('customCSS', 'scss', '#customCSS-holder');
 			initACE('customJS', 'javascript', '#customJS-holder');
 			initACE('customHTML', 'html', '#customHTML-holder');
 
diff --git a/public/src/modules/ace-editor.js b/public/src/modules/ace-editor.js
index 7c88771a9f..6b0d20ba0a 100644
--- a/public/src/modules/ace-editor.js
+++ b/public/src/modules/ace-editor.js
@@ -2,7 +2,7 @@ export * from 'ace-builds';
 
 // only import the modes and theme we use
 import 'ace-builds/src-noconflict/mode-javascript';
-import 'ace-builds/src-noconflict/mode-less';
+import 'ace-builds/src-noconflict/mode-scss';
 import 'ace-builds/src-noconflict/mode-html';
 import 'ace-builds/src-noconflict/ext-searchbox';
 import 'ace-builds/src-noconflict/theme-twilight';
diff --git a/src/meta/configs.js b/src/meta/configs.js
index 75a013f71b..2f7206093b 100644
--- a/src/meta/configs.js
+++ b/src/meta/configs.js
@@ -240,12 +240,9 @@ async function saveRenderedCss(data) {
 	if (!data.customCSS) {
 		return;
 	}
-	const less = require('less');
-	const lessObject = await less.render(data.customCSS, {
-		compress: true,
-		javascriptEnabled: false,
-	});
-	data.renderedCustomCSS = lessObject.css;
+	const sass = require('sass');
+	const scssOutput = await sass.compileStringAsync(data.customCSS, {});
+	data.renderedCustomCSS = scssOutput.css.toString();
 }
 
 async function getLogoSize(data) {