The document provides an overview of Sass (Syntactically Awesome Style Sheets), a CSS preprocessor that allows for variables, nesting, mixins, and more, making CSS writing more efficient and organized. It compares the two Sass syntaxes (the indented syntax and SCSS), highlights various features such as functions, looping, and importing partials, and explains their benefits for developers. Additionally, it covers output styles and includes examples of how to use different functionalities of Sass.

1. Nikhil Kumar | Software Consultant
KnÓldus Software LLP
Nikhil Kumar | Software Consultant
KnÓldus Software LLP

2. ●
Sass
●
Sass Syntaxes: code example
●
Benefits of using Sass
●
Sass Vs Css : code example
●
Variables
●
Nested Syntax
●
Mixins [ @include ]
●
Inheritance : @extends
●
Functions
●
Looping
●
Joining Files
●
_Partials
●
Interactive Shell Interaction
●
Output styles: 4

3. Sass (syntactically awesome style-sheets) is a style sheet language initially
designed by Hampton Catlin and developed by Natalie.
Sass (syntactically awesome style-sheets) is a style sheet language initially
designed by Hampton Catlin and developed by Natalie.
Sass
Sass is a scripting language that is interpreted into Cascading Style Sheets
(CSS). Sass-script is the scripting language itself.
Sass-Script
Sass is a scripting language that is interpreted into Cascading Style Sheets
(CSS). Sass-script is the scripting language itself.
Sass-Script
Some Theory
The official implementation of Sass is open-source and coded in Ruby;
however, other implementations exist, including PHP, and a high-performance
implementation in C called libSass. There's also a Java implementation called
Jsass, there are much more. here
Some Theory
The official implementation of Sass is open-source and coded in Ruby;
however, other implementations exist, including PHP, and a high-performance
implementation in C called libSass. There's also a Java implementation called
Jsass, there are much more. here

4. Syntax- typesSyntax- types
Sass consists of two syntaxes
The original syntax, called "the indented syntax", uses a syntax similar to Haml & Jade etc,
another one is like traditional .css syntax.
Type
s
.sass .scss
A valid CSS is valid SCSS with the same semantics.

5. Scss vs SassScss vs Sass
• HAML-style indentation
• No brackets or semi-
colons, based on
indentation
• Less characters to type
• Enforced
conventions/neatness
• Semi-colon and bracket
syntax
• Superset of normal CSS
• Normal CSS is also valid
SCSS
• Newer and recommended
SCSS SASS

6. Damn!! Is it really magical ??

7. Syntax Example
Sass Scss
$txt-size: 10px
$txt-color: blue
$link-color: red
#main
font-size: $txt-size
color: $txt-color
a
color: $link-color
$txt-size: 10px;
$txt-color: blue;
$link-color: red;
#main{
font-size: $txt-size;
color: $txt-color;
a{
color: $link-color;
}
}

8. Reasons to go with sass: Benefits & Features
●
Ability to define variables
●
Nested syntax
●
Ability to define mixins
●
Mathematical functions
●
Looping Css: @for, @each and @while,
●
Operational functions (such as “lighten” and “darken”)
●
Joining of multiple files
SassScript provides the following mechanisms: variables, nesting, mixins, and selector
inheritance.

9. Variables- $
Types of Variables in Sass
●
Numbers
●
String
●
Boolean
●
Color
●
lists of values, separated by spaces or commas (e.g. 1.5em 1em 0 2em,
Helvetica, Arial, sans-serif)
●
maps from one value to another (e.g. (key1: value1, key2: value2))
Variable names can use hyphens and underscores interchangeably.
$main-width, you can access it as $main_width, and vice versa.

10. Variables
$primary-color: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $primary-color;
color: darken($primary-color, 10%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $primary-color;
}
Scss Compiled Css
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}
Global Variable: $width: 5em !global;

11. Nested Syntax
table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}
li {
font: {
family: serif;
weight: bold;
size: 1.3em;
}
}
Scss Compiled Css
table.hl {
margin: 2em 0;
}
table.hl td.ln {
text-align: right;
}
li {
font-family: serif;
font-weight: bold;
font-size: 1.3em;
}

12. Nested Syntax: Referencing Parent Selectors: &
#main {
color: black;
a {
font-weight: bold;
&:hover { color: red; }
}
}
Scss Compiled Css
#main {
color: black;
}
#main a {
font-weight: bold;
}
#main a:hover {
color: red;
}
You might want to have special styles for when that selector is hovered over or for when the
body element has a certain class. In these cases, you can explicitly specify where the parent
selector should be inserted using the & character.

