Intro to SCSS

SASS (Syntactically awesome stylesheet) or SCSS (Sassy CSS) as we call it, are CSS preprocessors. Preprocessors generate css files and have their own syntax and own language.
E.g. SASS, LESS. SASS or SCSS is an extention of vanilla CSS that adds variables, mixins, nested rules and many other features.
Our SASS code gets compiled to properly formatted CSS, easing the issues of organising and maintaining code.
SCSS syntax is the most widely used by developers and designers. It makes writing CSS fun again.
SCSS is a superset of CSS written in same way but with new SASS features. SCSS makes writing maintainable CSS easier. The code is more redable in less time and with less code.
In SCSS the files are saved as “.SCSS”.

 

Variable:- 

A value can be set to a variable which is the used instead of the original value. They are time savers declare once and use it where required. E.g. $almond:#eee;
The default value is used only if value isn’t set or assigned any place else.
E.g.:- $default-text: $black !default;

 

Mixins:-

They are resuable piece of code. The purpose of mixin is to make a set of properties reusable. Mixins are functions and functions can accept parameters.
E.g.- @mixin overlay {
background-color:#eee;
}
.modal_bg {
@include overlay();
}

E.g.with parameters- @mixin border-radius($radius) {
$border-radius: $radius;
}
.box {
@include border-radius(3px);
}

 

‘&’ Ampersand parent selector:-

The ‘&’ Ampersand parent selector when we nest, it doesn’t add space between parent selector and child selector hence ‘&’ to join classes. Mostly used with pseudo selectors.
“&’ is a shortcut for parent selector.
E.g. .parent {
&:hover { text-decoration:none;}
}
Output:-
.parent:hover { text-decoration:none;}

 

@extend:-

@extend allows to inherit CSS from another source. CSS is maintainable as we add selector one by one in related selector. HTML remains semantic as each element keeps its descriptive class name.
E.g.- .message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
background-color: transparent;
}

.success {
@extend .message;
border-color: green;
}

Output:-
.message, .success {
border: 1px solid #ccc;
padding: 10px;
color: #333;
background-color: transparent;
}

.success { border-color: green; }

 

Difference between Mixin and Extend:-

@extend doesn’t have parameters but mixin do.
@extend combines selectors but mixins don’t.
SASS @extend is more efficient as it writes common properties only once.

 

Placeholders:-

If we don’t want or need the any selector, then we can transform it into a Sass placeholder by replacing the dot with a percentage sign %.
E.g.- %message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
background-color: transparent;
}

.success {
@extend .message;
border-color: green;
}
Output:-
.success {
border: 1px solid #ccc;
padding: 10px;
color: #333;
background-color: transparent;
}

.success { border-color: green; }

 

Comments:-

// single line comment.
/* multipleline comment */ :- Might not display at exact position
/*! Loud comment */ :- Will be displayed at exact location

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s