Sass is an CSS extension language that helps reduce complexity and increase composability when styling a website. Bootstrap Sass is just one example of a Sass-based project that exposes Sass variables to allow users to easily customize CSS styles.
TODO: do a better job here
When a bs_theme() is used with Shiny or R Markdown, the
sass object underlying the theme object is compiled
into CSS at run-time. Compared to custom theming by overlaying
additional CSS rules (which, historically, has been the only way to
implement custom themes), there are at least a few huge benefits in
taking the Sass based approach:
Sass variables (e.g.,
$border-radius) provide a useful abstraction to not only reduce the amount of code you need to write, but it also protects you from future changes in HTML/CSS markup that may end up breaking your CSS rules.The Sass language itself provides many useful tools for writing CSS more elegantly (i.e., variables, functions, and mixins) as well as many useful utiltiles for computing with CSS values (e.g., color
-
Sass variables not only generate a custom build of Bootstrap CSS (thus, avoiding duplicated CSS rules), but it also gives 3rd party components the opportunity to provide better default styles based on underlying sass object (thanks to bslib’s theming tools for custom components).
- This shift in approach allows sophisticated, custom, components like
shiny::sliderInput(),shiny::dateRangeInput(),DT::datatable(), etc. “just work” with custom and dynamically updating themes.
- This shift in approach allows sophisticated, custom, components like