knitr::opts_chunk$set( collapse = TRUE, comment = "#>" )
While developing web applications, CSS is used to style web application's web pages. The CSS is often written using CSS preprocessor such as SASS or LESS.
rless
is a package, which helps to convert LESS files to CSS files within R environment.
This documentation is divided into three sections:
rless
intergration to Shiny application The parse_less
function is a core function of the package. It takes LESS content and converts it to CSS.
library(rless) less <- " @width: 10px; @height: @width + 10px; #header { width: @width; height: @height; } " css <- parse_less(less) cat(css)
Passing text into parse_less
function is suitable for small chunks. However, for more complex codes, it is more convenient to write LESS file separately and convert the file using convert_file
function. It requires two parameters:
The converted file will be stored in tempdir
folder or use output_folder
argument to set different output location.
The function returns full path to the converted.
less_file <- file.path("path", "to", "styles.less") convert_file(dirname(less_file), basename(less_file), getwd())
When having multiple LESS files, one can use rless
function convert_folder
. The function requires only input folder to be specified. It goes through the folder and converts all files matching a pattern
(*.less by default) into CSS files. tempdir
folder is used again as a default output location.
The function allows to specify optional argument:
styles_folder <- file.path("path", "to", "styles", "folder") paths_to_files <- convert_folder(styles_folder) # set different output folder paths_to_files <- convert_folder(styles_folder, output_folder = getwd()) # convert also files in file.path(styles_folder, "nested_folder", "even_more_nested_folder") paths_to_files <- convert_folder(styles_folder, recursive = TRUE) # convert only files with filename ending with 'styles.less' paths_to_files <- convert_folder(styles_folder, pattern = "^*.styles.less$")
List of paths to converted files is returned.
The following sections introduce the basic concepts of LESS with a use of rless
function parse_less
. More information about LESS features can be found here.
Use variables at multiple places in your LESS/CSS.
library(rless) less <- " @width: 10px; @height: @width + 10px; #header { width: @width; height: @height; } #footer{ width: @width; height: @height; } " css <- parse_less(less) cat(css)
Basic nesting of CSS selectors
less <- " ul { li { color: cyan; } } " css <- parse_less(less) cat(css)
Nesting with reference to parent.
less <- " .button { &-ok { background-color: green; } && { backgrou-color: transparent; } } " css <- parse_less(less) cat(css)
Combine chunks of CSS using mixins.
less <- " .bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } #menu a { color: #111; .bordered(); } .post a { color: red; .bordered(); } " css <- parse_less(less) cat(css)
One of the typical ways of creating web applications in R is using Shiny. This sections shows how easy is to combine it with our rless
package.
# global.R convert_file(getwd(), "styles.less", "www") # ui.R shinyUI( fluidPage( tags$head( tags$link(rel = "stylesheet", type = "text/css", href = "styles.css") ) ) )
# ui.R shinyUI( fluidPage( lapply(convert_folder(input_folder, output_folder), includeCSS) ) )
Any scripts or data that you put into this service are public.
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.