Skip to content

mfeckie/fast-sass

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
ts
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

fast-sass

A SASS compiler plugin focussed on speed over customisability. Initially forked from ember-cli-sass then rewritten taking much inspiration from ember-cli-typescript to allow the addon to be written in TypeScript

fast-sass uses Sass to preprocess your ember-cli app's styles, and provides support for source maps and include paths. It provides support for the common use case for Ember.js projects:

Installation

ember install fast-sass

Next you'll need to rename styles/app.css to styles/app.scss.

Usage

This addon uses a distribution of Dart Sass that is compiled to pure JavaScript. Dart Sass is the reference implementation for Sass.

By default this addon will compile app/styles/app.scss into dist/assets/app.css.

If you want more control, you can pass additional options to sassOptions:

  • includePaths: an array of include paths
  • onlyIncluded: true/false whether to use only what is in app/styles and includePaths. This may helps with performance, particularly when using NPM linked modules
  • ext: The file extension of the input file, default: 'scss'

Example

The following example assumes your this party packages are installed as node_modules.

Make the files from that dependence available to SASS like this:

yarn add -D foundation-sites

Specify some include paths in your ember-cli-build.js:

var app = new EmberApp({
  sassOptions: {
    includePaths: [
      'node_modules/foundation-sites/scss',
    ]
  }
});

Import some deps into your app.scss:

@import 'foundation';
@include foundation-global-styles;

Automatic Pod Style Inclusions

If you want to follow a pattern of having style files for each individual component, you can have them automatically included by passing this option in ember-cli-build.js.

var app = new EmberApp({
  sassOptions: {
    autoIncludeComponentCSS: true
  }
});

You must also add this to your app.scss

@import 'pod-styles';

With this done, any scss file found in app/components/** will be automatically included in the build output.

About

Ember.js addon for compiling SASS

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published