For a long time CSS as being used to style websites and applications. With the appearance of pre-processors, SASS has become more and more popular but still hasn't found its way into mainstream production in shiny applications. In this presentation, we explore the different ways shiny currently uses CSS, as well as how you can leverage SASS to improve and simplify your project workflow. video presentation: https://youtu.be/nl0LBU9qbuc https://appsilon.com/shiny/

1. Styling your projects!
Leveraging css and r/sass in R projects
16/04/2019 | PEDRO SILVA | APPSILON DAY

2. Agenda
● What is css?
● Adding css to shiny
● sass vs css. Why use SASS?
● How can you use sass in r (r/sass)
● Resource list
● Bonus: Non well known selectors

3. What is css?

4. What is css (Cascading Style Sheets)?
● Describes how HTML elements are to be
displayed
● Instructions are called statements.
Statements do two things:
○ Identify the elements in an HTML document
that it affects
○ Gives the browser rules on how to draw these
elements
● It can control the layout of multiple web
pages all at once (CSS saves a lot of work!)

5. Adding css to shiny

6. Adding css to shiny
● There are 3 main ways you can add css
styling to your code:
○ Add styling directly to HTML tags
○ Add CSS to your HTML header
○ Add style sheets with the www
directory

7. Adding css to shiny
1. Add styling directly to HTML tags
✘ Easy to lose track of in large projects
✘ Impossible to reuse code in different tags

8. Adding css to shiny
2. Add CSS to your HTML header
✔ Allows code to be reused by using selectors
✘ Rules cannot be cached since we are still declaring styles in the code

9. Adding css to shiny
3. Add style sheets with the www directory
✔ Code can be reused
✔ Allows caching
✔ Allows multiple files to be included
✘ Still has all the limitations for CSS

10. SASS vs CSS

11. SASS vs CSS
● SASS (Systematically Awesome Style Sheets) is a pre-processor of CSS
(SASS code always compiles into CSS).
SASS CSS
Object oriented Statement oriented
Allows nesting .class { p {} } No nesting
Allows variables $var = 5 No variable declaration (yet)
Allows properties to be defined outside of
SASS objects
Code is not reusable (inside CSS)

12. SASS: Mixins
● A Mixin is a block of code that lets us group CSS declarations we may
reuse throughout our site.
Example, displaying an HTML element as a Flex element:
Creating a Mixin:
Using a Mixin:

13. SASS: Functions
● SASS allows you to use functions that can be evaluated inside elements.
Example, function that defines the width of an element:
Generated CSS:

14. SASS: Loops
● Code can also be generated in a loop:
Generated CSS:

15. How can you use sass in r?
(r/sass)

16. How can you use sass in r (r/sass)
● Use a library!
● r/sass implements a CSS preprocessor, letting R developers use SASS to
generate dynamic style sheets.
● sass() can take a SASS string or file and returns a string of compiled CSS

17. main.scss
config.scss

18. Resources
● SASS vignette
https://rstudio.github.io/sass/articles/sass.html
● R/SASS Repository
https://github.com/rstudio/sass
● Basics on CSS
https://www.w3schools.com/css/default.asp
● Dinamic CSS generation in R
https://gallery.shinyapps.io/sass-theme/

19. appsilon.com
Questions?

20. BONUS: Selectors
you might not know
about

21. Bonus: Selectors
* Targets EVERY element on the page
X[attribute="foo"] {} Targets elements with a specific attribute
X ~ Y and X + Y Targets Y elements that have a sibling X:
X ~ Y {} Y elements that have an X before them.
X + Y {} Y elements that have an X IMMEDIATELY before.
X:first-of-type {} and X:last-of-type {} First or last X in a container
X:not(selector) X that is not also selector

22. Bonus: Selectors
X:nth-of-type(condition) Elements in a specific positions inside their container.
Condition can be a few different values:
odd or even will target all odd or even elements
x:nth-of-type(2) will target elements on a specific position
an + b a is a cycle size, n is a counter (starts at 0), and b is an offset value:
x:nth-of-type(3n+0) elements whose index is a multiple of 3
x:nth-of-type(4n+1) every 4th element starting at the first one
Online calculator: https://css-tricks.com/examples/nth-child-tester/