Introduction to syntactically awesome style sheets (sass) taken on 25th July 2014

1. SASS
(Syntactically Awesome Style
Sheets)
Anoop P R
Senior Software Engineer
Experion Technologies

2. CSS Problems
•Repetitive
•Not expressive
•No variables
•No functions
•No calculation
•No inheritance etc.

3. What is Sass?
•SASS is a system that extends CSS and can make you
more efficient and make your CSS more organized.
•Serves as
Scripting language
Preprocessor for CSS

4. SASS has two main parts
•SassScript (.sass & .scss)
SassScript is a scripting language that extends the CSS syntax,
adding nested rules, variables, mixins.
•SASS CSS pre-processor
The pre-processor interprets your SassScript and produces well
formatted standard CSS.

5. SASS Syntax
body
font: 100% $font-stack
color: $primary-color
body {
font: 100% $font-stack;
color: $primary-color;
}
.sass
.scss

6. The process
•Write your SassScript
•Use CSS pre-processor to interpret your SassScript
•CSS files are produced by the pre‐processor (use
these in your website)

7. What sass offers
•Variables
•Nesting
•Mixins
•Partials
•Selector inheritance
•Calculations
•Conditions

8. Variables
•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 etc.
No more memorizing hex values!

9. Variables
h1#master {
color: #f00;
}
.post-hd {
color: #ff0000;
}
a.outline {
color: red;
}
.sidebar p {
color: rgba(255, 0, 0, 1);
}
css scss
$base-color : red;
h1#master {
color: $base-color;
}
.post-hd {
color: $base-color;
}
a.outline {
color: $base-color;
}
.sidebar p {
color: $base-color;
}

10. Nesting
•Nested rules allow you to break up endlessly long
selectors of CSS

11. Nesting
.nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.nav ul li {
display: inline-block;
}
.nav ul a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
.nav ul a:hover {
color: #fff;
}
css scss
.nav {
ul {
margin: 0;
padding: 0;
list-style: none;
li {
display: inline-block;
}
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
&:hover {
color: #fff;
}
}
}

12. Nesting (properties)
.selected-text {
font-family: "Georgia", Times, serif;
font-style: oblique;
font-size: 12px;
}
.selcted-text {
font {
family: "Georgia", Times, serif;
style: oblique;
size: 12px;
}
}
css
sass

13. Mixins
•Mixins allow you to chunk up CSS declarations to be
reusable with one reference.
•Reusable code

14. Mixins
.box-1 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
.box-2 {
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-ms-border-radius: 25px;
border-radius: 25px;
}
css

15. Mixins
.box-1 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
.box-2 {
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-ms-border-radius: 25px;
border-radius: 25px;
}
css scss
@mixin border-radius($radius: 12px) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box-0 {@include border-radius;}
.box-1 { @include border-radius(10px); }
.box-2 { @include border-radius(25px); }
Tip: Mixins can reference mixins as well

16. Selector inheritance
•Inheritance imports syntax and styles from another
selection.

17. Selector inheritance
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
.warning {
@extend .message;
border-color: yellow;
}
scss css
.message, .success, .error, .warning {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}

18. Partials
•You can create partial Sass files that contain little
snippets of CSS that you can include in other Sass files.
•A partial is simply a Sass file named with a leading
underscore.
•Sass partials are used with the @import directive.
_buttons.scss
_navigation.scss
genaral.sass
@import "buttons", "navigation";

19. Arithmetic operations
•Sass has a handful of standard math operators like +, -, *,
/, and %
.main-article {
float: left;
width: 600px / 960px * 100%;
}

20. Conditions
$type: monster;
p {
@if $type == ocean {
color: blue;
}
@else if $type == matador {
color: red;
}
@else if $type == monster {
color: green;
}
@else {
color: black;
}
}

21. SASS Compilation
•Install Sass
•SASS to CSS
•Watch sass file
gem install sass
sass input.scss output.css
sass --watch input.scss:output.css

22. Thank You!