Skip to content
Transpile sass files using the "build" package.
Dart HTML CSS
Branch: master
Clone or download
Pull request Compare This branch is 6 commits behind dart-league:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
lib
test
.gitignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
README.mdtmpl
analysis_options.yaml
build.yaml
pubspec.yaml

README.md

sass_builder

Build Status

Transpile sass files using the build package and the dart implementation of sass.

Attention: Transformer has been removed in v2.0.0.

The transformer provided by this package has been removed. The pub build and pub serve commands have been replaced by build_runner in version 2.0.0-dev.51.0 of the Dart SDK.

Usage

1. Create a pubspec.yaml file containing the following code:

dependencies:
    # update to the latest version
    bootstrap_sass: any
dev_dependencies:
    # update to the latest version
    sass_builder: ^2.0.0
    build_runner: ^0.8.8

2. Create web/main.scss containing the following code:

@import "sub";
@import "package:bootstrap_sass/scss/variables";

.a {
  color: blue;
}

.c {
  color: $body-color;
}

3. Create web/_sub.scss containing the following code:

.b {
  color: red;
}

4. Create web/index.html containing the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sample</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
<div class="a">Some Text</div>
<div class="b">Some Text</div>
<div class="c">Some Text</div>
</body>
</html>

5. Run pub run build_runner serve and then go to localhost:8080 with a browser and check if the file web/main.css was generated containing:

.b {
  color: red;
}

.a {
  color: blue;
}

.c {
  color: #373a3c;
}

Builder Options

To configure options for the builder see the build_config README.

  • outputStyle: Supports expanded or compressed. Defaults to expanded.

Example:

targets:
  $default:
    builders:
      sass_builder:
        options:
          outputStyle: compressed
You can’t perform that action at this time.