Compile
About

A SCSS Compiler written entirely in JavaScript. There are compiler written in Ruby and C, and there's a port of the C compiler (lib-sass) into JavaScript, but there is no SCSS Compiler written purely in JavaScript.

How Do I Use This?

The API is pretty similar to the node-sass API. Use the success property to define your callback. Use the data property to pass your SCSS string.

jsass.render({
  data: '$c: green; body{ background: $c; p { color: red; } }',
  success: function (css) {
    console.log(css);
  },
});
Features
  • Sass Compiler
    • CSS to CSS
    • Nesting { {} { {} {} } }
      • Bracket Nesting
      • Parent Selectors (&:)
      • Nested Properties
      • Comma Separated Properties
    • Comments
      • Inline Comments
      • Multiline Comments (Implemented, but incorrect indentation)
    • Variables ($)
      • Global variables (!global) (Implemented, but not tested throughly since this doesn't work in node-sass)
    • @mixin and @include
      • Declare @mixins
      • Include @mixin through @include
      • @mixins with variables
      • Unlimited arguments
      • Nested @mixins
      • Should pass the @content into the mixin
    • String interpolation (#{ $var })
    • Data Types
      • Numbers
      • Strings (with or without quotes)
      • Colors (e.g. blue, #04a3f9, rgba(255, 0, 0, 0.5))
      • Boolean (true, false)
      • Null (null)
      • List Values (e.g. 1.5em 1em 0 2em, Helvetica, Arial, sans-serif)
      • Maps
    • Operations
    • All Types (==, !=)
    • Numbers (+, -, *, /, %, >=, <=,>, <)
    • Colors (+, -, *, /, %, >=, <=,>, <)
    • Strings (+)
    • Boolean (and, or, not)
    • @if
    • @for
    • @import
    • @extend
      • Extending %
    • @each
    • @while
    • Output Styles

A Project by thejsj. Check it out on GitHub.