Will CSS3 really replace SCSS?

When it comes to styling our web pages, we have the choice of using pure CSS or SCSS (in addition to other processors) in our projects. SCSS is a superset of CSS. Most developers agree that SCSS is easier to use than CSS due to its advanced features and clear syntax.

In this article I want to explore the capabilities of SCSS and how CSS has improved over the years. Additionally, I will evaluate whether CSS can be used as a replacement for SCSS in real projects.

CSS Current Functionality

CSS has come a long way since its inception. The development of CSS in recent years has also reduced the need to use JavaScript in the field of animation. Modern browsers even use the GPU to improve the performance of these CSS animations. We can now even build complex responsive grid layouts using CSS with just a little learning.

There are many new features in CSS today, but this article will focus on some of the new features that are commonly used in modern web applications.

• In building any web application, the most important part is the layout of the page. Most of us have relied on CSS frameworks like Bootstrap for years, but CSS now offers new features like Grid, Subgrid, Flexbox, etc. to build layouts natively. While Flexbox is widely popular among developers, Grid layout is catching up.
• Flexible text layout
• The powerful capabilities of Transition and Transform mean that we no longer need to use JavaScript to create animations.
• Custom properties or variables

Features of SCSS

SCSS supports the use of variables - avoiding redundant code

We can actually reuse a bunch of color or other element definitions (such as font ) in our stylesheets. In order to declare these reusable things in a unified place, SCSS provides us with the variable function, allowing us to use a variable name to represent a certain color and use the variable name in other places in the project instead of rewriting the color value.

For example, the following example:

$black: #000000;
$primary-font: 'Ubuntu', 'Helvetica', sans-serif;
$unit: 1rem;

body {
    color: $black;
    font-family: $primary-font;
    padding: #{$unit * 2};
}

CSS also supports variables and custom properties. The following are custom properties in CSS:

--black: #000000;
--width: 800px;
--primaryFont: 'Ubuntu', 'Helvetica', sans-serif;

body {
    width: var(--width);
    color: var(--black);
    font-family: var(--primaryFont);
}

But CSS custom properties are more time-consuming than SCSS variables at runtime.

This is because the browser processes these attributes at runtime. SCSS, on the other hand, is converted to CSS during the preprocessing phase and handles variables. Therefore, the use of variables and code reuse in SCSS has better performance than CSS.

SCSS allows nested syntax — more concise source code

Suppose there is a CSS code block like this:

.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 looks confusing because we have to declare the same parent element repeatedly in order to add styles to the child elements.

But if we use the nested syntax of SCSS, we can write more concise code. If the above code is written in SCSS, it will look like this:

.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, designing components using SCSS seems more elegant and concise compared to traditional CSS.

@extend functionality - avoid repeating the same styles!

In SCSS, we can use @extend to share the same property across different selectors. The usage of @extend with placeholders is as follows:

%unstyled-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

%unstyled-list is a syntax sugar that can avoid repetitive code writing. We can use this list style template in different places, for example:

.search-results {
    @extend %unstyled-list;
}

.advertisements {
    @extend %unstyled-list;
}

.dashboard {
    @extend %unstyled-list;
}

Likewise, we can reuse this definition in all stylesheets that import it.

SCSS also has many features such as functions, mixins, and loops, which can make our front-end development more efficient.

Should I switch from SCSS to CSS?

In the above we explored the functionality currently provided by CSS and the capabilities of SCSS. However, if we compare CSS with SCSS, we will find that there are some necessary features that are not available in CSS.

• As Web applications continue to grow, style sheets will become more complex and larger. The nesting function of CSS will greatly improve the readability of the code, making it easier for us to develop such projects. However, as of the time of writing this article, CSS does not yet support this feature.
• CSS cannot process flow control rules. SCSS provides built-in flow control rules such as @if , @else , @each , for and @while . As a programmer, I find this feature very useful for defining styles. This also allows us to write less and more concise code.
• In addition, SCSS supports the standard set of numeric operators, whereas in CSS we have to use the calc() function to perform numerical calculations. SCSS numerical operations can also automatically convert between compatible units.

However, the calc() CSS function has few restrictions, such as the divisor must be a number for division, or at least one argument must be a number for multiplication.

• Another important aspect is style reuse, which is the "killer feature" of SCSS. In this regard, SCSS offers many features such as built-in modules, mappings, loops, and variables.

Therefore, I think that even though CSS has been born with many new features, SCSS is still a better choice. Let us know what you think in the comments below.

This is the end of this article about whether CSS3 will really replace SCSS. For more information about whether CSS3 will replace SCSS, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!