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 applicationThe parse_less
function is a core function of the package. It takes LESS content and converts it to 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.
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.
Basic nesting of CSS selectors
less <- "
ul {
li {
color: cyan;
}
}
"
css <- parse_less(less)
cat(css)
#> ul li {
#> color: cyan;
#> }
Nesting with reference to parent.
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)
#> .bordered {
#> border-top: dotted 1px black;
#> border-bottom: solid 2px black;
#> }
#> #menu a {
#> color: #111;
#> border-top: dotted 1px black;
#> border-bottom: solid 2px black;
#> }
#> .post a {
#> color: red;
#> border-top: dotted 1px black;
#> border-bottom: solid 2px black;
#> }
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.