Differences Between Sass and Scss

Sass

sass has some interesting points. First of all, it is shorter and easier to type. No more braces and semi-colons, you don’t need all that stuff. Even better! No need for @mixin or @include, when a single character is enough: = and +.

Also the Sass syntax enforces clean coding standards by relying on indentation. Because a wrong indent is likely to break the whole .sass stylesheet, it makes sure the code is clean and well formatted at all times. There is one way to write Sass code: the good way.

But beware! Indenting means something in Sass. When indenting a selector, it means it is nested into the previous selector.

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.

Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly.

All properly formatted CSS is valid Sass. 

Sass is a preprocessor that will pull in that file before it compiles the CSS. The result is one CSS page that is handled by one HTTP request. What this means is that you can break up your css into smaller, more maintainable chunks while still only serving one page to the browser. Need to fix the text on the button? No more skimming style sheets looking for the pertinent button styles. Just open up your button partial and make the changes. ```@import 'partials/myPartial';``` I am importing _myPartial.scss that is located in a folder named partials. You do not have to include the underscore or the file extension. Sass is smart enough to know which file you mean. The use of partials allows us a great way to modularize our code, making it more portable and easier to maintain.

 

 

Scss

Scss is fully CSS compliant. It means, you can rename a CSS file in .scss and it will just work.

Duplicate statement found in the "What is Scss" section{ Because SCSS is compatible with CSS, it means there is little to no learning curve. The syntax is already known: after all, it’s just CSS with a few extras. This is important when working with inexperienced developers: they will be able to quickly start coding without knowing the first thing about Sass }

it is easier to read because it actually makes sense. When you read @mixin, you know it is a mixin declaration; when you see @include, you are calling a mixin. It doesn’t make any shortcuts, and everything makes sense when read out loud.

Duplicate statement found in the "What is Scss" section {Also, most existing tools, plugins and demos for Sass are developed using the SCSS syntax. As time goes, this syntax is becoming pre-eminent and the default choice, mostly for the above reasons}.