SASS Lecture

CSS PREPROCESSOR
“SASS”
By
Adnan Arshad

CSS Preprocessor
What is CSS?
State of CSS
Introduction to SASS
Features of SASS
Outline
SASS (Syntactically Awesome Stylesheets)

CSS Preprocessors

Language  compilation  CSS
Gives more functionality to CSS
Fewer lines of code
What are CSS Preprocessors ?

Create more manageable, reusable, compact style
sheets
Faster development time
Saves from monotony
Programmatic CSS features
Why use preprocessors?

What is CSS ?

What is CSS?
CSS stands for Cascading
Style Sheet. Typical CSS
file is a text file with an
extention.css and
contains a series of
commands or rules.
These rules tell the
HTML how to display.
*To create a style sheet, create a file
using Notepad or Some Text Editor,
save it as a .css document and start
writing the CSS code (see right).
Style.css
body {
font-family:Arial;
background: #000;
}
.container {
text-align:left;
width:1020px;
}
.header {
height:232px;
}
.footer {
width: 100%;
padding:10px;
margin-bottom: 10px;
}
And so on….

HTML Without CSS
“HTML without CSS is like a
piece of candy without a
pretty wrapper.”
Without CSS, HTML elements
typically flow from top to
bottom of the page and
position themselves to the
left by default.
With CSS help, we can create
DIVs to better organize
content and make a Web
page visually appealing.

The Box Model
CSS works on the
box model. A
typical Web page
consists of many
boxes joined
together from top
to bottom. These
boxes can be
stacked, nested,
and can float.
Header
Navigation
Content
Footer

State of CSS

CSS has not aged well.
o Replacing a Color Value in whole project.
o Copying and Pasting a style (Over and Over again).
These are not features, they are nightmares.
Frustration with CSS

.search-nav .container-fluid {
background-color: #eaeaea;
margin-top: -50px; }
.search-nav .container-fluid .container ol li {
vertical-align: middle; }
.search-nav .container-fluid .container ol li i {
color: #ffffff; }
.search-nav .container-fluid .container ol li a {
color: #000000;
text-decoration: none;
.search-nav .container-fluid .container ol li a:hover {
color: #e7002e; }
.search-nav .container-fluid .container ol li a:active {
background-color: none;
color: #e7002e; }
.search-nav .container-fluid .container ol li input {
background-color: #848484;
width: 200px;
border: none;

vertical-align: middle;
border-radius: 0;
color: #ffffff;
margin-top: 7px; }
.navigation.container ul li {
.navigation.container ul li .active {
background-color: transparent;
color: #e7002e; }
.navigation.container ul li a {
font-weight: bold;
text-transform: uppercase;
color: #000000; }
.navigation.container ul li a:hover {
background-color: #e7002e;
color: #ffffff; }
.navigation.container ul li a:focus {
background-color: transparent;
color: #e7002e; }

Fixing CSS
Make it Intelligent
Make it re-usable

Intro to SASS

Syntactically Awesome Stylesheets (SASS)
o Developed in 2007 by Hampton Catlin.
Serves as:
o Scripting Language
o Preprocessor for CSS
History

SASS compiles into CSS file.
Two formatting conventions
o .SASS
o .SCSS
Function

.SCSS /.SASS
.SCSS
.value {
color:blue;
a {
color:red;
Text-decoration:none;
}
}
.SASS
.value
color:blue
a
color:red
Text-decoration:none

Sass Features

Sass has 5 features:
o Variables
o Nesting
o Mixins
o Partials
o Inheritance
Features

1. Variables
Lets time-travel back to Computer Science

Variables are used to assign value, and declare with “$”
dollar sign:
o Works with hex values, colors, numbers
o No more memorizing Hex values
Variables

$Red: #b94a48;
$LightGray:#808080;
$OuterCircle: 36px;
$InnerCircle: 26px;
$Border-Color: $Red;
$Background-Color: $LightGray;
.error {
border: 1px solid $Border-Color;
Background-color: $Background-Color;
color:$Red;
width: $OuterCircle;
height: $OuterCircle;
}
Variables

2. Nesting

SASS will let you nest your CSS selectors in a way that follows the
same visual hierarchy of your HTML.
Nesting
Output (CSS)
.media-body {
margin: 10px;
}
.media-body h4 {
}
.media-body a {
color: #000000;
}
.media-body a:hover {
color: #000000; }
$LinksColor:#000000;
$LinksHoverColor: $LinksColor;
.media-body {
margin: 10px;
h4 {
}
a {
color: $LinksColor;
&:hover {
color: $LinksHoverColor;
}
}
}

3. Mixins

Mixin allows you to chunkup CSS declaration to be reusable
with one reference.
@mixin rounded($radius:10px)
{
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include rounded(); }
Mixins
OUTPUT (CSS)
.box
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}

4. Partials

CSS fact of life:
o CSS files can get Long ( and unwieldy).
SASS allows you to create partials files to modularize and
organize your code.
Partials

Visualizing Partials

Create “_header.scss” file name inside your SASS folder.
Reference your created partial file with your “global.scss”
file as:
Inside your “global.scss” file add this line as:
@import ‘_header’ ;
Creating Partials

5. Inheritance
No More Copy and Paste

Inheritance imports the syntax and style from another
section of your sass file.
Inheritance
.message
{
border: 1px #ccc;
padding: 10px;
color: #333;
}
.success
{
@extend .message;
border-color: green;
}
.error
{
@extend .message;
border-color: red;
}
OUTPUT (CSS)
.message, .success, .error
{
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
border-color: green; }
.error {
border-color: red; }

For learning SASS: http://sass-lang.com/guide
For Online Compiling and Practice:
http://www.sassmeister.com/
References

Questions!

Thank You!

SASS Lecture

More Related Content

What's hot (20)

Similar to SASS Lecture (20)

SASS Lecture