What is a CSS preprocessor and what does it do?

What does a css preprocessor do exactly? CSS Preprocessors are an extension to css that allow you to write css with many helpful features such as nesting, modules, functions, variables, and much more. Behind the scenes, the CSS preprocessor are compiling your code into normal css. Let's take a look at an example.

Let's say I have a section (<section>) that has a light background. Within the section, there is a heading (<h2>) and there are several paragraphs (<p>). We may want the paragraphs to be lighter in color than the section headings. Sometimes a paragraph may have a link (<a>) and the link must be red and also have a thick red underline. In addition to paragraphs, some sections may also have an image (<img>)that have a fixed width. Let's say that I want to set the width of the first image in each section to 300px. So, what would the css look like for all of these elements?

Using CSS

In css, you might write the styles in the following way.

section {
    padding: 16px;
    background-color: #f6f6f6;
}

section h2 {
    font-size: 21pt;
    color: #252525;
}

section p {
    font-size: 16pt;
    color: #3f454b;
}

section p a {
    color: red;
    text-decoration: none;
    -webkit-box-shadow: inset 0 -2px 0 0 red;
    box-shadow: inset 0 -2px 0 0 red;
}

section img {
    width: 100px;
}

section img:first-child {
    width: 300px;
}

This is a simple example, but there are some things that could be improved and prep for future styles. For example, what if we wanted to use the link color in other places? It is possible to copy and paste the value where we need it, but what if you were to change the color again? It would be nice to assign the color to a variable which could be called anywhere we like. This would eliminate the need to update the values manually and may result in inconsistent color values.

What about the box shadow? Is there a better way to write it? -webkit- is a vendor prefix so that other browsers or older versions can interpret properties correctly. It would be nice if we could write this once.

The other issue is the way child elements are selected. Notice how all child elements start with section. It would nice if there was a way we could type this once. This may seem like it is not a major issue as this example is fairly small, but it can become difficult to manage when you are working with longer class names, when class names change, when there are many nested elements with child elements, adding in hover states, generating pseudo-elements, and much more.

Using SCSS

Let's rewrite this using the css preprocessor SASS. There are a few css preprocessors available, but I will mainly focus on using sass; specifically, .scss files. You can use .sass files, but the indentation rules are hard to work with. I prefer .scss files as the syntax rules follow normal css.

Using the list of complaints above, here is how to address these issues using sass.

1. Rewrite common values as variables: In sass, variables are defined with $variable_name: somevalue. For example, let's say we want to specify the color blue $blue: #5177b8;.
2. Use mixins to for box shadow: Using SASS mixins, we can create a function that returns the css markup for a box shadow based on an input value. Mixins can be defined by using @mixin mymixin($somevalue){ some-property: $somevalue } and then used anywhere by using @include mymixin("hello, world")
3. Use SASS Nesting: The greatest thing about preprocessors is nested selector paths. This eliminates the need to type the same paths each time you want to style a child element. This is incredibly helpful when adding styles for hover states and for nth child rules.

Here is the same css, but rewritten using scss variables, mixins, and nested selectors.

// variables: colors
$heading-color: #252525;  // dark gray
$text-color: #3f454b;     // medium gray
$bg-color: #f6f6f6;       // light gray
$link-color: red;
$link-shadow: inset 0 -2px 0 0 $link-color;  // thick link underline

// mixin for boxshadow
@mixin box-shadow($value){
    -webkit-box-shadow: $value;
    box-shadow: $value;
}

// nested styles
section {
    padding: 16px;
    background-color: $bg-color;

    h2 {
        font-size: 21pt;
        color: $heading-color;
    }

    p {
        font-size: 16pt;
        color: $text-color;

        a {
            color: $link-color;
            text-decoration: none;
            @include box-shadow($link-shadow);
        }
    }

    img {
        width: 100px;

        &:first-child {
            width: 300px;
        }
    }
}

This may seem like more work, but it's much easier in the long run. Since scss allows for nested selectors, you do not need to write long selector paths. Let the preprocessor handle that. All values are rewritten as variables which can now be reused anywhere we want. If the values were to be changed, we do not need to worry about finding all instances of the value and changing them manually (say goodbye to ctrl + f).

Another advantage of using a preprocessor is that you now have a self contained module for section elements. You can save this above code into it's own file (e.g., section.scss) and then use it in other projects. When you view shiny apps as a series components and modules (even css), it makes the development process much easier resulting in consistent UI across applications. This approach is useful when you are developing multiple applications for an organization that has strict branding guidelines.

npm -v
node -v

npm install -g sass

sass -v

myshinyapp /
    + www /
        + css /

css /
    _base.scss          # similar to normalize.css
    _dropdown.scss      # for a dropdown menu
    _footer.scss        # page footer
    _navbar.scss        # navigation bar
    _page.scss          # all page content (i.e., within <main> and <section>)
    _variables.scss     # colors, font sizes, etc.
    index.scss          # load all other files and one off styles

npm init

"scripts": {
    "sass": "sass --watch www/css/index.scss:www/css/styles.css"
}

"scripts": {
    "sass": "sass --watch www/css/index.scss:www/css/styles.min.css --style compressed"
}

npm run sass

echo ".sass-cache/" >> .gitignore

"scripts": {
    "shiny": "Rscript -e 'shiny::runApp(launch.browser=FALSE, port=1234)'"
    ...
}

npm run shiny

"scripts": {
    "sass": "sass --watch www/css/index.scss:www/css/styles.min.css --style compressed",
    "shiny": "Rscript -e 'shiny::runApp(launch.browser=FALSE, port=1234)'",
    "dev": "npm run shiny & npm run sass"
}

npm run dev

install.packages("shiny")
shiny::runGitHub(repo = "shinyAppTutorials", username = "davidruvolo51", subdir = "sass-in-shiny")