Sass is a CSS preprocessor that allows nesting, variables, mixins and more. It can be written using either the indented Sass or SCSS syntax. Sass files are compiled into normal CSS files. Sass supports variables, nesting, mixins, inheritance and other features to help organize large CSS projects and make them more maintainable. Some key Sass directives include @import, @media, @mixin, @if, @for and @each which provide control structures for conditionally including styles and generating repetitive code.

1. SASS
S Y N TA C T I C A L LY AW E S O M E S T Y L E S H E E T

2. AGENDA
a) What is Sass? b) Difference Between SASS and SCSS?
c) How to use comments in SASS and SCSS? d) General Guidelines for Proper Syntax.
e) How to Compile Sass Files f) Variables
g) Nesting h) Interpolation
i) Data Types j) Operations
k) Sass Directives l) Useful Links

3. WHAT IS A SASS ?
• SASS stand for Syntactically Awesome Style Sheets.
• SASS is a CSS Preprocessor.
• SASS can be written in either the sass or scss syntax.
• SASS files compile into CSS files.

4. WHAT IS A PREPROCESSOR
Now the question arises WHAT IS A PREPROCESSOR ?
A Preprocessor is a program that takes one type of data and converts it to
another type of data. In the case of HTML and CSS, some of the more popular
preprocessor languages include Haml and Sass .
Haml is processed into HTML and Sass is processed into CSS.

5. INSTALLATION
There are a couple of ways to start using Sass:​
1. Application (Third party apps)​
2. Command line

6. 1. APPLICATION (THIRD PARTY)
There are good many applications that will get you up and running with Sass in a
few minutes for Mac, Windows, and Linux.​
 Codekit (Paid)​
 Compass.app (Paid, Open Source)​
 LiveReload (Paid, Open Source)​
 Koala (Open Source)​
 Scout (Open Source)​
 Prepros (Paid)​
‘’ Koala and Scout are Open Source Applications. ’’​

7. 2. COMMAND LINE
1
First, Install Ruby
2
Open comment
line check
whether ruby
installed or not.
3
Type - > gem
install sass
4
If SASS
successfully
installed then
use it
5
Create a folder
and .scss file
and run it by
using
-> sass –-watch
file.scss:file.css

8. DIFFERENCE BETWEEN SASS AND
SCSS?
• Sass, also known as the indented syntax.
• Scss, a CSS-like syntax.
• Scss uses brackets and semicolons to indent the code.
• In other hand Sass uses spaces and new lines to indent the code.

10. COMMENTS IN SASS AND SCSS

11. GENERAL
GUIDELINES
FOR PROPER
SYNTAX
• Syntax Only for .scss
• Add few variables with
dollar ($) sign.
• Declare variable value
• Call into the class and id
• Indent it properly

12. VARIABLES
SCSS CSS

13. NESTING
• Nesting allowing authors
to nest selectors within
selectors in order to
create shortcuts.

14. PARENT SELECTOR

15. NESTING PROPERTIES

16. DEFAULT AND GLOBAL FLAGS

17. DEFINING GLOBAL VARIABLES

18. INTERPOLATION
• It provides SassScript variables in selectors and property names using
#{ } syntax. You can specify variables or property names within the curly braces.
• Syntax->
#{name}
Where, $name is the name of the variable or property name.

20. DATA TYPES
Sass supports Seven data types.
1. Numbers (e.g. 1.2, 13, 10px)
2. Strings of text, with and without quotes (e.g. “abc", ‘xyz', abc)
3. Colors (e.g. blue, #04a3f9, rgba(255, 0, 0, 0.5),hsl(), rgb())
4. Booleans (e.g. true, false)
5. Maps from one value to another (e.g. (key1: value1, key2: value2));
6. Lists of values, separated by spaces or commas (e.g. 1.5em 1em 0 2em, Helvetica,
Arial, sans-serif)
7. Nulls (e.g. null)

21. NUMBERS & STRINGS

22. COLORS & LISTS

23. MAPS
• Declare the variables like
this.
• No use of semicolons(;)
only use commas(,)

24. USE MAPS IN CLASS

25. OPERATIONS

26. STRING OPERATIONS

27. DIRECTIVES
@import
@Partial
@media
@extend
@if and @for
@each and @while
@mixins
@at-root
@debug
@warn
@error

28. CREATE FOLDER DIRECTORY

30. HOW TO RUN
THE FOLDER
• First, set your folder
path
• Set your folder
• Run like comment
->sass –watch
master.scss:master.css

31. @IMPORT
• We can import multiple
files in a single import.
• We can only use files
name without extension.
• Always remember the
files order in import.
• Also import the url
• For example-
@import
url(“href="https://fonts.goo
gleapis.com/css?family=Rob
oto" ”);

32. @PARTIALS

33. @MEDIA DIRECTIVE

34. USING VARIABLE IN MEDIA

37. @EXTEND

38. THE @IF DIRECTIVE

39. THE @FOR DIRECTIVE

41. USING VARIABLE IN @FOR DIR.

42. @EACH

43. USING MAPS WITH @EACH

44. @WHILE

45. USING MAPS WITH @WHILE

46. @MIXINS

47. @AT-ROOT

48. @AT-ROOT PROPERTY

49. @DEBUG
• The @debug directive prints the value of a Sass expression to the standard
error output stream.
For Example:-
@debug 10px + 20px;
• When I save the file the output is written to the output stream of my watch
command.

51. @WARN
• The @warn directive prints the value of a Sass expression to the standard
error output stream.
$wrn: 20px;
@warn: “#{$wrn}”;
• It will display the value of the expression as well as the line number of the
warning.

53. @ERROR
• The @error directive gives the value of a Sass expression as an error, again to
the standard error stream.
$test: 1px;
@error “#{$test}”;
• This will display, line number , and value in the standard error stream.

54. USEFUL LINKS
• http://sass-lang.com/
• http://sass-lang.com/documentation/file.SASS_REFERENCE.html
• https://www.sitepoint.com/8-tips-help-get-best-sass/
• http://www.sassmeister.com/
• https://anotheruiguy.gitbooks.io/sassintherealworld_book-i/handy-tools/default-
flag.html