Sass Rules for Bazel

Overview

These build rules are used for building Sass projects with Bazel.

• Setup
• Basic Example
• Reference
  • sass_binary
  • sass_library

Setup

To use the Sass rules, simply copy the contents of sass.WORKSPACE to your own top level WORKSPACE file.

Basic Example

Suppose you have the following directory structure for a simple Sass project:

[workspace]/
    WORKSPACE
    hello_world/
        BUILD
        main.scss
    shared/
        BUILD
        _fonts.scss
        _colors.scss

shared/_fonts.scss

$default-font-stack: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", ser
if;
$modern-font-stack: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liber
ation Serif", Georgia, serif;

shared/_colors.scss

$example-blue: #0000ff;
$example-red: #ff0000;

shared/BUILD

package(default_visibility = ["//visibility:public"])

load("/tools/build_defs/sass/sass", "sass_library")

sass_library(
    name = "colors",
    srcs = ["_colors.scss"],
)

sass_library(
    name = "fonts",
    srcs = ["_fonts.scss"],
)

hello_world/main.scss:

@import "examples/sass/shared/fonts";
@import "examples/sass/shared/colors";

html {
  body {
    font-family: $default-font-stack;
    h1 {
      font-family: $modern-font-stack;
      color: $example-red;
    }
  }
}

hello_world/BUILD:

package(default_visibility = ["//visibility:public"])

load("/tools/build_defs/sass/sass", "sass_binary")

sass_binary(
    name = "hello_world",
    src = "main.scss",
    deps = [
         "//shared:colors",
         "//shared:fonts",
    ],
)

Build the binary:

$ bazel build //hello_world
INFO: Found 1 target...
Target //hello_world:hello_world up-to-date:
  bazel-bin/hello_world/hello_world.css
  bazel-bin/hello_world/hello_world.css.map
INFO: Elapsed time: 1.911s, Critical Path: 0.01s

Build Rule Reference

sass_binary

sass_binary(name, src, deps=[], output_style="compressed") Used to generate a CSS artifact from a given src sass file.

Implicit output targets

• name.css: The generated CSS artifact containing all the styles.
• name.css.map: a source map that can be used to optionally debug the generated CSS in a browser.

sass_library

sass_library(name, src, deps=[]) Used to reference sass a collection of sass files that a sass_binary may depend on (via @import statements), but should not result in any output targets.