SASS( Systematically Awesome Style Sheets)😎
😳What is sass? and why use?. Advantages & Disadvantages.😛
Sass Introduction
~ Sass stands for Systematically Awesome Style Sheets. It is a CSS pre-processor. It is an extension of CSS that is used to add power and elegance to the basic language. It facilitates you to add variables, nested rules, mixins, inline imports, inheritance and more, all with fully CSS-compatible syntax. Or SASS (Syntactically Awesome Stylesheet) is a CSS pre-processor, which helps to reduce repetition with CSS and saves time. It is more stable and powerful CSS extension language that describes the style of a document cleanly and structurally.
~ Sass (syntactically awesome stylesheets) is a style sheet language initially designed by Hampton Catlin and developed by Natalie Weizenbaum. After its initial versions, Weizenbaum and Chris Eppstein continued to extend Sass with SassScript, a simple scripting language used in Sass files.
~ Sass is a scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). SassScript is the scripting language itself. Sass consists of two syntaxes. The original syntax, called “the indented syntax”, uses a syntax similar to Haml.[4] It uses indentation to separate code blocks and newline characters to separate rules. The newer syntax, “SCSS”, uses block formatting like that of CSS. It uses braces to denote code blocks and semicolons to separate lines within a block. The indented syntax and SCSS files are traditionally given the extensions .sass and .scss, respectively.
~ CSS3 consists of a series of selectors and pseudo-selectors that group rules that apply to them. Sass[5] (in the larger context of both syntaxes) extends CSS by providing several mechanisms available in more traditional programming languages, particularly object-oriented languages, but that is not available to CSS3 itself. When SassScript is interpreted, it creates blocks of CSS rules for various selectors as defined by the Sass file. The Sass interpreter translates SassScript into CSS. Alternatively, Sass can monitor the .sass or .scss file and translate it to an output .css file whenever the .sass or .scss file is saved. Sass is simply syntactic sugar for CSS.
~ The official implementation of Sass is open-source and coded in Ruby; however, other implementations exist, including PHP, and a high-performance implementation in C called libSass. There’s also a Java implementation called JSass.[9]Additionally, Vaadin has a Java implementation of Sass. The indented syntax is a metalanguage. SCSS is a nested metalanguage, as valid CSS is valid SCSS with the same semantics. Sass supports integration with the Firefox extensionFirebug. Sass Script provides the following mechanisms: variables, nesting, mixins, and selector inheritance.
~ Sass is more stable and powerful CSS extension language that describes the style of a document cleanly and structurally. It is very useful to handle large style sheets by keeping them well organized and running quickly small style sheets.
Features of Sass
- Sass is fully CSS-compatible.
- It is more stable, powerful and elegant than CSS.
- It is based on JavaScript and is superset of CSS.
- It has its own syntax and compiles to readable CSS.
- It is an open-source preprocessor that is interpreted into CSS.
- It supports language extensions such as variables, nesting, and mixins.
- It provides many useful functions for manipulating colors and other values.
- It provides many advanced features like control directives for libraries.
- It provides well-formatted, customizable output.
Why use Sass?
~ Following are some reasons behind using Sass:
- Sass is a pre-processing language and it has its own syntax for CSS.
- It is easy, short and clean in a programming construct.
- It has some features that are used for creating awesome style sheets and facilitates writing code more efficiently and easy to maintain.
- It contains all the features of CSS along with some advance features.
- It provides document style presentation better than flat CSS.
- It facilitates reusability methods, logic statements and some of the built-in functions like color manipulation, mathematics and parameter lists.
- It facilitates you to keep your responsive design project more organized.
- You don’t need to repeat similar CSS again and again in your project.
- It is a superset of CSS, which means it contains all the features of CSS and is an open source pre-processor, coded in Ruby.
Advantages and Disadvantages of Sass
~ Advantages
- Sass facilitates you to write clean, easy and less CSS in a programming construct.
- It contains fewer codes so you can write CSS quicker.
- It is more stable, powerful, and elegant because it is an extension of CSS. So, it is easy for designers and developers to work more efficiently and quickly.
- It is compatible with all versions of CSS. So, you can use any available CSS libraries.
- It provides nesting so you can use nested syntax and useful functions like color manipulation, math functions and other values.
~ Disadvantages
- The developer must have enough time to learn new features present in this preprocessor before using it.
- Using Sass may cause of losing benefits of browser’s built-in element inspector.
Sass vs SCSS
Sass provides two distinct syntax:
- SASS
- SCSS
~ Both are similar and do the same thing, but written in different style. SCSS is the latest one and considered better than Sass.
SCSS: SCSS provides the CSS friendly syntax to closing the gap between Sass and CSS. SCSS is called Sassy CSS.
~ Advantage of Sass syntax:
- The syntax of Sass is totally different from CSS but it is shorter and easier to type. You don’t need to type semicolon or braces, even no need to use @mixin or @include when a single character is enough: = and +.
- It also provides clean coding standards because it follows indented syntax.
~ Advantage of SCSS syntax:
- It is fully CSS compatible. You can rename a CSS file as the .scss extension and it will also work. Due to the reason that it follows the syntax of CSS, makes it very easy to learn and work.
- SASS (Syntactically Awesome Stylesheet) is a CSS pre-processor, which helps to reduce repetition with CSS and saves time. It is more stable and powerful CSS extension language that describes the style of document structurally. This tutorial covers the basics of SASS.
~ Sass has two syntaxes. The new main syntax (as of Sass 3) 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”).
