Convert Sass String (not SCSS) to CSS String

Question

I need to compile SASS and SCSS Strings to CSS Strings for a project. Therefore I´m using the node package node-sass. Converting SCSS works fine, but SASS doesn't.

Example code for SASS:

'use strict';

var sass = require('node-sass');

var dataTemp = 'body{background:blue; a{color:black;}}';

var output = sass.renderSync({
  data: dataTemp
});

console.log(output.css.toString());

The problem comes, when I try to convert something like this, which should be valid .sass syntax

'use strict';

var sass = require('node-sass');

var dataTemp = '.red\n color: red';

var output = sass.renderSync({
  data: dataTemp
});

console.log(output.css.toString());

Console output:

Error: Invalid CSS after ".": expected 1 selector or at-rule, was ".red color: red "

So obviously node-sass can't compile .sass code that way. The syntax of node-sass is:

var result = sass.renderSync({
  data: scss_content
  [, options..]
});

Inside the object you can define options and even functions. Maybe is there a way to compile the data in such a function?

Any other solutions or recommendations for other packages?

You haven't told us why this doesn't work? You also have a typo in outpu.css — duncanhall
– duncanhall, Commented Apr 27, 2016 at 9:41

Clemens Basler · Accepted Answer · 2016-05-04 12:53:53Z

5

Well by adding an option named 'indentedSyntax' and setting it to 'true', node-sass can compile .sass code as well. Sorry, should have read the documentation more precisely. Thanks for helping!

'use strict';

var sass = require('node-sass');

var dataTemp = '.red\n color: red';

var output = sass.renderSync({
  data: dataTemp,
  indentedSyntax: true,
  outputStyle : 'compressed'
});

console.log(output.css.toString());

Log: ".red{color:red}"

answered May 4, 2016 at 12:53

Clemens Basler

811 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

duncanhall · Accepted Answer · 2016-04-27 15:06:57Z

2

Your SCSS is invalid - you need to provide the {} around your properties:

'use strict';

var sass = require('node-sass');

var dataTemp = '.red {color: red}';

var output = sass.renderSync({
  data: dataTemp
});

console.log(output.css.toString());

You can validate your SASS/SCSS using an online tool such as SassMeister

edited Apr 27, 2016 at 15:06

answered Apr 27, 2016 at 13:54

duncanhall

11.5k6 gold badges61 silver badges96 bronze badges

3 Comments

Clemens Basler Over a year ago

Right, the normal SCSS Syntax works fine, but the SASS Syntax, which I need aswell doesn't. Had a typo there, but '.red\n color: red' should be vaild .sass Syntax.

duncanhall Over a year ago

I'm not sure that's correct. See the update to my post above - using the validator, your original value is invalid, but the value I have suggested is valid.

Clemens Basler Over a year ago

Unfortunately I´m not that familiar with SASS/SCSS, but I think I need the Syntax discribed in link, where you can witch between SCSS and SASS Syntax. Therefore I thought, that ".red\n color: red" should be valid?

Collectives™ on Stack Overflow

Convert Sass String (not SCSS) to CSS String

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related