Getting Started with Sass & Compass

Sass & Compass
with Rob Davarnia

About me
Rob Davarnia
@robdvr
Full Stack Developer, Founder of ParseLabs
Passionate about Ruby on Rails, Node.js, and Angular
robdvr.com // parselabs.com

Sass History
Designed by: Hampton Catlin
Developed by: Natalie Weizenbaum, Chris Eppstein
Since 2007
Started as a Ruby gem

What’s Sass?
Sass is a CSS Pre-Processor.

What’s a Pre-Processor?
Sass File Sass Compiler CSS File

Pre-Processor Example
p {
color: #333;
a {
color: #555;
}
}
p {
color: #333;
}
p a {
color: #555;
}

Can browsers compile Sass?
No. You need to compile it before using it.

Why Sass?
CSS is simple, but simple is not necessarily scalable.
Sass teaches CSS new tricks.
Variables, Functions, and more…

Sass vs. Scss
Different syntax
Read more
http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better

What’s Compass?
A library filled with useful CSS functions built on Sass.
ex. Cross-Browser CSS3 Rounded Corners

What’s Grunt?
A JavaScript-based task runner to perform repetitive tasks.
Grunt + Sass Gem help us compile Sass.

How does Grunt work?
Grunt performs tasks you create like compiling Sass

Grunt Settings
Gruntfile.js includes all the settings for grunt

Setting up Grunt / Folders
robdvr.com/blog

CSS Brush up
// dot - classes - okay to repeat
.wrapper
// hashtag - ids (unique)
#wrapper

CSS Brush up 2
// Color
color: #000;
// Size
font-size: 20px;
// Text Alignment
text-align: center;
// Text Bold
font-weight: bold;
// Text Italic
font-style: italic;
// Text Underline
text-decoration: underline;
// Spacing - top right bottom left
margin: 10px 20px 30px 40px;
padding: 10px 20px 30px 40px;
// Border
border: 1px solid #000;

Nesting
.wrapper {
p {
color: #333;
}
}
.wrapper {
}
.wrapper p {
color: #333;
}
SCSS CSS

Lab (Nesting)
<h1> Heading <span>Text</span> </h1>
1. Create an h1 element
2. Create a span tag nested
3. Make the h1 color blue
4. Make the span color red

Nesting Properties
SCSS CSS
.page {
text: {
align: center;
transform: uppercase;
}
}
.page {
text-align: center;
text-transform: uppercase;
}

Parent Selector (&)
SCSS CSS
h3 {
color: #000;
&.red {
color: #ff0000;
}
}
h3 {
color: #000;
}
h3.red {
color: #ff0000;
}

Parent Selector 2 (&)
.sidebar {
color: #000;
.users & {
color: #ff0000;
SCSS CSS
}
}
.sidebar {
color: #000;
}
.users .sidebar {
color: #ff0000;
}

Lab (Parent Selector)
<a href=“#” class=“nav-link”> Link1 </h1>
<a href=“#” class=“page-link”> Link2 </h1>
1. Copy the HTML elements above
2. Use the nested syntax with parent selector to
make .nav-link underlined and .page-link font-size
20px

Nesting Pitfall
Don’t nest more than 3-4 levels!

Variables
$orange: #FFA500;
p {
color: $orange;
}
SCSS

Variables 2 - Strings
$primary: 'Montserrat', sans-serif;
body {
font-family: $primary;
}
SCSS

Lab (Variables)
1. Create a variable containing black hex color (#000)
2. Use the variable to set a paragraph’s color
3. Examine the output

Variables 3 - Strings
$dark: #333;
.wrapper {
border: 1px solid $dark;
p {
color: $dark;
}
}
.wrapper {
}
.wrapper p {
color: #333;
}
SCSS CSS

Variables 4 - Lists
$icons: facebook, twitter, instagram;
$padding: 20px 10px 30px 40px;
SCSS

Lab (Variables)
1. Create a variable containing 4 margin placements
(top right bottom left)
2. Use the variable to set a paragraph’s margin

Variables 5 - Null
$icons: null;
SCSS

Variables 6 - Overwriting
$mainColor: #000;
SCSS CSS
h2 {
$mainColor: #fff;
background: $mainColor;
}
p {
background: $mainColor;
}
h2 {
background: #fff;
}
p {
background: #000;
}

Variables 7 - Names
SCSS CSS
$side: bottom;
h1 {
border-#{$side}: 1px solid #000;
}
.link-#{$side} {
background: #333;
}
h1 {
border-bottom: 1px solid #000;
}
.link-bottom {
background: #333;
}

