add sass support. fixes chinchang#45

nrgwsth · Jan 19, 2017 · ea6acdc · ea6acdc
1 parent de05737
commit ea6acdc
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/src/index.html b/src/index.html
@@ -60,6 +60,7 @@
 								<ul class="js-modes-menu  dropdown__menu">
 									<li><a data-type="css" data-mode="css">CSS</a></li>
 									<li><a data-type="css" data-mode="scss">SCSS</a></li>
+									<li><a data-type="css" data-mode="sass">SASS</a></li>
 									<li><a data-type="css" data-mode="less">LESS</a></li>
 									<li><a data-type="css" data-mode="stylus">Stylus</a></li>
 								</ul>

diff --git a/src/script.js b/src/script.js
@@ -23,6 +23,7 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD
 	var CssModes = {
 		CSS: 'css',
 		SCSS: 'scss',
+		SASS: 'sass',
 		LESS: 'less',
 		STYLUS: 'stylus'
 	};
@@ -42,6 +43,7 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD
 	modes[JsModes.TS] = { label: 'TypeScript', cmMode: 'javascript', codepenVal: 'typescript' };
 	modes[CssModes.CSS] = { label: 'CSS', cmMode: 'css', codepenVal: 'none' };
 	modes[CssModes.SCSS] = { label: 'SCSS', cmMode: 'sass', codepenVal: 'scss' };
+	modes[CssModes.SASS] = { label: 'SASS', cmMode: 'sass', codepenVal: 'sass' };
 	modes[CssModes.LESS] = { label: 'LESS', cmMode: 'text/x-less', codepenVal: 'less' };
 	modes[CssModes.STYLUS] = { label: 'Stylus', cmMode: 'stylus', codepenVal: 'stylus' };
 
@@ -388,7 +390,7 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD
 			loadJS('lib/marked.js').then(setLoadedFlag);
 		} else if (mode === CssModes.LESS) {
 			loadJS('lib/less.min.js').then(setLoadedFlag);
-		} else if (mode === CssModes.SCSS) {
+		} else if (mode === CssModes.SCSS || mode === CssModes.SASS) {
 			loadJS('lib/sass.js').then(function () {
 				sass = new Sass('lib/sass.worker.js');
 				setLoadedFlag();
@@ -457,9 +459,9 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD
 
 		if (cssMode === CssModes.CSS) {
 			d.resolve(code);
-		} else if (cssMode === CssModes.SCSS) {
-			sass.compile(code, function(result) {
-				// Something as wrong
+		} else if (cssMode === CssModes.SCSS || cssMode === CssModes.SASS) {
+			sass.compile(code, { indentedSyntax: cssMode === CssModes.SASS }, function(result) {
+				// Something was wrong
 				if (result.line && result.message) {
 					showErrors('css', [ { lineNumber: result.line - 1, message: result.message } ]);
 				}

diff --git a/src/style.css b/src/style.css
@@ -552,7 +552,7 @@ select, input[type="text"], textarea {
 }
 .dropdown__menu > li > a {
 	display: block;
-	padding: 15px;
+	padding: 10px 15px;
 	color: #333;
 	cursor: pointer;
 }