Python
Latest commit 721bc03 Feb 9, 2017 @jart jart committed with davidzchen Add .gitignore file (#4)
Permalink
Failed to load latest commit information.
examples Prep for moving rules to their own repo Mar 9, 2016
sass Use Bazel mirror to download externals (#3) Feb 9, 2017
.gitignore Add .gitignore file (#4) Feb 9, 2017
AUTHORS Prep for moving rules to their own repo Mar 9, 2016
CONTRIBUTING.md Prep for moving rules to their own repo Mar 9, 2016
CONTRIBUTORS Use Bazel mirror to download externals (#3) Feb 9, 2017
LICENSE.txt
README.md Bump version in README to 0.0.2 to prepare for release. (#7) Feb 9, 2017
WORKSPACE Prep for moving rules to their own repo Mar 9, 2016

README.md

Sass Rules for Bazel

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
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.