Lab (Variables)
1. Create a variable that contains value “top”
2. Use the name variable output syntax to dynamically
set heading2’s border value to “1px solid #000”
(output should be border-top: 1px solid #000)

Comments
// This comment will not
// get compiled
/* This comment will compile */
/* This comment will compile */
SCSS CSS

Import
Compiler will import typorgraphy.scss to the working file.
@import 'typography';
SCSS

Partials
Adding an underline before the filename makes a partial.
Compiler will not compile to .css.
_typography.scss
@import 'typography';
SCSS

Lab (Partials)
1. Create a partial named ‘buttons’
2. Import the buttons partial in your style.scss
3. Set a link element’s text to underline in ‘buttons’
partial
4. Save and examine the compiled output (style.css)

Mixins
Reusable pieces of code

Why use mixins?
.button1 {
color: #000;
background: #e2e2e2;
padding: 20px;
}
.button2 {
color: #bbb;
padding: 20px;
}
Avoid code repetition

Basic Mixin
@mixin button {
padding: 20px;
}
.button1 {
@include button;
color: #000;
}
.button2 {
@include button;
color: #bbb;
}

Better with Mixins
@mixin button {
padding: 20px;
}
.button1 {
@include button;
color: #000;
}
.button2 {
@include button;
color: #bbb;
}
We still have repetition
.button1 {
padding: 20px;
color: #000;
}
.button2 {
padding: 20px;
color: #bbb;
}
SCSS CSS

Lab (Basic Mixin)
1. Create a basic mixin that sets the background and
font size
2. Use the mixin to create 2 ‘div’ elements
3. Make the font italic on one div

Avoiding Repetition
@mixin button {
padding: 20px;
}
.button1,
.button2 {
@include button;
}
.button1 {
color: #000;
}
.button2 {
color: #bbb;
}
.button1,
.button2 {
padding: 20px;
}
.button1 {
color: #000;
}
.button2 {
color: #bbb;
}
SCSS CSS

Avoiding Repetition
div {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 20px;
}

Mixin Arguments
Make mixins more powerful
@mixin border-radius( $radius ) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
div {
@include border-radius(5px);
padding: 20px;
}
div {
border-radius: 5px;
padding: 20px;
}
SCSS CSS

Mixin Argument Defaults
@mixin border-radius( $radius: 5px ) {
SCSS CSS
}
div {
@include border-radius;
}
p {
@include border-radius(9px);
}
div {
border-radius: 5px;
}
p {
border-radius: 9px;
}

Multiple Mixin Arguments
@mixin button($color, $radius) {
color: $color;
SCSS CSS
}
.btn {
@include button(#333, 5px);
}
.btn {
border-radius: 5px;
color: #333;
}

Lab (Arguments Mixin)
1. Create a mixin that takes 2 arguments. First argument
should be for font size, and second argument should take
the color
2. Use the mixin to create 1 ‘a’ element
3. Make the font size 12px and color #999 using the mixin

Extend
Pieces of code that exactly match

Why use extend?
.button1 {
padding: 20px;
color: #000;
[
[
}
.button2 {
padding: 20px;
color: #bbb;
}

How to extend?
.button1 {
padding: 20px;
color: #000;
}
.button2 {
@extend .button1;
color: #bbb;
}
.button1, .button2 {
padding: 20px;
color: #000;
}
.button2 {
color: #bbb;
}
SCSS CSS

Lab (Extend)
1. Create two paragraph properties (.first-p, .second.p)
2. Add two CSS properties to .first-p
3. Extend .first-p on .second-p

Extend Pitfalls
Changing the parent changes all the children
CSS Bloat! If not needed, don’t include
User placeholder selectors to avoid making unwanted changes

Placeholder Selectors (%)
Used for extending but can’t be used on their own

Extend without Placeholder
.button1 {
padding: 20px;
color: #000;
}
.button2 {
@extend .button1;
color: #bbb;
}
padding: 20px;
color: #000;
}
.button2 {
color: #bbb;
}
SCSS CSS

Extend with Placeholder
%button {
padding: 20px;
color: #000;
}
.button1 {
@extend %button;
}
.button2 {
@extend %button;
color: #bbb;
}
padding: 20px;
color: #000;
}
.button2 {
color: #bbb;
}
SCSS CSS

Lab (Placeholder)
1. Create a paragraph property (.first-p)
2. Create a placeholder selector
3. Add two CSS properties to placeholder selector
4. Extend the placeholder selector on .first-p

Basic Function
@function fluid($width, $total) {
@return ($width / $total) * 100%;
SCSS CSS
}
.content {
width: fluid(600px, 900px);
}
.content {
width: 66.66667%;
}

Lab (Function)
1. Create a function that returns (25%)
2. Create a div selector
3. Set the div width using the function

If/else statement
$theme: light;
SCSS CSS
body {
@if $theme == dark {
color: #FFF;
} @else {
color: #000;
}
}
body {
color: #000;
}

If/elseif/else statement
$theme: light;
SCSS CSS
body {
@if $theme == dark {
color: #FFF;
} @else if $theme == orange {
color: #222;
} @else {
color: #000;
}
}
body {
color: #000;
}

Lab (Function)
1. Create a variable named $type set to “desktop”
2. Create a div selector
3. Write an if statement that checks $type
4. Set the div’s width to 100% if the $type is NOT
desktop

Comparisons
== equal to
!= not equal to
> greater than *
>= greater than or equal to *
< less than *
<= less than or equal to *
*numbers only

For each loop example
SCSS
CSS
$icons: facebook, twitter, instagram;
@each $icon in $icons {
.icon-#{$icon} {
background-image: url(#{$icon}.png);
}
}
.icon-facebook {
background-image: url(facebook.png);
}
.icon-twitter {
background-image: url(twitter.png);
}
.icon-instagram {
background-image: url(instagram.png);
}

Lab (For each)
1. Create a list of names (3 items is sufficient)
2. Create a link selector (a element)
3. Write a for each loop that goes through the list and
outputs a custom class for each element
4. Set the link’s background-image to each item’s name

For loop example
SCSS CSS
$i: 1;
.link {
background: #333;
@for $i from 1 through 4 {
&.link-#{$i} {
margin-right: $i * 20px;
}
}
}
.link {
background: #333;
}
.link.link-1 {
margin-right: 20px;
}
.link.link-2 {
margin-right: 40px;
}
.link.link-3 {
margin-right: 60px;
}
.link.link-4 {
margin-right: 80px;
}

While loop example
SCSS CSS
$i: 1;
.link {
background: #333;
@while $i < 4 {
&.link-#{$i} {
margin-right: $i * 20px;
}
$i: $i + 1;
}
}
.link {
background: #333;
}
.link.link-1 {
margin-right: 20px;
}
.link.link-2 {
margin-right: 40px;
}
.link.link-3 {
margin-right: 60px;
}
.link.link-4 {
margin-right: 80px;
}

