Originally published at medium on Jan 17, 2024.
SASS is a CSS preprocessor that emerged years ago to simplify the process of writing CSS. To use SASS, we need to install it on our device, and since browsers cannot read SASS but can read CSS, we need to compile our SASS files to CSS.
Thanks to SASS, we can write more organized and effective CSS with features not present in standard CSS.
Now, let’s ascertain whether this situation persists into 2024.
As of today, Native CSS has become much more powerful, and with the support of browsers, we can comfortably utilize the features that strengthen CSS. Let’s together explore the commonly used powerful features of SCSS and their counterparts in Native CSS:
Variables
Defining variables, a key feature of SCSS, was not present in CSS. Variable declaration allows us to manage many properties from a single source. However, now we can also define variables in CSS in a similar manner. Browser support is over 97%.
:root{
--black:#000;
--fsize:20px;
--bshadow: 0 5px 10px var(--black);
}
.content{
box-shadow: var(--bshadow);
}
h1{
color: var(--white);
font-size: var(--fsize);
}
Nesting
Nested writing in CSS is a syntax used to target a specific area. Thanks to SCSS, we can intervene with elements inside the main class by using it only once without repeatedly writing the main class.
Now, in CSS as well, we can nest by using the main class only once. Let’s take a look at an example:
.container {
padding: 32px;
.content {
margin: 16px;
.btn {
padding: 12px 32px;
border-radius: 16px;
& span {
font-size: 18px;
}
}
}
}
The above example used to be accomplished in CSS as follows:
.container {padding: 32px;}
.container .content {margin: 16px;}
.container .content .btn {padding: 12px 32px; border-radius: 16px;}
.container .content .btn span {font-size: 18px;}
The CSS nesting feature works in all major up-to-date browsers. However, browser support is still below 90%. In its statement, SASS mentioned that it would continue to use the nesting feature until the browser support reaches 98%.
Partials — Modules
In SCSS, separate SCSS files can be created and used for specific areas. For example, we can create a _input.scss file for form elements and control these elements from a single location. Alternatively, we can import the _input.scss file into another SCSS file, such as _form.scss, and use it in the respective file.
In CSS, we can call and use another CSS file in the desired CSS file as follows. By calling mobile.css in our CSS file, all the properties, including the variables defined in mobile.css, become functional. The browser support for @import is above 97%.
@import “mobile.css”;
Mixins
In SCSS, mixins are an important feature that helps create reusable blocks that can take parameters. Let’s promptly examine an example:
@mixin rtl($property, $ltr-value, $rtl-value) {
#{$property}: $ltr-value;
[dir=rtl] & {
#{$property}: $rtl-value;
}
}
.sidebar {
@include rtl(float, left, right);
}
This SCSS file produces the following output in CSS.
.sidebar {
float: left;
}
[dir=rtl] .sidebar {
float: right;
}
check for more detail here.
In CSS, something similar to mixins can be achieved with variable declarations, but there is no direct equivalent to mixins in CSS. By using reusable CSS naming conventions as described in this article, you can eliminate the need for mixins.
Extends/Inheritance
In SCSS, the @extend feature allows us to call properties defined in one selector within another selector. It helps us avoid repeating the same properties multiple times. Let's see an example right away:
.error {
border: 1px #f00;
background-color: #fdd;
&--serious {
@extend .error;
border-width: 3px;
}
}
The CSS output of this code is as follows:
.error, .error--serious {
border: 1px #f00;
background-color: #fdd;
}
.error--serious {
border-width: 3px;
}
This feature doesn’t have an equivalent in CSS, but it is not necessary when following the naming conventions as described in this article.
Operators
In SCSS, calculations can be performed using basic arithmetic operations. However, in CSS, mathematical functions like min(), max(), calc(), and clamp() can be used. Browser support for these functions is over 96%.
.block{width: calc(100vh - 100px);}
.content{width: clamp(200px, 50%, 500px);}
If you want to explore many other features of SASS, you can take a look here.
As someone who has been using SASS for years, I believe that as of 2024, the benefits of SASS, including the hassles of installation, usage, and compilation, no longer justify its use. Particularly as projects grow, the compilation times become significantly burdensome.
With CSS gaining strength day by day, especially in 2024, as the use of older technologies/browsers decreases, the prevalence of modern browsers increases, and CSS continues to improve, it will become even more powerful.
In addition, by meaningfully reusing class naming conventions, we can maintain CSS efficiency at the highest level.
Goodbye SASS! Thanks for everything…
I warmly invite you all to my YouTube channel, where I not only share insightful content on web development but also explore the fascinating dynamics and technologies of the ever-evolving web world.
The sources referenced in our article are:
Originally published at medium on Jan 17, 2024.
Top comments (4)
Considering the growing support and advancements in native CSS tooling, developers may find themselves less reliant on SASS for managing stylesheets in their projects. However, the decision to use SASS or CSS ultimately depends on project requirements, team preferences, and familiarity with each technology.
Overall, as the CSS ecosystem continues to mature, it's worth exploring the capabilities of native CSS and its accompanying tooling alongside traditional preprocessors like SASS.
yes you are right. But with a structure like the one I mentioned in this article, CSS alone will be sufficient.
Nice to see these new features from CSS. But not everyone gonna convert their existing sass to CSS anytime soon
Probably. As a team, we no longer use SCSS
Some comments may only be visible to logged-in visitors. Sign in to view all comments.