This content originally appeared on Bits and Pieces - Medium and was authored by Viduni Wickramarachchi
Should We Use CSS or SCSS in 2021?
With the continuously improving CSS over the years, is SCSS relevant anymore? Let’s find out.
When it comes to the domain of styling web pages, we have the choice of using plain CSS or SCSS in a project (among other preprocessors). SCSS is a superset of CSS. Most developers find it more convenient to use it over CSS due to its advanced features and clearer syntax.
In this article, I want to explore the SCSS features and improvements in CSS over the years. In addition to that, I will evaluate whether CSS is ready as a replacement for SCSS in practice.
What CSS offers today
CSS has come a long way since its early days. The recent developments in CSS also eliminate the need to use JavaScript for animations. Modern browsers even utilize GPUs to improve the performance of these animations when we perform them in CSS. We can also create complex and responsive grid layouts with CSS, with a minimal footprint.
While there are many new CSS features, I want to emphasize the new features we often use in modern web applications.
- In any web application, the primary building block of the page is the page layout. While many of us relied on CSS frameworks like Bootstrap for many years, CSS now offers Grid, Subgrid, and Flexbox to structure the layout natively in a web page. While Flexbox is widely popular among developers, Grid is catching up.
- Typographic flexibilities.
- Power of Transitions and Transforms will take out the need for JavaScript for Animations.
- Custom properties /variable support. That feature is especially important when sharing and reusing CSS components using tools like Bit (Github). They allow us to compose themes — sizes, color palettes, fonts, etc — these are all components that can be used independently or composed to form a full theme.
Features of SCSS
SCSS allows variables — Avoid repeating!
We re-use a lot of colors and other elements such as fonts in our styling code. In order to declare these re-used properties in one place, SCSS offers variables. This gives us the ability to define a color under a variable name and use the variable name everywhere in the project rather than repeating the color value.
Let’s have a look at an example.
$black: #00000;
$primary-font: $ubuntu-font: 'Ubuntu', 'Helvetica', sans-serif;
$unit: 1rem;
body {
color: $black;
font-family: $primary-font;
padding: #{$unit * 2};
}CSS lets us use variables as well using custom properties. This is how custom properties in CSS would look like.
--black: #00000;
--width: 800px;
--primaryFont: $ubuntu-font: 'Ubuntu', 'Helvetica', sans-serif;
body {
width: var(--width);
color: var(--black);
font-family: var(--primaryFont);
}However, CSS custom properties are expensive at run-time than SCSS variables.
The reason being they are processed by the browser during runtime. Opposed to that, SCSS variables are determined at the pre-processing stage when SCSS is converted to CSS. Therefore, the use of variables and code re-use is better in performance with SCSS.
SCSS allows nested syntax — Cleaner source code?
If we consider a block of code in CSS such as,
.header {
padding: 1rem;
border-bottom: 1px solid grey;
}.header .nav {
list-style: none;
}.header .nav li {
display: inline-flex;
}.header .nav li a {
display: flex;
padding: 0.5rem;
color: red;
}The above code seems cluttered with the same parent class having to repeat in order to apply styling for the child classes.
However, with SCSS you can use a nested syntax that produces much cleaner code. The above code in SCSS would look like the following.
.header {
padding: 1rem;
border-bottom: 1px solid grey; .nav {
list-style: none; li {
display: inline-flex; a {
display: flex;
padding: 0.5rem;
color: red;
}
}}
}
Therefore, styling your components using SCSS than conventional CSS seems much better and cleaner.
@extend feature — Avoid repeating the same styles!
In SCSS you can use@extend to share properties between one selector and another. The use @extend with placeholders would look like the following.
%unstyled-list {
list-style: none;
margin: 0;
padding: 0;
}%unstyled-list is a placeholder that can be used to avoid code repetition when you need to use the above list styling pattern in multiple places.
.search-results {
@extend %unstyled-list;
}.advertisements {
@extend %unstyled-list;
}.dashboard {
@extend %unstyled-list;
}Likewise, you can re-use this pattern in all your stylesheets.
There are a lot more features in SCSS like functions, mixins, loops, etc., which makes the life of a frontend developer easier.
Should we switch to CSS from SCSS?
We have been exploring what CSS offers today and the features of SCSS so far. However, if we compare CSS with SCSS, we can find a few essential features that are not yet available in CSS at the moment.
- With the growth of a web application, stylesheets tend to become complex and larger. The ability to nest CSS would come as a life savior for everyone in such a project to improve readability. However, as of writing this article, CSS does not support that.
- CSS isn’t capable of handling flow control rules. SCSS provides @if, @else, @each, $for, and @while flow control rules out of the box. As a programmer, I find this highly useful when it comes to emitting styles. This also allows you to write less and cleaner code.
- Out of the box, SCSS supports the standard set of numeric operators for numbers wherein CSS you have to use calc() function for numeric operations. SCSS numeric operations will automatically convert between compatible units.
However, calc() function of CSS has few limitations such as with division, the right-hand side must be a number and for multiplication at least one of the arguments must be a number.
- The other important aspect is the style reuse which is a stronghold for SCSS. For example, SCSS provides many features such as built-in modules, maps, loops, and variables to reuse styles.
Therefore, in my opinion, even with the latest features of CSS, SCSS remains the better option. Let me know your thoughts in the comments below.
I hope you enjoyed the article. Thanks for reading!
Learn More
- Improve Page Rendering Speed Using Only CSS
- How we Build a Design System
- CSS Clamp(): The Responsive Combination We’ve All Been Waiting For
Will SCSS be replaced by CSS3? was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Viduni Wickramarachchi
Viduni Wickramarachchi | Sciencx (2021-02-02T19:12:42+00:00) Will SCSS be replaced by CSS3?. Retrieved from https://www.scien.cx/2021/02/02/will-scss-be-replaced-by-css3/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.