SASS (Syntactically Awesome Style Sheets)
Sass (Syntactically awesome style sheets) is a preprocessor scripting language that is compiled into Cascading Style Sheets (CSS). It enables you to use things like variables, nested rules, inline imports and more. With this, we organize our CSS and make it faster.
It is supported by all browsers: IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera
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.
Sass includes two syntaxes –
SCSS & Indented (simply called ‘Sass’). .SCSS is an extension of CSS syntax. It make more easier and simplest to maintain the large css and it organized it also.
.SASS file it is not fully compliant with CSS syntax, but it’s quicker to write.
Sass provides the following mechanisms: Variables, Nesting, Mixins, And Selector Inheritance
1. VARIABLES
Like other programming languages, Sass allows variables. Under this variables we store some information and this is used anywhere in our css.
2. NESTING
CSS supports logical nesting, but codes blocks themselves are not nested. But Sass allows the nested code. Example here:
3. MIXINS
One of the advantages of using preprocessors is their ability to take the complex, long-winded code and simplify it. This is where mixins come in handy!Example here:
4. PARTIALS
Partial Sass files contain little snippets of CSS that we can include in other Sass files. It is a great way to modularize our CSS and help keep things easier to maintain. Partial is simply a Sass file named with a leading underscore, something like this _partial.scss.Example here:
5. IMPORTS
Our created _partial.scss we can @import in our current file and create a single CSS file. It makes our CSS file organized.Example here:
you have a 2 Sass files, _reset.scss, and base .scss. We want to import _reset.scss into base.scss.
6. EXTEND/INHERITANCE
@extend directive has been called one of Sass’ most powerful features. Using @extend we share a set of CSS properties from one selector to another. It helps keep your Sass very DRY.
%message-shared
border: 1px solid #ccc
padding: 10px
color: #333
.message
@extend %message-shared
.success
@extend %message-shared
border-color: green
.error
@extend %message-shared
border-color: red
Here we see this classes .message, .success, .error behave just like %message-shared. That means anywhere that %message-shared shows up, .message, .success, .error will too. The magic happens in the generated CSS, where each of these classes will get the same CSS properties as %message-shared. This helps us to avoid writing multiple class names on HTML elements.7. OPERATORS
In Sass we’ll have access to standard maths functions like addition, subtraction, multiplication, and division.
