What’s different between SCSS and SASS | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 10

What’s different between SCSS and SASS

I almost finish my CSS tutorial and I’m ready to practice my skill. I realize that there are so many websites using CSS preprocessor like SCSS or SASS. Is CSS out of date? Do I need to learn CSS preprocessor? Some top sites like Amazon.com using external stylesheet that I cannot read or understand. I doubted if I learned the correct CSS language.

1st Oct 2018, 12:27 PM
John
11 Answers
1st Oct 2018, 12:44 PM
Burey
Burey - avatar
+ 6
John there are a lot of macros for the preprocessors and once you get used to it it's really quite hard to go back
1st Oct 2018, 9:24 PM
Burey
Burey - avatar
+ 5
The most commonly used syntax is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3's syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss. The second, older syntax is known as the indented syntax (or just “.sass”) https://responsivedesign.is/articles/difference-between-sass-and-scss/ https://www.sitesbay.com/sass/sass-difference-between-scss-and-sass
2nd Oct 2018, 12:54 AM
deepak sharma
deepak sharma - avatar
+ 5
CSS is the styling language that uses to style webpages. SCSS is a special type of file for SASS, a program written in Ruby that assembles CSS style sheets for a browser. SASS adds lots of additional functionality to CSS like variables, nesting and more which can make writing CSS easier and faster. SCSS files are processed by the server running a web app to output a traditional CSS that your browser can understand.
2nd Oct 2018, 9:06 AM
Sagar Koli
Sagar Koli - avatar
+ 4
I didnt even know this one Thank you.
2nd Oct 2018, 10:30 PM
Joshua Martin Fontanilla
Joshua Martin Fontanilla - avatar
+ 3
Thank you Burey . It was helpful. Those CSS preprocessors are functional but not readerable.
1st Oct 2018, 1:08 PM
John
+ 2
John any text editor will do, but you need the compiler to turn your files into css in the end.
2nd Oct 2018, 5:41 PM
Petar
+ 2
Sass is a CSS pre-processor with syntax advancements. Style sheets in the advanced syntax are processed by the program, and turned into regular CSS style sheets. However, they do not extend the CSS standard itself. The main reason for this is the addition of features that CSS painfully lacks (like variables). The difference between SCSS and Sass, this text on the Sass documentation page (http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax) should answer the question: There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and used throughout this reference, is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file with the same meaning. This syntax is enhanced with the Sass features described below. Files using this syntax have the .scss extension. The second and older syntax, known as the indented syntax (or sometimes just “Sass”), provides a more concise way of writing CSS. It uses indentation rather than brackets to indi
2nd Oct 2018, 7:46 PM
Andy
Andy - avatar
+ 1
Thank you all for your answer! One more question, do you use any special tool to write SCSS or SASS stylesheet? Like I usually use Sublime Text to write CSS Burey deepak sharma
2nd Oct 2018, 2:54 AM
John
+ 1
It sounds logical to me, thank you Sagar Koli
2nd Oct 2018, 9:12 AM
John
0
Thank you Petar
3rd Oct 2018, 6:43 AM
John