Skip to content

Support sass indented syntax #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
paradoxxxzero wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Support sass indented syntax #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 11 additions & 8 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ A [Sass](http://sass-lang.com/) loader plugin for
[SystemJS](https://github.com/systemjs/systemjs), based on
[sass.js](https://github.com/medialize/sass.js).

This plugin allows importing SCSS files from SystemJS and have them
This plugin allows importing Sass files from SystemJS and have them
dynamically compiled to CSS and loaded into the page from within the
browser. Alternatively, the SCSS files can also be converted to CSS
browser. Alternatively, the sass/scss files can also be converted to CSS
statically by creating bundles with
[JSPM](https://github.com/jspm/jspm-cli).

Expand All @@ -17,23 +17,26 @@ mechanism yet and has some blocking bugs (see Issues).
## Installation

```
$ jspm install scss=github:theefer/plugin-sass
$ jspm install sass=github:theefer/plugin-sass
```

## Usage

Add a dependency to a `.scss` file from within your JavaScript files,
followed by a `!` to trigger the use of this plugin:
Add a dependency to a `.sass` file or a `.scss` file from within your
JavaScript files, followed by a `!` to trigger the use of this plugin:

``` js
// ES6
import 'styles.scss!';
import 'styles.sass!';
import 'styles.scss!sass'; // For scss syntax

// or AMD
define(['styles.scss!'], function(){ ... });
define(['styles.sass!'], function(){ ... });
define(['styles.scss!sass'], function(){ ... }); // For scss syntax

// or CommonJS
require('styles.scss!');
require('styles.sass!');
require('styles.scss!sass'); // For scss syntax
```

The corresponding compiled CSS should be injected into the `<head>` of
Expand Down
3 changes: 2 additions & 1 deletion sass-builder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,8 @@ var cssInject = "(function(c){var d=document,a='appendChild',i='styleSheet',s=d.
function compileSass(source, url) {
return new Promise(function(resolve, reject) {
Sass.compile(source, {
inputPath: url.replace('file://', '')
inputPath: url.replace('file://', ''),
indentedSyntax: url.split('.').slice(-1)[0] == 'sass'
}, function(result) {
var successful = result.status === 0;
if (successful) {
Expand Down
3 changes: 2 additions & 1 deletion sass.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,8 @@ function loadStyle(url) {
return fetchText(url).then(function(data) {
return new Promise(function(resolve, reject) {
sass.compile(data, {
inputPath: url
inputPath: url,
indentedSyntax: url.split('.').slice(-1)[0] == 'sass'
}, function(result) {
var successful = result.status === 0;
if (successful) {
Expand Down