Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/atmajs/atma-loader-sass
https://github.com/atmajs/atma-loader-sass
Last synced: 6 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/atmajs/atma-loader-sass
- Owner: atmajs
- Created: 2019-05-21T11:04:16.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T03:22:11.000Z (almost 2 years ago)
- Last Synced: 2024-10-28T15:03:13.805Z (17 days ago)
- Language: JavaScript
- Size: 130 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
[sass Compiler](http://sasscss.org) (Atma Plugin)
-----
[](https://travis-ci.org/atmajs/atma-loader-sass)
The Plugin extends:
- [`IncludeJS`](https://github.com/atmajs/IncludeJS) with a custom loader
- [`atma-io`](https://github.com/atmajs/atma-io) with a custom middleware to read sass files
- [`atma-server`](https://github.com/atmajs/atma-server) and [`Atma Toolkit`](https://github.com/atmajs/Atma.Toolkit) with a `HTTPHandler` to serve compiled sources (with **sourceMap** support)
##### How to use
###### Embed into the Project
+ `atma plugin install atma-loader-sass`
This adds `atma-loader-sass` npm dependency and the `package.json` would look like:
```json
{
"dependency": {
"atma-loader-sass"
},
"atma": {
"plugins": [
"atma-loader-sass"
],
"settings": {
"atma-loader-sass": {
"sass": {
}
}
}
}
}
```
+ That's all. Now, you are ready to use 'dynamic stylesheets' in your project
##### Quick Try
+ install atma: `$ npm install atma -g`
+ install plugin: `$ atma plugin install atma-loader-sass`
+ add `test.html` to the directory
```html
```
+ add `test.sass`
```scss
$color: green;
body { background: $color; }
```
+ start the server: `$ atma server`
+ open the browser: `http://localhost:5777/test.html`
----
_(c) MIT License - Atma.js Project_