13. Nested Syntax: Properties
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
Scss Compiled Css
.funky {
font-family: fantasy;
font-size: 30em;
font-weight: bold;
}
In Css: If you want to set a bunch of properties in the same name-space, you have to type it
out each time.

14. Mixins: @mixin, @include
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
Create mixin
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
Mixins allow you to define styles that can be re-used throughout the style-sheet.
They can even take arguments which allows you to produce a wide variety of
styles with very few mixins.
Using created mixin
.page-title {
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ff0000;
padding: 4px;
margin-top: 10px; }
Compiled to

15. Mixins: Arguments
@mixin sexy-border($color, $width)
{
border: {
color: $color;
width: $width;
style: dashed;
}
}
p {
border-color: blue;
border-width: 1in;
border-style: dashed; }
Mixins can take SassScript values as arguments, When defining a mixin, the arguments are
written as variable names separated by commas, all in parentheses after the name.
Create p { @include sexy-border(blue, 1in); }Usage
Compiled to
Default values for their arguments @mixin sexy-border($color, $width: 1px) {

16. Mixins: Variable Arguments
@mixin box-shadow($shadows...)
{
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
.shadows {
-moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
-webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px
#999;
box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}
Sometimes it makes sense for a mixin or function to take an unknown number of arguments.
For example: box-shadow
Create
.shadows {
@include box-shadow(0px 4px 5px #666,
2px 6px 10px #999);
}
Usage
Compiled to

17. Looping Css: @while
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
Sass allows for iterating over variables using @for, @each and @while, which can be used
to apply different styles to elements with similar classes or ids.
Create
.item-6 {
width: 12em; }
.item-4 {
width: 8em; }
.item-2 {
width: 4em; }
Compiled to

18. Looping Css: @each
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
The @each directive usually has the form @each $var in <list or map>. $var can be any
variable name, like $length or $name, and <list or map> is a SassScript expression that
returns a list or a map.
Create
Compiled To
.puma-icon {
background-image: url('/images/puma.png'); }
.sea-slug-icon {
background-image: url('/images/sea-slug.png'); }
.egret-icon {
background-image: url('/images/egret.png'); }
.salamander-icon {
background-image: url('/images/salamander.png'); }

19. Looping Css: @if - @else
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
The @if directive takes a SassScript expression and uses the styles nested beneath it if the
expression returns anything other than false or null:
Create
Compiled To
p {
color: green; }

20. Looping Css: @for
@for $i from 1 through 3 {
.item-#{$i} { width: 2em *
$i; }
}
The @for directive repeatedly outputs a set of styles. For each repetition, a counter variable is
used to adjust the output. The directive has two forms: @for $var from <start> through <end>
and @for $var from <start> to <end>.
Create
Compiled To
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}

21. _Partials
For example, you might have _colors.scss. Then no _colors.css file would be
created, and you can do
@import "colors";
If you have a SCSS or Sass file that you want to import but don’t want to compile to a CSS file,
you can add an underscore to the beginning of the filename. This will tell Sass not to compile
it to a normal CSS file. You can then import these files without using the underscore.

22. _Partials
For example, you might have _colors.scss. Then no _colors.css file would be
created, and you can do
@import "colors";
//other css goes here
If you have a SCSS or Sass file that you want to import but don’t want to compile to a CSS file,
you can add an underscore to the beginning of the filename. This will tell Sass not to compile
it to a normal CSS file. You can then import these files without using the underscore.

23. Output Style
Although the default CSS style that Sass outputs is very nice and reflects the structure of the
document, tastes and needs vary and so Sass supports several other styles.
● Nested
● Expanded
● Compact
● Compressed
Nested
#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; }
Expanded
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
}
Nested
#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; }
Compact
#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
#main{color:#fff;background-color:#000}#main p{width:10em}Compressed

24. References
Sass-lang : Official Site
Sass-lang : Github

25. Presenter
nikhil@knoldus.com
Presenter
nikhil@knoldus.com
Organizer
@Knolspeak
http://www.knoldus.com
http://blog.knoldus.com
Organizer
@Knolspeak
http://www.knoldus.com
http://blog.knoldus.com
Thanks