/rules_sass

Sass rules for Bazel

Primary LanguagePythonApache License 2.0Apache-2.0

Sass Rules for Bazel

Rules

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.