Introduction | Sass
Sass Introduction
Sass Introduction
Introduction to Sass
Sass is the abbreviation of Syntactically Awesome Stylesheet. Sass supports all versions of CSS.
Don't confuse with SaaS, the abbreviation of Software as a Services
What is Sass
Sass is a preprocessor for CSS. Sass makes developers to capable to create CSS programmtically.
- Sass is the superset of CSS
- Sass is the abbreviation of Syntactically Awesome Stylesheet
- Sass is cross-platform
- Sass is an extension to CSS
- Sass is a preprocessor scripting language for CSS
- Sass is completely compatible with all versions of CSS
- Sass is free for commercial use as well (i.e. under MIT license)
Why use Sass
Sass is to save time by minimizing code repetitions
$color : #ddd;
button{
color: $color;
&hover{
color: invert($color);
}
}
button{
color: #ddd;
}
button:hover{
color: #222;
}
Where to use Sass
Create Sass file and compile with Sass preprocessor
When to use Sass
When the project large enough and have complex structure
Whose is Sass
Sass was developed by Natalie Weizenbaum, Chris Eppstein appearing in November 2006
Who should use Sass
Web designer, User Interface developers and User Experience developers should use Sass for its awsome reasons. Students in ther projects, assignments or Final Year Projects (FYP) should avoid Sass as this will take time to learn and will not much benefit them at their this stage.
How Sass works
Sass file is transpiled to CSS format. Sass file is not used directly at client-side. Following is an example:
/* Declaring and assign variables */
$color1: black;
$color2: white;
$width1:1px;
$width2:2px;
/* Use of variables */
body {
background-color: $color1;
color: $color2;
}
div{
width:$width1
}
The assignment is similar to CSS where colon (:) sign seprates the assigned member and the value. In most programming languages assignment is done using equal (=) sign like C#, Java, JavaScript etc.
Sass is a preprocessor for CSS
Sass adopts DRY (Don't Repeat Yourself) approach for CSS.
Sass Prerequisites
Reader should know following technologies to understand and use Sass
- HTML
- CSS
Sass Tools
Sass alternatives
- Less
- Stylus
Sass key points
- Sass is preprocessor for CSS
- Saas is cross platform
- Sass allows variables
- Sass allows functions
- Sass is not used directly at client-side
- DRY approach