Sass variables are definitely not the same as CSS variables. Sass is a pre-compiled language; therefore, you never run sass in the browser. Sass compiles your code into regular css. It doesn't use CSS Variables. Here is an example sass file:
$myColor:#fff;htmlcolor:$myColor
and the compiled file:
html{color:#fff;}
As you can see, we don't have to use the CSS variables which aren't supported by all browsers.
Actually, I believe that CSS variables are better than SASS's, for two main reasons:
They can be modified from within media queries. For example, you write some css which use a specific value stored in a variable and then, on the media query, you don't need to repeat the same code if all you need is a few calculations based on a different value. You can just declare the variable again, with the new value.
They can be manipulated with JavaScript, which is a big thing.
Personally, I like SASS and I use it all the time, but I've started using native variables for the aforementioned reason.
Here is a small pen that demonstrates how those two can work together and how easy it is to manipulate them with JS (and a more detailed explanation here).
Yeah, I agree they are better than SASS variables. I am also pretty sure that some CSS frameworks are using CSS variables to allow you to customize the theme colors which is a bonus when you don't want to style stuff but you want to dynamically change the theme colors.
CSS has variables though.
Yes i knew that comment was coming hahha, but are not the same as SASS one
Sass variables are definitely not the same as CSS variables. Sass is a pre-compiled language; therefore, you never run sass in the browser. Sass compiles your code into regular css. It doesn't use CSS Variables. Here is an example sass file:
and the compiled file:
As you can see, we don't have to use the CSS variables which aren't supported by all browsers.
Actually, I believe that CSS variables are better than SASS's, for two main reasons:
Personally, I like SASS and I use it all the time, but I've started using native variables for the aforementioned reason.
Here is a small pen that demonstrates how those two can work together and how easy it is to manipulate them with JS (and a more detailed explanation here).
Thanks for sharing you knowledge Giorgos, I totally agree, I didn't know about the root thing... and thanks for the article :)
Yeah, I agree they are better than SASS variables. I am also pretty sure that some CSS frameworks are using CSS variables to allow you to customize the theme colors which is a bonus when you don't want to style stuff but you want to dynamically change the theme colors.
CSS has math too