CSS vs SCSS vs SASS What Is Difference Between Them

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 3.00 out of 5)
Loading...

SCSS and SASS are the advance version of CSS3 (CSS), These are their extension with allow you to write clean and quickly they are help tools for CSS language itself. This what we call main difference between CSS vs SCSS vs SASS.css vs scss vs sass

SASS is a CSS pre-processor with syntax advancements it’s a interpreted language that spits out CSS. Some times its with nesting the syntax is better to read and easier to change code using variables.

Here long name and full form of

SASS : Syntactically Awesome Style Sheets

CSS : Cascading Style Sheets

Read also

CSS

When talking about CSS we writes codes like below in full length, even copy paste and white space works into this.

body{
 width: 800px
 color: #ffffff;
}
body content{
 width:750px;
 background:#ffffff;
}

SCSS

Where as in SCSS we can short this code using @mixin so we don’t have to write color and width again and again. we can define like a function in php or other language.

$color: #ffffff;
$width: 800px;

@mixin body{
 width: $width;
 color: $color;
 
 content{
  width: $width;
  background:$color;
 }
}

SASS

In SASS you can write more quickly that SCSS and cleaner you can read more about this on Official Page but as website say it’s not completely like that.

  • It is sensitive to white space if you are using copy and paste
  • It doesn’t seem that it support inline CSS currently
$color: #ffffff;
$width: 800px;
$stack: Helvetica, sans-serif;

body{
 width: $width;
 color: $color;
 font: 100% $stack;
 
 content{
  width: $width;
  background:$color;
  
 }
}

So it’s the main difference and Compare between CSS vs SCSS vs SASS you can just save them using their extension like .css , .scss and .sass this what I learn by reading about these if you have any view on this please let us all know about this.

 

personal technology columnist, author and founder of wRock.org, a widely read tech and how-to blog since 2009. Wants to explore and share interesting Tips, Tutorials and More. Also WordPress Theme Designer @ here. Contact: Contact

Leave a Reply

Your email address will not be published. Required fields are marked *