How to Make Your CSS Systematically Awesome - SASS Tutorial in R
<em><strong>Updated</strong>: September 27, 2022.</em>
<h2>SASS Tutorial in R</h2>
SASS is <b>CSS for programmers</b>. It gives you the building blocks that you’re used to, such as variables, conditions, and loops. And it helps you organize. The bigger the project, the bigger the advantages offered by SASS. It’s a way of managing CSS styles even if you’re not very good at it.
Prefer video over text? We have the same topic covered on our YouTube channel:
Table of contents:
<ul><li><a href="#the-difference">SASS vs. CSS - What's the Difference?</a></li><li><a href="#sass-advantages">SASS Tutorial in R: 3 Major Advantages</a></li><li><a href="#sass-in-r">How to Use SASS in R?</a></li><li><a href="#summary">Summary of SASS tutorial in R</a></li></ul>
<hr />
<h2 id="the-difference">SASS vs. CSS - What's the Difference?</h2>
So what about SASS vs. CSS? First of all, what is SASS? SASS (Syntactically Awesome Style Sheets) is a pre-processor of CSS; SASS code always compiles into CSS. In other words, SASS is a way of writing CSS without writing CSS. It gives you a subset of functions, variables, and other structures, that when compiled becomes normal CSS. The difference is that SASS provides other tools that make more sense for a developer.
The differences between the two are in the table below.
<img class="wp-image-2427 size-full" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b0f1dc0d7f7a10877d00f8_2019-04-16-Styling-your-projects-Leveraging-css-and-r-sass-i_a0646cb2.webp" alt="SASS and CSS comparison" width="780" height="276" /> Image 1 - SASS and CSS comparison
SASS is object-oriented, so you don’t have simple statements as I showed you in this previous <a href="https://appsilon.com/howto-css-and-shiny/">post</a>. You have actual objects that work in the SASS environment, such as conditions, variables, and loops. It works more as a language, and not as a syntax. SASS allows nesting, which means that you can define elements inside of other elements.
If you know a bit of CSS, this means that whenever you define an element inside of another element, you are saying that the full rule needs to be the element inside of other elements. So instead of creating multiple rules, you can just create one. Because it’s object-oriented, it allows you to define sets of properties outside of the actual statements, and reuse them multiple times.
<h2 id="sass-advantages">SASS Tutorial in R: 3 Major Advantages</h2>
We'll now go over three major advantages of using SASS over plain CSS. These are in no particular order, but worth learning in your web developer career.
<h3>Mixin - Reuse Statements</h3>
SASS has 3 big advantages. The first advantage is the <b>Mixin</b>. It’s basically a statement that doesn’t really exist in your code but can be used as an object with multiple attributes.
Take, for example, displaying an HTML element as a Flex element. In this case, we have a typical CSS statement. We have a row class that is being given some CSS properties.
<figure class="highlight">
<pre class="language-r"><code class="language-r" data-lang="r">.row {
display: -webkit-flex;
display: flex;
}</code></pre>
</figure>
We can extract these properties into the <b>Mixin</b>. And you do this by adding the Mixin keyword from SASS. You name it something and you add whatever rules you want inside.
Creating a Mixin:
<figure class="highlight">
<pre class="language-r"><code class="language-r" data-lang="r">@mixin flex {
// write the css here
display: -webkit-flex;
display: flex;
}</code></pre>
</figure>
And then when you are creating your SASS code, instead of setting every attribute by hand, you simply include the Mixin into the statement. If you want to use it 10 times, you just include it 10 times instead of defining it 10 times!
Using a Mixin:
<figure class="highlight">
<pre class="language-r"><code class="language-r" data-lang="r">.row {
@include flex;
}
.column {
@include flex;
}</code></pre>
</figure>
<h3>Functions in SASS</h3>
The second big advantage of SASS is functions --SASS actually allows you to define a function and it works in a way that you probably find familiar: name of the function, parameters, body of the function, and return statement.
So you can define a function by using the <b>@function</b>. You give it a name. You give it some parameters. And you give it a return statement.
For example, here is a function that defines the width of an element:
<figure class="highlight">
<pre class="language-r"><code class="language-r" data-lang="r">@function column-width($col, $total:8) {
@return percentage($col/$total);
}
<br>.col-3 {
width: column-width(3);
}</code></pre>
</figure>
Generated CSS:
<figure class="highlight">
<pre class="language-r"><code class="language-r" data-lang="r">.col-3 {
width: 37.5%;
}</code></pre>
</figure>
SASS allows you to use a variety of functions that are pre-built, such as percentage, sum, and average. There’s actually a <a href="https://sass-lang.com/documentation/functions">big list</a>. In the above case, we are creating a function that takes two parameters: a ‘col’ and an optional ‘total’ (if not specified, the default value is set to 8). And it returns the number divided by the total formatted as a percentage. It lets you create a width that works a bit like the Bootstrap columns. You have a total of how many columns in the project, and then you say “from this specific class I want it to occupy X amount of the screen.”
<h3>Loops in SASS</h3>
The third thing that SASS does really well is that it lets you make LOOPS. You can make loops and conditions. Loops are an easy way to create large amounts of CSS without having to repeat yourself. If, for example, we use the same function from before,
we can put that inside of a loop…
<figure class="highlight">
<pre class="language-r"><code class="language-r" data-lang="r">@for $i from 1 through $total {
.col-#{$i} { width: column-width($i) };
}</code></pre>
</figure>
...and create one class for each of those possible widths that we talked about previously.
<img class="wp-image-2432 size-full" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b022f8feb7b3e305d9402e_col1.webp" alt="loops example" width="244" height="491" /> Image 2 - Loops example
<h2 id="sass-in-r">How to Use SASS in R</h2>
R Studio released this really cool library called sass:
<figure class="highlight">
<pre class="language-r"><code class="language-r" data-lang="r">@install.packages("sass")
</code></pre>
</figure>
sass lets you do all of this coding that I discussed before without having to use an external tool for it. So the main way you can use it is that the library exposes a function called “sass.” And this function takes either a string or a file and returns compiled CSS for whatever you fed it.
<figure class="highlight">
<pre class="language-r"><code class="language-r" data-lang="r">library(sass)
sass("
$weight: 500;
h1 { font-weight: $weight; }
h2 { font-weight: $weight * 0.8; }
")
</code></pre>
</figure>
So that means you can define it directly in the code, wherever you want. You can have variables that are set in the application, and then the styling is defined whenever you <b>run</b> the application. If you have, for example, a variable that defines the background color of the application, you can then generate the actual styling rules just for that.
The most typical way, and the way I think you should use it, is by actually giving it a sass (.scss) file. A sass file can have a lot of different things.
Below you can see an example of a file structure you can have in a project. This is the one I usually like to use. It basically consists of the main file and then all of the other files that have small parts of the code and are usually divided according to some logic.
<img class="aligncenter size-full wp-image-2434" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b022f85b956c19cd8f3801_file-structure-ex.webp" alt="file structure example" width="264" height="493" />
The main file is usually the file that passes the function. It lets you import every single file that you want. Here is an example:
<pre class="language-r"><code class="language-r" data-lang="r">// Modules and Variables.
@import "modules/config";
@import "modules/mixins";
@import "modules/functions";
@import "modules/static";
// Partials.
@import "partials/_reset";
@import "partials/_layout";
@import "partials/_component";
@import "partials/_animations";
// Third-party.
@import "vendor/some_library";
@import "vendor/another_font";
</code></pre>
One important thing -- the <b>order</b> matters. If you want to have a file with all of your variables defined in the beginning, it should be the <b>first</b> file that you pass. And then you can use all of those variables in the rest of the files. Here is an example:
<pre class="language-r"><code class="language-r" data-lang="r">// Color pallete
$primary-red: rgb(217, 30, 73);
$primary-dark-red: rgb(166, 43, 78);
$primary-gray: rgb(147, 149, 151);
$primary-light-gray: rgb(167, 169, 172);
// Fonts
$main-font: 'Noto Sans', sans-serif;
// Sizes (in px).
$top-navigation-height: 0;
$bottom-navigation-height: 65;</code></pre>
<hr />
<h2 id="summary">Summary of SASS Tutorial in R</h2>
Long story short, learning SASS is a good idea if you're a web developer. In 2022, some would argue it's a requirement to get an entry-level job, and we agree. SASS is much more powerful than plain CSS, so it's a reasonable job requirement.
Thanks for reading! We hope you give SASS a try. You can find the post author (Pedro Coutinho Silva) on Twitter - <a href="https://twitter.com/sparktuga">@sparktuga</a>.
<strong>Resources: </strong>
<ul><li>SASS vignette: <a href="https://rstudio.github.io/sass/articles/sass.html">https://rstudio.github.io/sass/articles/sass.html</a></li><li>R/SASS Repository: <a href="https://github.com/rstudio/sass">https://github.com/rstudio/sass</a></li><li>Basics of CSS: <a href="https://www.w3schools.com/css/default.asp">https://www.w3schools.com/css/default.asp</a></li><li>Dynamic CSS generation in R: <a href="https://gallery.shinyapps.io/sass-theme/">https://gallery.shinyapps.io/sass-theme/</a></li></ul>
