Long before school started, I heard the name of Sass from a programmer that Sass is a convenient and powerful CSS extension. During these four months of learning CSS, I occasionally think of SASS – what exactly it can do.
When I saw the Seminar’s topics, I chose this topic without thinking. I thought this was an opportunity to learn about it. However, the greater the expectation, the greater the disappointment. It’s not that CSS pre-processors are bad. They do benefit web development but may not be suitable for everyone.
Before deciding whether to use it or not, let’s first understand what CSS Pre-processors are and some of its features that web design newbies can understand.
What is CSS Pre-processor?
CSS pre-processor is a program that compiles unique syntax to regular CSS. Compared with CSS, the syntaxes of CSS pre-processors have abundant features, such as nesting selectors and functions. These features make the code more readable and easy to maintain.
A few CSS pre-processors are mainly used by some developers these days: Sass, LESS, Stylus, etc. These are open source which means we can get them for free, and the source code is public for further development. Each CSS pre-processor has its own syntax rules.
Sass: Syntactically Awesome Style Sheets
Sass was created in 2007 by American programmer Hampton Catlin. The most mature one CSS Pre-processor language. Within Sass, there are two different syntaxes.
The first version of the SASS syntax uses .sass as the file extension and is indent-based. The code can be shorter because it uses indentation for nesting and does not use curly braces and semicolons. It is a strict syntax checking and easy to get errors.
The SCSS syntax was introduced later, and it uses .scss as the file extension. It supports the original CSS syntax with curly braces and semicolons. Developers can adapt SCSS syntax quickly. Therefore, the SCSS syntax made Sass became the most popular CSS pre-processor.
As a first-time user, I can quickly get started. Later, some basic functions will be introduced with SCSS syntax, and you can discover the similarity between them. Basically, we just need to learn how to use its functions.
Less: Leaner Style Sheets
Less was created in 2009 by Alexis Sellier. It is one of the popular tools for web designers. Initially, it was created in Ruby, and later it was built in Javascript.
As it is a JavaScript-based CSS pre-processor, most browsers can run the compiler and read Less code directly. Developers can skip the installation and simply link to the .less file as the stylesheet and then call the compiler JavaScript file from the official provided Content Delivery Network (CDN).
The evolution of CSS pre-processors
Sass is the earliest CSS pre-processor created, and Less was inspired by Sass and created two years later. Less was designed as close as CSS and so became more popular than Sass at that time. The newer versions of Sass also introduced a CSS-like syntax called SCSS. And later on, it became more popular than Less and is used by many developers.
Among those CSS pre-processors, I picked SCSS syntax as the example to introduce some basic functions. I used it to copy the navigation bar of the website of the University of Greenwich (UoG). There are two menus, including two unordered lists and an image.
How to get started
Before we start coding, we need to install the compiler package, and there are a few ways to install it. We can either install it using the command line or download Ruby and then run a command line from PowerShell. It’s a bit complicated process for us to use the command line. The easiest way is to use Visual Studio Code editor. We just need to install the Sass extension simply.
After that, we need to create a SCSS file. Then we can start coding in SCSS syntax. When you finish coding or check the result, you just need to click the “Watch Sass” button. It will be automatically compiled the code to a CSS file. Just link that CSS file on our HTML file as usual. Please be remember that don’t link to the .scss file as the browser does not support it.
Let’s get started
Here is the demo page, which was written in SCSS syntax and followed the above process. This navbar alone uses Sass’s five common features and functions: Nesting, Variables, Lighten and Darken, @mixin and @includes, and @function.
Nesting
In SCSS syntax, if the CSS selectors are in the same hierarchy of HTML code, we can nest the code.
In this case, a div with a class named .gre-logo and its image, we can write img {} inside .gre-logo {}. This feature is called Nesting.
It makes our code has a clear nested and visual hierarchy. It is easier to read and maintain our code than CSS syntax. After being compiled to CSS, it will become the usual way we write on CSS.
SCSS
.gre-logo {
margin-right: auto;
img {
width: 250px;
height: auto;
}
}CSS
.gre-logo {
margin-right: auto;
}
.gre-logo img {
width: 250px;
height: auto;
}Variables
It is more straightforward to set variables on Sass. Start with a $ sign, followed by the name of the variable. Then we can assign the value we want.
I used it for the colours and the width of contents in our case. When I need to use the blue of UoG as the colour of links in the main menu and as the background colour when hovering it, I just need to assign $colour-gre-blue to those attributes. It will become the defined value after being compiled into a CSS file.
One day, if we need to change the colour, we just need to change the value of that variable.
SCSS
$colour-gre-blue: #2e3e80;
$colour-dark: #1a2861;
$colour-white: #ffffff;
$width-content: 1200px;
.second-row {
a {
padding: divide(1em, 2) 1em;
&:link,
&:visited {
color: $colour-gre-blue;
}
&:hover {
background-color: $colour-gre-blue;
color: $colour-white;
}
&:active,
&:focus {
color: $colour-white;
}
}
}
CSS
.second-row a:link,
.second-row a:visited {
color: #2e3e80;
}
.second-row a:hover {
background-color: #2e3e80;
color: #ffffff;
}
.second-row a:active,
.second-row a:focus {
color: #ffffff;
}There is another feature of Sass here. We can use the ampersand to replace the outer selector when using pseudo-class.
Lighten and Darken
One more feature I have used for colour in our case is Lighten and Darken.
When I need to highlight the link to the Portal in a lighter tone of the blue of UoG as its background colour, we don’t need to pick another colour with the same tone on the colour wheel anymore. We can use Lighten and then give it two parameters: the colour and the percentage of lightness. Sass will help us calculate the required colour (HEX code here) and show it on the compiled CSS file.
And it is the same way to darken colours.
SCSS
a.gre-highlight {
background-color: lighten($colour-gre-blue, 19%);
&:hover {
background-color: lighten($colour-gre-blue, 45%);
color: darken($colour-gre-blue, 50%);
}
}
CSS
a.gre-highlight {
background-color: #4f65c0;
}
a.gre-highlight:hover {
background-color: #b1bae3;
color: black;
}@mixin & @include
Except for setting a variable to a value, we can use @mixin to define a set of reusable styles.
In our case, we use @mixin and then specify a name for the style, which is flexbox here. Then assign display: flex and align-items: center to it. When we need to use Flexbox, use @include and its defined name to call it.
This function allows us to reduce repeated code entry for the same style. Especially in this navbar alone, flexbox has been used three times.
SCSS
@mixin flexbox {
display: flex;
align-items: center;
}
.first-row {
@include flexbox();
justify-content: flex-end;
}
CSS
.first-row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}After being compiled to CSS, we can see that Sass gave us more rows named -webkit-box and -ms-flexbox. They are used for increasing the compatibility with more browsers.
@function
We can also do calculations on Sass. Here is just an example to see if it is working.
Let’s use @function to make a division formula. A divided by B. Then give it a name and two parameters ($a, $b), and use @return to return the calculated value at the place called this function.
In this example, I tried to calculate 1em divided by 2, and it will return the answer, which is 0.5em, after being compiled to CSS.
SCSS
@function divide($a, $b) {
@return $a / $b;
}
.second-row {
a {
padding: divide(1em, 2) 1em;
}
}CSS
.second-row a {
padding: 0.5em 1em;
}Want to learn more?
Many more features and functions on Sass seem powerful, such as loops, maths, and arguments.
You can go to the Documentation page on the Sass website to learn more if you are interested, but it requires some basic understanding of programming languages to understand.
Should we use them now?
After learning about some of the CSS pre-processors functions, I do feel that it can reduce typing time and make the code look more concise. So, should we use them now?
As a newbie in web design who has only learned CSS for four months, my answer is NO. Not that it’s bad, just that I’m not planning to start using it right away at this stage.
Consolidate the fundament of CSS first
Although I have made several simple web pages with CSS in the past few months, I still dare not say that I have mastered CSS. I still feel like I need to practice vanilla CSS coding more.
CSS pre-processors make it easy to come up with clean code, but I would rather be able to write beautiful code by myself. Make sure my code is lean, well-formatted, and made good use of inheritability.
We all need a solid and sound foundation for ourselves, whether for work or to guide others in the future.
Easy to confuse the functions between CSS and CSS pre-processor
Since the syntax of CSS and CSS pre-processor are different but similar, we may feel confused or even misuse them when we are not yet familiar with them.
For example, setting variables in CSS and Sass are written differently. When not familiar with setting variables in CSS, we may use Sass one on CSS. As a result, it fails and then takes effort to debug.
In my case, I used to nest the code on CSS. At that time, nothing but confusion. So when learning CSS (or any other programming language), it’s best not to learn similar languages simultaneously.
Lack of programming fundamentals to harness the power of CSS pre-processors
To be honest, when I was researching, I couldn’t understand a large part of the official documentation, especially not familiar with the indent-based syntax and the functions that use parameters.
In addition, all CSS pre-processors have many extension functions containing programming concepts. For example, the conditional statement of if-else and loops on JavaScript. So that users can make calculations on styles.
However, for those who are just starting to learn JavaScript, it’s like making things more complicated. It feels like CSS pre-processors are programs created by programmers for programmers. So I think CSS pre-processors can be used more effectively after mastering at least one programming language.
Using CSS pre-processors does have its benefits, especially when making large websites or multi-person collaborations. It helps standardise the project and makes it easier to maintain the code. But at the moment, we are only making some websites with only a few pages, and the necessity of using CSS pre-processors is not high. We have so much to learn right now. Obviously, the CSS pre-processor is not a priority.
References:
Sass-lang.com. (2019). Sass: Syntactically Awesome Style Sheets. [online] Available at: https://sass-lang.com/.
Wikipedia. (2022). Sass (stylesheet language). [online] Available at: https://en.wikipedia.org/wiki/Sass_(stylesheet_language) [Accessed 8 Mar. 2022].
lesscss.org. (n.d.). Getting started | Less.js. [online] Available at: https://lesscss.org/.
Wikipedia. (2022). Less (stylesheet language). [online] Available at: https://en.wikipedia.org/wiki/Less_(stylesheet_language) [Accessed 8 Mar. 2022].
Udemy. (n.d.). Advanced CSS and Sass: Flexbox, Grid, Animations and More. [online] Available at: https://www.udemy.com/course/advanced-css-and-sass/ [Accessed 8 Mar. 2022].
LambdaTest. (2019). CSS Preprocessors – Sass vs Less vs Stylus (With Examples). [online] Available at: https://www.lambdatest.com/blog/css-preprocessors-sass-vs-less-vs-stylus-with-examples/.
University of Greenwich. (n.d.). Welcome to the University of Greenwich, London. [online] Available at: https://www.gre.ac.uk/.