You can use sass playground and run below-given examples for better understanding. *Variable in sass :- //Variables $red : #f99; $color: $red; //STYLING .box-wrapper { text-align: center; color: $color; } *Math In SASS :- $fontDefaultValue: 5px; $fontSize: 12px - $fontDefaultValue; //STYLING .box-wrapper { font-size: $fontSize; } *Nesting:- SASS .parent{ width:100px; height:100px; background: #555; .child{ width:50px; height:50px; background: #000; } } HTML <div class="parent"><div class="child">Hello</div> </div> Example2 :- .parent{ width:100px; height:100px; background: #555; &.sibling{ width:80px; } } HTML: - <div class="parent"><div class="child">Hello</div> </div> <br> <br> <div class="parent sibling"><div class="child">Hello</div> </div> Extends :- .msg{ color:red; } .success{ @extend .msg; border: 1px solid; } .error{ @extend .success; color:#555; } HTML - <div class="msg">Hello</div> <div class="success">Hello</div> <div class="error">Hello</div> Placeholder :- %msg{ color:red; } .success{ @extend %msg; border: 1px solid; } MIXIN: - @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box{ @include border-radius(50%); width:100px; height:100px; border:1px solid ; } HTML:- <div class="box"></div> Function:- @function rem($pixel){ @return ($pixel/16)+rem; } .box{ font-size: rem(64); } Diff between function and mixin: - @mixin rem($pixel){ font-size :($pixel/16)+rem; } .box{ @include rem(64); }

1. www.tothenew.com
The SASS way
Yatendra
Bhardwaj

2. www.tothenew.com
Agenda
● SASS installation
● What is Sass?
● Why Would we use Sass?
● Difference b/w Sass and Scss
● Variables In Sass
● Math in Sass
● Functions
● Nesting
● Imports
● Partials
● Extends & placeholders
● Mixins
● Function
● Difference between Functions & Mixins

3. www.tothenew.com
Installation
For Practice we will use:- Sassmeister
1. Download the Ruby installer: http://rubyinstaller.org/downloads/
1. In cmd run command :
gem install sass
1. Go to folder in which your scss folder exists and open cmd run command:
sass --watch scss:css

4. www.tothenew.com
What is SASS
Sass (Syntactically Awesome Style Sheets)
SASS is a CSS Preprocessor.
Sass adds a feature set to your stylesheet markup that makes writing styles fun again.
CSS stylesheets are getting larger, more complex, and harder to maintain.
This is where a preprocessor can help.
Sass lets you use features that don't exist in CSS yet, like
1. Variables
2. Nesting
3. Mixins
4. Function

5. www.tothenew.com
Why would we use Sass?
● Easily Maintainable
● More Done in Less Code
● More Readable in Less Time
● More Features like :-
1. Variables
2. Math
3. Functions
4. Nesting
5. Imports
6. Extends & Placeholders
7. Mixins
8. Function

6. www.tothenew.com
Difference b/w Sass and Scss
SASS vs SCSS
SASS : When Sass first came out, the main syntax was noticeably different from CSS. It used
indentation instead of braces, didn't require semicolons and had shorthand operators.
SCSS : In version 3 Sass changed it's main syntax to .scss.
SCSS is a superset of CSS, and is basically written the exact same, but with all the fun new Sass
features.

7. www.tothenew.com
SASS vs SCSS

8. www.tothenew.com
Variables in SASS
Variables allow you to assign a value to an easy-to-remember placeholder name.
Works with hex values, strings of text, colors, numbers, boolean values, or even value lists
In Short--
No more memorizing hex values :)
Example :--
https://www.sassmeister.com/gist/646f359c2e503ec5020f61ef562acfb2

9. www.tothenew.com
Math in SASS
Unlike CSS, Sass allows us to use mathematical
expressions! This is super helpful within mixins,
and allows us to do some really cool things with
our markup.

10. www.tothenew.com
Examples of Math in Sass

11. www.tothenew.com
Nesting
Basic nesting refers to the ability to have a declaration inside of a declaration. In normal CSS we might
write:
CssSASS

12. www.tothenew.com
Nesting
when u have something like :- a:hover, a:active or two classes on same div eg .box.square or .col-
span-1

13. www.tothenew.com
Imports
Imports allow you to break your styles into separate files and import them into one another.
In fact, we don't even really need the extension:

14. www.tothenew.com
Partials
If you prefix a .sass or .scss file with an underscore, it will not get compiled to
CSS. This is helpful if your file only exists to get imported into a master
style.scss and not explicitly compiled.
_partial.scss.
@import _partial.scss.

15. www.tothenew.com
Extend
In Sass, the @extend directive is an outstanding way to inherit already existing styles.

16. www.tothenew.com
Placeholders
But what about if we want to extend a declaration with a set of styles that doesn't already
exist? Meet the placeholder selector.

17. www.tothenew.com
Mixins
It allows you to include styles the same way @extend would, but with the ability to supply and
interpret arguments.
SASS
CSS

18. www.tothenew.com
Function
A function looks a lot like a mixin, and they both accept the same types of arguments. Although they
look similar,a Sass function behaves differently. While a mixin makes our life easier by lessening
typing repetitive code, a function allows you to strip repeatable logic from your code.

19. www.tothenew.com
Difference between functions and mixins
function
Mixin

20. www.tothenew.com
Adding fonts in SASS
Adding fonts from from local:
@font-face {
font-family: 'Calibri';
src: url('../fonts/Calibri.eot');
src: url('../fonts/Calibri.eot?#iefix') format('embedded-opentype'),
url('../fonts/Calibri.woff') format('woff'),
url('../fonts/Calibri.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Adding Google Fonts:-
Just add link of your google fonts in top of your scss file.

21. www.tothenew.com
Exercise
https://www.sassmeister.com/gist/4821a904cf70799d99d9724a6935d276
Use Roboto font from google font in exercise

22. www.tothenew.com
Thank You