
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)
)
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 = ...)
.
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
.
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
.
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
.
An HTML dependency (or a list of them).
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.
A character vector with zero or more elements. Can be used to preserve simple metadata as layers are merged.
# NOT RUN {
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
sass(core)
# 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))
sass(sass_layer_merge(core, red_layer, sass_layer(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()
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)
# }
Run the code above in your browser using DataLab