node package manager
We need your input. Help make JavaScript better: Take the 2017 JavaScript Ecosystem survey »

ember-css-modules-sass

ember-css-modules-sass Build Status

This ember-css-modules plugin automatically configures ECM to handle SCSS syntax and work collaboratively with ember-cli-sass.

Installation

This addon will typically be used alongside both ember-css-modules and ember-cli-sass.

ember install ember-css-modules ember-cli-sass ember-css-modules-sass

Usage

Just the same as with vanilla ember-css-modules, but using .scss files for your modules, e.g.

{{! app/components/my-component/template.hbs }}
 
<div local-class="cool">😎</div>
// app/components/my-component/styles.scss 
 
@mixin blowinUp($factor) {
  font-size: $factor;
}
 
.cool {
  @include blowinUp(200%);
}

image

Configuration

This plugin will configure ember-css-modules so that classes in all .scss files in your project will be namespaced. If you need finer-grained control over the treatment of specific aspects of the interplay between CSS Modules and Sass, see the ember-css-modules preprocessors guide.