{"id":13810722,"url":"https://github.com/bazelbuild/rules_sass","last_synced_at":"2025-04-05T06:05:16.073Z","repository":{"id":41150377,"uuid":"53955510","full_name":"bazelbuild/rules_sass","owner":"bazelbuild","description":"Sass rules for Bazel","archived":false,"fork":false,"pushed_at":"2024-10-29T22:03:16.000Z","size":359,"stargazers_count":51,"open_issues_count":30,"forks_count":68,"subscribers_count":28,"default_branch":"main","last_synced_at":"2024-10-30T00:38:50.093Z","etag":null,"topics":["bazel","bazel-rules","css","sass"],"latest_commit_sha":null,"homepage":null,"language":"Starlark","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bazelbuild.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":"AUTHORS","dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-03-15T15:21:26.000Z","updated_at":"2024-10-29T22:03:19.000Z","dependencies_parsed_at":"2023-10-12T08:00:04.525Z","dependency_job_id":"99c54fac-66b2-44dd-99d4-d22df8380a64","html_url":"https://github.com/bazelbuild/rules_sass","commit_stats":null,"previous_names":[],"tags_count":216,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bazelbuild%2Frules_sass","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bazelbuild%2Frules_sass/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bazelbuild%2Frules_sass/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bazelbuild%2Frules_sass/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bazelbuild","download_url":"https://codeload.github.com/bazelbuild/rules_sass/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247294538,"owners_count":20915340,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bazel","bazel-rules","css","sass"],"created_at":"2024-08-04T03:00:24.163Z","updated_at":"2025-04-05T06:05:16.054Z","avatar_url":"https://github.com/bazelbuild.png","language":"Starlark","readme":"[![Build status](https://badge.buildkite.com/accb37a80d88e0ffda97f55451d05eea2004ed8bbb80a27958.svg)](https://buildkite.com/bazel/rules-sass-postsubmit)\n\n# Sass Rules for Bazel\n\n## Rules\n* [sass_binary](#sass_binary)\n* [sass_library](#sass_library)\n* [multi_sass_binary](#multi_sass_binary)\n\n## Overview\nThese build rules are used for building [Sass][sass] projects with Bazel.\n\n[sass]: http://www.sass-lang.com\n\n## Setup\nTo use the Sass rules, add the following to your\n`WORKSPACE` file to add the external repositories for Sass, making sure to use the latest\npublished versions:\n\n```py\nhttp_archive(\n    name = \"io_bazel_rules_sass\",\n    # Make sure to check for the latest version when you install\n    url = \"https://github.com/bazelbuild/rules_sass/archive/1.26.3.zip\",\n    strip_prefix = \"rules_sass-1.26.3\",\n    sha256 = \"9dcfba04e4af896626f4760d866f895ea4291bc30bf7287887cefcf4707b6a62\",\n)\n\n# Setup Bazel NodeJS rules.\n# See: https://bazelbuild.github.io/rules_nodejs/install.html.\n\n# Setup repositories which are needed for the Sass rules.\nload(\"@io_bazel_rules_sass//:defs.bzl\", \"sass_repositories\")\nsass_repositories()\n```\n\n## Basic Example\n\nSuppose you have the following directory structure for a simple Sass project:\n\n```\n[workspace]/\n    WORKSPACE\n    hello_world/\n        BUILD\n        main.scss\n    shared/\n        BUILD\n        _fonts.scss\n        _colors.scss\n```\n\n`shared/_fonts.scss`\n\n```scss\n$default-font-stack: Cambria, \"Hoefler Text\", serif;\n$modern-font-stack: Constantia, \"Lucida Bright\", serif;\n```\n\n`shared/_colors.scss`\n\n```scss\n$example-blue: #0000ff;\n$example-red: #ff0000;\n```\n\n`shared/BUILD`\n\n```python\npackage(default_visibility = [\"//visibility:public\"])\n\nload(\"@io_bazel_rules_sass//:defs.bzl\", \"sass_library\")\n\nsass_library(\n    name = \"colors\",\n    srcs = [\"_colors.scss\"],\n)\n\nsass_library(\n    name = \"fonts\",\n    srcs = [\"_fonts.scss\"],\n)\n```\n\n`hello_world/main.scss`:\n\n```scss\n@import \"shared/fonts\";\n@import \"shared/colors\";\n\nhtml {\n  body {\n    font-family: $default-font-stack;\n    h1 {\n      font-family: $modern-font-stack;\n      color: $example-red;\n    }\n  }\n}\n```\n\n`hello_world/BUILD:`\n\n```py\npackage(default_visibility = [\"//visibility:public\"])\n\nload(\"@io_bazel_rules_sass//:defs.bzl\", \"sass_binary\")\n\nsass_binary(\n    name = \"hello_world\",\n    src = \"main.scss\",\n    deps = [\n         \"//shared:colors\",\n         \"//shared:fonts\",\n    ],\n)\n```\n\nBuild the binary:\n\n```\n$ bazel build //hello_world\nINFO: Found 1 target...\nTarget //hello_world:hello_world up-to-date:\n  bazel-bin/hello_world/hello_world.css\n  bazel-bin/hello_world/hello_world.css.map\nINFO: Elapsed time: 1.911s, Critical Path: 0.01s\n```\n\n## Build Rule Reference\n\n\u003ca name=\"reference-sass_binary\"\u003e\u003c/a\u003e\n### sass_binary\n\n```py\nsass_binary(name, src, deps=[], include_paths=[], output_dir=\".\", output_name=\u003csrc_filename.css\u003e, output_style=\"compressed\", sourcemap=True)\n```\n\n`sass_binary` compiles a single CSS output from a single Sass entry-point file. The entry-point file\nmay have dependencies (`sass_library` rules, see below).\n\n\n#### Implicit output targets\n| Label               | Description                                                               |\n|---------------------|---------------------------------------------------------------------------|\n| **output_name**     | The generated CSS output                                                  |\n| **output_name**.map | The [source map][] that can be used to debug the Sass source in-browser   |\n\n[source map]: https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps\n\n\n| Attribute       | Description                                                                   |\n|-----------------|-------------------------------------------------------------------------------|\n| `name`          | Unique name for this rule (required)                                          |\n| `src`           | Sass compilation entry-point (required).                                      |\n| `deps`          | List of dependencies for the `src`. Each dependency is a `sass_library`       |\n| `include_paths` | Additional directories to search when resolving imports                       |\n| `output_dir`    | Output directory, relative to this package                                    |\n| `output_name`   | Output file name, including .css extension. Defaults to `\u003csrc_name\u003e.css`      |\n| `output_style`  | [Output style][] for the generated CSS.                                       |\n| `sourcemap`     | Whether to generate sourcemaps for the generated CSS. Defaults to True.       |\n\n[Output style]: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style\n\n### sass_library\n\n```py\nsass_library(name, srcs, deps=[])\n```\n\nDefines a collection of Sass files that can be depended on by a `sass_binary`. Does not generate\nany outputs.\n\n| Attribute | Description                                                                         |\n|-----------|-------------------------------------------------------------------------------------|\n| `name`    | Unique name for this rule (required)                                                |\n| `srcs`    | Sass files included in this library. Each file should start with an underscore      |\n| `deps`    | Dependencies for the `srcs`. Each dependency is a `sass_library`                    |\n\n### multi_sass_binary\n\n```py\nmulti_sass_binary(name, srcs=[], output_style=\"compressed\", sourcemap=True)\n```\n\n`multi_sass_binary` compiles a list of Sass files and outputs the corresponding\nCSS files and optional sourcemaps. Output is omitted for filenames that start\nwith underscore \"_\".\n\n\n:warning: **WARNING**: This rule does a global compilation, and thus any change in the sources\nwill trigger a build for **all** files. It is inefficient. Always prefer\n`sass_binary` and provide strict dependencies for most efficient compilation.\nThis rule is also not used internally at Google.\n\n\n#### Output targets\n\nThe following pair of files is generated for _each_ file in `srcs`.\n\n| Label              | Description                                                                  |\n|--------------------|------------------------------------------------------------------------------|\n| \u003cfilename\u003e.css     | The generated CSS output                                                     |\n| \u003cfilename\u003e.css.map | The [source map][] that can be used to debug the Sass source in-browser      |\n\n[source map]: https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps\n\n\n| Attribute       | Description                                                                   |\n|-----------------|-------------------------------------------------------------------------------|\n| `name`          | Unique name for this rule (required)                                          |\n| `srcs`          | A list of Sass files (required).                                              |\n| `output_style`  | [Output style][] for the generated CSS.                                       |\n| `sourcemap`     | Whether to generate sourcemaps for the generated CSS. Defaults to True.       |\n\n[Output style]: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style\n\n### npm_sass_library\n\n```py\nnpm_sass_library(name, deps=[])\n```\n\nExtracts direct and transitive Sass files from the given list of dependencies. Dependencies are expected to be\nexternal npm package targets. The extracted Sass files will be made available for consumption within `sass_binary`\nor `sass_library`.\n\n**Note**: If an external npm package exposes a `sass_libary` by itself, it is recommended to use this target instead.\nThe author of an npm package can provide more fine-grained targets for Sass files, while `npm_sass_library` would\nmake all Sass files, including files from transitive dependencies, available for consumption. This can result in\nunnecessary large build graphs slowing down compilation.\n\n| Attribute | Description                                                                         |\n|-----------|-------------------------------------------------------------------------------------|\n| `name`    | Unique name for this rule (required)                                                |\n| `deps`    | External npm package targets for which Sass files are collected (required)          |\n\n**Example:**\n\n```bzl\nnpm_sass_library(\n  name = \"angular_material_sass_deps\",\n  deps = [\"@npm//@angular/material\"],\n)\n\nsass_binary(\n  name = \"my_theme\"\n  src = \"my_theme.scss\",\n  deps = [\":angular_material_sass_deps\"],\n)\n```\n","funding_links":[],"categories":["Additional language support"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbazelbuild%2Frules_sass","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbazelbuild%2Frules_sass","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbazelbuild%2Frules_sass/lists"}