Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/brunch/sass-brunch
Adds Sass / Scss support to brunch
https://github.com/brunch/sass-brunch
brunch brunch-compiler brunch-plugin libsass node-sass sass scss
Last synced: 8 days ago
JSON representation
Adds Sass / Scss support to brunch
- Host: GitHub
- URL: https://github.com/brunch/sass-brunch
- Owner: brunch
- License: mit
- Archived: true
- Created: 2012-03-12T17:25:46.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2021-11-25T18:40:39.000Z (almost 3 years ago)
- Last Synced: 2024-09-20T18:23:06.754Z (13 days ago)
- Topics: brunch, brunch-compiler, brunch-plugin, libsass, node-sass, sass, scss
- Language: JavaScript
- Homepage:
- Size: 364 KB
- Stars: 97
- Watchers: 10
- Forks: 104
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
## sass-brunch [](https://travis-ci.org/brunch/sass-brunch)
Adds Sass support to [Brunch](https://brunch.io).
## Usage
Install the plugin via npm with `npm install -S sass-brunch`.
### Options
Set additional include paths:
```javascript
includePaths: ['node_modules/foundation/scss']
```
Use [custom functions](https://sass-lang.com/documentation/js-api/interfaces/LegacySharedOptions#functions) (only synchronous functions are supported):
```javascript
var types = require('sass').types
module.exports = {
plugins: {
sass: {
functions: {
'example($foo, $bar)': function(foo, bar) {
return new types.String("I'm an example")
}
}
}
}
}
```
### CSS Modules
Starting Brunch `2.6.0`, you can use CSS Modules with css-brunch. To enable it, change your config to:
```javascript
module.exports = {
// ...
plugins: {
sass: {
modules: true
}
}
};
```
You can also pass options directly to
[postcss-modules](https://github.com/css-modules/postcss-modules):
```javascript
generateScopedName: '[name]__[local]___[hash:base64:5]'
```
Then, author your styles like you normally would:
```scss
.title {
font-size: 32px;
}
```
And reference CSS class names by requiring the specific style into your javascript:
```javascript
var style = require('./title.scss');
Yo
```
Note: enabling `cssModules` does so for every stylesheet in your project, even the files you don't require will be transformed into CSS modules (aka will have obfuscated class names, like turn `.title` into `._title_fdphn_1`).
You must use the ignore option to specifically opt out of files or directories where you don't want to use cssModules.
The ignore option takes an array of matches. [Anymatch](https://github.com/es128/anymatch) is used to handle the matching. See the [anymatch documentation](https://github.com/es128/anymatch) for more information.
```javascript
module.exports = {
// ...
plugins: {
sass: {
modules: {
ignore: [/file\.css/, /some\/path\/to\/ignore/]
}
}
}
};
```
## License
The MIT License (MIT)