Bundling Sass layers
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_bundle()
to combine
two or more layers or bundles objects into a Sass bundle; this ability to be merged is
the main benefit of using Sass layers versus lower-level forms of sass input.
At a later time, Sass layers may be removed from Sass bundles
by referencing the same name that was used when creating the Sass bundle.
sass_layer( defaults = NULL, declarations = NULL, rules = NULL, html_deps = NULL, file_attachments = character(0), tags = NULL ) sass_bundle(...) sass_bundle_remove(bundle, name) is_sass_bundle(x)
defaults |
A suitable |
declarations |
A suitable |
rules |
A suitable |
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 |
Deprecated. Preserve meta information using a key in |
... |
A collection of |
bundle |
Output value from |
name |
If a Sass layer name is contained in |
x |
object to inspect |
sass_layer
: Compose the parts of a single Sass layer. Object returned is a sass_bundle()
with a single Sass layer
sass_bundle
: Collect sass_bundle()
and/or sass_layer()
objects. Unnamed Sass bundles will be concatenated together, preserving their internal name structures. Named Sass bundles will be condensed into a single Sass layer for easier removal from the returned Sass bundle.
sass_bundle_remove
: Remove a whole sass_layer()
from a sass_bundle()
object.
is_sass_bundle
: Check if x
is a Sass bundle object
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_bundle(core, red_layer)) sass(sass_bundle(core, red_layer, sass_layer(green))) # Example of merging layers and removing a layer # Remember to name the layers that are removable core_layers <- sass_bundle(core, red = red_layer, green = sass_layer(green)) core_layers # pretty printed for console core_slim <- sass_bundle_remove(core_layers, "red") sass(core_slim) # 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)
Please choose more modern alternatives, such as Google Chrome or Mozilla Firefox.