


Notice how Sass requires the use of an extra character (the dollar sign) to reference variables. Once again we see that the Stylus syntax was is a little more succinct. We’ll write the same declaration both languages and see where the differences lie. Let’s start with a direct comparison of both syntaxes at their most basic level. In general, just keep in mind that Sass and SCSS are largely the same feature wise, the only difference is how you write them. SCSS: Which Syntax is Better?” from The Sass Way. If you’re looking for a good discussion on this topic, check out “Sass vs. SCSS though so I will refrain from waxing on about this topic. While SCSS was an attempt to reign Sass back in and make the syntax more closely mirror CSS, Stylus follows the ways of the original Sass language in its abandonment of most structural syntax such as semicolons and curly braces.Īlas, this is not an article on the merits of Sass vs.

However, for the sake of comparison, Sass is actually much closer to Stylus than its sibling SCSS. The latter of these is the newest form, so it’s likely the one that you’re most familiar with. The syntax we’ll be using today is Sass, not SCSS. One little detail needs to be addressed before we dive into this any further. In both codes, two variables are declared and applied to the body element of HTML.

Coding Examples of Old and New Syntaxes of Sass Preprocessorīelow are examples of the old syntaxes of the SASS preprocessor. To make CSS readable and maintained easily by using the additional features of the CSS preprocessor. It’s a language similar to CSS with additional features like nesting selectors, mixin, inheritance selectors, etc. The CSS preprocessor is a scripting language that extends regular CSS to compile the scripted language into the regular CSS syntax.
