Different Methods for Declaring Sass Variables

Tell us what’s happening:

Hi. Just curious about using a different way of declaring variables in Sass. AFAIK the approach below is valid SCSS. I pulled it from a senior dev’s work on a project that I’m on. Curious to know what are the pros/cons of using this instead of the $ notation.


  **Your code so far**

<style type='text/scss'>
:root {
--text-color: red;
  text-align: center;
.blog-post, h2 {
  color: var(--text-color);

<h1 class="header">Learn Sass</h1>
<div class="blog-post">
<h2>Some random title</h2>
<p>This is a paragraph with some random text in it</p>
<div class="blog-post">
<h2>Header #2</h2>
<p>Here is some more random text.</p>
<div class="blog-post">
<h2>Here is another header</h2>
<p>Even more random text within a paragraph</p>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.51 Safari/537.36

Challenge: Store Data with Sass Variables

Link to the challenge:

That’s just the standard css variable declaration, and SCSS being a superset of CSS means that any valid CSS is also valid SCSS, so the above works.

There are no real pro or cons of using this as it’s simply using a standard feature rather than the scss ones.
So the real question is: is it still worth to use sass/scss if I can achieve the exact same thing with “just” CSS?

For example in a trivial example like the one you posted, scss is totally superfluous as it’s not really doing “anything”.

Hope this helps :slight_smile:

Yes, I realized the difference after a discussion with one of my company’s senior devs. A bit of a facepalm/junior dev moment for sure :stuck_out_tongue:

I would say that, per our discussion, it was nice to understand how CSS3 variables can be utilized. Makes me not so insistent on learning the depths of SASS at this time.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.