Introduction to Sass Tutorial
SASS stands for Syntactically Awesome Stylesheet. SASS is a CSS pre-processor. It helps to avoid repetition with CSS and also it saves time. SASS is a very powerful CSS extension language. It is more stable. It describes the style of a document more cleanly and structurally.
It has the facility to add variables, inline imports, inheritance etc. It can handle large style sheets keeping them well organized and can run them in small style sheets.
As SASS is a pre-processing language, it provides indented syntax for CSS. It is also easy to maintain.
SASS is a superset of CSS. It contains all the features of CSS. SASS is coded in Ruby.
It provides the document in good structure as compared to flat CSS.
History of SASS
SASS was initially designed by
Hampton Catlin and developed by Natalie Weizenbaum in 2006 as a feature of the HAML markup language.
In 2008, Chris Eppstein, the creator of Compass, later joined primary developer Weizenbaum to continue to extend SASS with SassScript.
SASS is written in Ruby. It has ported to languages such as C, C++, Java,
JavaScript, .Net, Perl, PHP, Python and Scala.
Architecture for a SASS Project
Following is the file organization for SASS project
Difference Between SASS vs. SCSS
SASS |
SCSS |
SASS syntax is more concise |
SCSS is more expressive |
The syntax is easy to read. |
SCSS encourages proper nesting of rules |
The Sass syntax doesn't complain about missing semi-colons. |
It encourages more modular code with @extend |
System Requirements
Operating System: Cross-platform
Browser Support: IE, Firefox, Google Chrome, Safari, Opera
Programming Language: Ruby
SASS Installation
- Install Ruby by clicking on the following link
https://www.ruby-lang.org/en/downloads/
- After installation, go to start menu and open cmd with ruby.
- Enter gem install sass on cmd.
Sass Commands in Ruby
- To install SASS gem: gem install sass
- To run SASS from the command line: sass test_input.scss test_output.css
- To update file: sass --watch test_input.scss:test_output.css
- To check all SASS files: sass --watch app/sass:public/stylesheets
- To view SASS documentation: sass -help
Variables of SASS
Variables are used to store information which can be used in any stylesheet. $ is used to declare a variable.
Syntax:
$font-type: Verdana
$prime-color: red
body
font: 100% $font- type
color: $prime-color
@-Rules and Directives
- @import
It is used to import SASS files.
- @media
It is used to set a style rule for different media types.
- @extend
It is used to share rules and relationship.
- @at-root
It is a collection of nested rules.
- @debug
It is used to detect errors.
- @warn
It is used to given cautionary advice about the problem.
- @error
It is used to display SassScript expression value as a fatal error.
Features of SASS
- It is stable, powerful, and compatible with all versions of CSS.
- It is based on JavaScript and is a superset of CSS.
- SASS is known as syntactic sugar for CSS because it is easy to read and the user can express things clearly.
- It has its own syntax and compiles, which is in readable CSS form.
- SASS is an open source pre-processor also interpreted into CSS.
Advantages of SASS
- Clean CSS can be written.
- CSS can be written quickly.
- Designers and developers work more efficiently.
- It is compatible with all versions of CSS.
- Nested syntax can be used.
- Pre-define functions for color manipulation, mathematics etc.
Disadvantages of SASS
- To learn new features which are present in pre-processor requires a lot of time of the developer.
- If a group of people is working on the same site then each person should use the same preprocessor.
Also Read:
Most Commonly Asked SASS Interview Questions and Answers for Fresher
Reference:
https://www.javatpoint.com/sass-tutorial