Lab (While loop)
1. Create a number variable set to 5
2. Create a while loop that loops based on your
variable
3. Output a custom class with a calculated margin-left
…
.image-#{$i} {
margin-left: $i * 20px;
}
…

Mixins vs. Extend vs. Functions
Mixins: similar sets of properties used with small variations
Extend: sets properties that match exactly
Functions: common operations that return values

Math Operations
+ addition
- subtraction
* multiplication
/ division
% modulo

Addition example
SCSS CSS
.link {
font-size: 12px + 14px;
}
.link {
font-size: 26px;
}

String Concat
SCSS
CSS
.link {
font-family: ‘Helvetica’ + ’, sans-serif’;
}
.link {
font-family: ’Helvetica, sans-serif’;
}

Math Utilities
round($number) - round to closest whole number
ceil($number) - round up
floor($number) - round down
abs($number) - absolute value
min($list) - minimum list value
max($list) - maximum list value
percentage($number) - convert to percentage

Lab (Math Utilities)
1. Create a paragraph
2. Set the font-size to the ceiling number of 11.5px
3. Save and review the output

Color & Math
$base: #333;
SCSS CSS
.addition {
background: $base + #112233;
}
.subtraction {
background: $base - #112233;
}
.multiplication {
background: $base * 2;
}
.division {
background: $base / 2;
}
.addition {
background: #445566;
}
.subtraction {
}
.multiplication {
}
.division {
}

Color Utilities
color: lighten($color, 20%);
color: darken($color, 20%);
color: saturate($color, 20%);
color: desaturate($color, 20%);
color: mix(#ffff00, #107fc9); }}
color: mix(#ffff00, #107fc9, 30%);
color: grayscale($color);
color: invert($color);
color: complement($color);

More Color Utilities
http://sass-lang.com/documentation/Sass/Script/Functions.html

Lab (Colors)
1. Create a color variable set to black - #000
2. Create a paragraph element
3. Use the lighten function to make the paragraph’s
color 50% lighter

Compass Features
• CSS3 mixins
• Typography mixins
• Utilities
• Layout Module
• Reset Module

Compass Mixins
• border-radius
• opacity
• box-shadow
• text-shadow
• transition
• background-size
• font-face
• flexbox

All Compass Mixins
http://compass-style.org/index/mixins/

Lab (Border Radius)
1. Create div with black background
2. Import Compass
3. Using Compass’ border-radius mixin, set the div’s
radius to 10px

Compass CSS3 Mixin Examples
http://compass-style.org/examples/

New Compass Project
$ gem install compass
$ compass create <myproject>
http://compass-style.org/install/

Watching for changes
$ compass watch

Using Compass in Grunt
@import ‘compass’;

Further Compass Features
• Grid system
• Sprite generations
• and more
• http://compass-style.org/

Read more…
http://sass-lang.com/
http://compass-style.org
http://gruntjs.com/

Thanks for coming!
Q/A, Feedback, Comments, Suggestions

Getting Started with Sass & Compass

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (20)

Similar to Getting Started with Sass & Compass

Similar to Getting Started with Sass & Compass (20)

Recently uploaded

Recently uploaded (20)

Getting Started with Sass & Compass