https://github.com/halverneus/transform-sass
(Supports 'package:' imports) Dart transformer for 'pub serve' and 'pub build' that uses Dart Sass to compile 'scss' and 'sass' to 'css'.
https://github.com/halverneus/transform-sass
css-compiler dart dartlang sass scss
Last synced: 6 months ago
JSON representation
(Supports 'package:' imports) Dart transformer for 'pub serve' and 'pub build' that uses Dart Sass to compile 'scss' and 'sass' to 'css'.
- Host: GitHub
- URL: https://github.com/halverneus/transform-sass
- Owner: halverneus
- License: mit
- Created: 2017-04-02T18:25:29.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-08-26T12:17:48.000Z (over 8 years ago)
- Last Synced: 2025-04-09T16:25:00.812Z (11 months ago)
- Topics: css-compiler, dart, dartlang, sass, scss
- Language: Dart
- Size: 11.7 KB
- Stars: 9
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Transform Sass
[](https://gitter.im/transform-sass/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
Transform Sass is a Dart transformer for **pub serve** and **pub build** that
uses [Dart-Sass][https://github.com/sass/dart-sass] for compiling
**scss** and **sass** files into **css**. Transformer supports 'package:...'
imports. This transformer can handle:
* base_project/
* pubspec.yaml
* lib/
* \_base_style.scss
* more/
* \_more_base_style.scss
* \_even_more_base_style.scss
* another_project/
* pubspec.yaml
* lib/
* \_another_style.scss
* your_project/
* pubspec.yaml
* lib/
* \_your_style.scss
* web/
* css/
* style.scss
* more/
* \_more_style.scss
Where the contents are as follows:
### All pubspec.yaml files.
```yaml
...
dependencies:
...
transform_sass: '>=0.3.1'
transformers:
...
- transform_sass
...
```
### \_base_style.scss
```scss
@import 'package:base_project/more/more_base_style';
@import 'more/even_more_base_style';
...
```
### \_another_style.scss
```scss
@import 'package:base_project/base_style';
...
```
### \_your_style.scss
```scss
@import 'package:base_project/base_style';
...
```
### style.css
```scss
@import 'more/more_style';
@import 'package:your_project/another_style';
@import 'package:base_project/base_style'; // Redundant, but present for example
...
```
Simply put, all imports work like Dart. To use the transformer, add the
following two lines to your pubspec.yaml file:
```yaml
dependencies:
transform_sass: '>=0.3.1'
transformers:
- transform_sass
```
Afterwards, run **pub install**. Changes to the CSS in the browser only require
refreshing the browser when running **pub serve**.
## Links
* Source code is available at: https://github.com/halverneus/transform-sass
* Pub is available at: https://pub.dartlang.org/packages/transform_sass