Sass layers are a way to group a set of related Sass variable definitions, function/mixin declarations, and CSS rules into a single object. Use sass_layer() to create these objects, and sass_layer_merge() to combine two or more layer objects into a single layer; this ability to be merged is the main benefit of using Sass layers versus lower-level forms of sass input.

sass_layer_merge(...)

sass_layer(
  defaults = "",
  declarations = "",
  rules = "",
  html_deps = NULL,
  file_attachments = character(0),
  tags = character(0)
)

Arguments

...

A collection of sass_layer()s and/or objects that as_sass() understands. Arguments should be provided in reverse priority order: defaults, declarations, and rules in later layers will take precedence over those of previous layers. Non-layer values will be converted to layers by calling sass_layer(rules = ...).

defaults

A suitable sass::as_sass() input. Intended for declaring variables with !default. When layers are combined, defaults are merged in reverse order; that is, sass_layer_merge(layer1, layer2) will include layer2$defaults before layer1$defaults.

declarations

A suitable sass::as_sass() input. Intended for function and mixin declarations, and variable declarations without !default; not intended for actual CSS rules. These will be merged in forward order; that is, sass_layer_merge(layer1, layer2) will include layer1$declarations before layer2$declarations.

rules

A suitable sass::as_sass() input. Intended for actual CSS rules. These will be merged in forward order; that is, sass_layer_merge(layer1, layer2) will include layer1$rules before layer2$rules.

html_deps

An HTML dependency (or a list of them).

file_attachments

A named character vector, representing file assets that are referenced (using relative paths) from the sass in this layer. The vector names should be a relative path, and the corresponding vector values should be absolute paths to files or directories that exist; at render time, each value will be copied to the relative path indicated by its name. (For directories, the contents of the source directory will be copied into the destination directory; the directory itself will not be copied.) You can also omit the name, in which case that file or directory will be copied directly into the output directory.

tags

A character vector with zero or more elements. Can be used to preserve simple metadata as layers are merged.

Examples

blue <- list(color = "blue !default") red <- list(color = "red !default") green <- list(color = "green !default") # a sass_layer() by itself is not very useful, it just defines some # SASS to place before (defaults) and after (declarations, rules) core <- sass_layer(defaults = blue, rules = "body { color: $color; }") core
#> $defaults #> /* Sass */ #> $color: blue !default; #> #> $declarations #> /* Sass */ #> #> #> $rules #> /* Sass */ #> body { color: $color; } #> #> $html_deps #> NULL #> #> $file_attachments #> character(0) #> #> $tags #> character(0) #> #> attr(,"class") #> [1] "sass_layer"
sass(core)
#> /* CSS */ #> body { #> color: blue; #> } #>
# However, by stacking sass_layer()s, we have ability to place # SASS both before and after some other sass (e.g., core) # Here we place a red default _before_ the blue default and export the # color SASS variable as a CSS variable _after_ the core red_layer <- sass_layer(red, rules = ":root{ --color: #{$color}; }") sass(sass_layer_merge(core, red_layer))
#> /* CSS */ #> body { #> color: red; #> } #> #> :root { #> --color: red; #> } #>
sass(sass_layer_merge(core, red_layer, sass_layer(green)))
#> /* CSS */ #> body { #> color: green; #> } #> #> :root { #> --color: green; #> } #>
# File attachment example: Create a checkboard pattern .png, then # use it from a sass layer tmp_png <- tempfile(fileext = ".png") grDevices::png(filename = tmp_png, width = 20, height = 20, bg = "transparent", antialias = "none") par(mar = rep_len(0,4), xaxs = "i", yaxs = "i") plot.new() rect(c(0,0.5), c(0,0.5), c(0.5,1), c(0.5,1), col = "#00000044", border=NA) dev.off()
#> pdf #> 2
layer <- sass_layer( rules = ".bg-check { background-image: url(images/demo_checkboard_bg.png) }", file_attachments = c("images/demo_checkboard_bg.png" = tmp_png) ) output_path <- tempfile(fileext = ".css") sass(layer, output = output_path, write_attachments = TRUE)