Sass Rules for Bazel

Rules

sass_binary
sass_library

Overview

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

Setup

To use the Sass rules, add the following to your WORKSPACE file to add the external repositories for Sass:

git_repository(
    name = "io_bazel_rules_sass",
    remote = "https://github.com/bazelbuild/rules_sass.git",
    tag = "0.0.2",
)

load("@io_bazel_rules_sass//sass:sass.bzl", "sass_repositories")

sass_repositories()

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("@io_bazel_rules_sass//sass:sass.bzl", "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("@io_bazel_rules_sass//sass:sass.bzl", "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`	source map that can be used to optionally debug the generated CSS in a browser.

Attributes
`name`	`Name, required` A unique name for this rule. This name will also be used as the name of the generated CSS and source map file of this rule.
`src`	`Main source file, required` The primary Sass source file that will be compiled to CSS. `sass_binary` assumes a 1:1 mapping of src to output CSS file (and source map).
`deps`	`list of labels, optional` Each target should be defined using a `filegroup` rule and should only include "_" prefixed files that are referenced via `@import` in the target's source file.
`output_style`	`string; optional` Defaults to `compressed`. Can be set to one of the following output styles defined by `sassc`.

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.

Attributes

Attributes
`name`	`Name, required` A unique name for this rule.
`srcs`	`a list of labels, required` `sass_library` all files should start with an underscore, eg: _colors.scss.
`deps`	`list of labels, optional` This could be any other `sass_library` targets that this target may include.

name

Name, required

A unique name for this rule.

srcs

a list of labels, required

sass_library all files should start with an underscore, eg: _colors.scss.

deps

list of labels, optional

This could be any other sass_library targets that this target may include.

quittle/rules_sass