getting started with sass & compass
DESCRIPTION
Saturday ClassTRANSCRIPT
Sass & Compasswith 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 HistoryDesigned 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. ScssDifferent 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 SettingsGruntfile.js includes all the settings for grunt
Demo: Grunt Overview
Lab (Grunt Setup)
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;
Let’s get Sassy!
Nesting
.wrapper { border: 1px solid #333;
p { color: #333; } }
.wrapper { border: 1px solid #333; }
.wrapper p { color: #333; }
SCSS CSS
Lab (Nesting)
1. Create an h1 element
2. Create a span tag nested
3. Make the h1 color blue
4. Make the span color red
<h1> Heading <span>Text</span> </h1>
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 (&)
SCSS CSS
.sidebar { color: #000;
.users & { color: #ff0000; } }
.sidebar { color: #000; } .users .sidebar { color: #ff0000; }
Lab (Parent Selector)
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
<a href=“#” class=“nav-link”> Link1 </h1>
<a href=“#” class=“page-link”> Link2 </h1>
Nesting PitfallDon’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 { border: 1px solid #333; }
.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
3. Examine the output
Variables 5 - Null
$icons: null;
SCSS
Variables 6 - Overwriting
SCSS CSS
$mainColor: #000;
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”
3. Examine the output (output should be border-top: 1px solid #000)
Comments
SCSS CSS
// This comment will not // get compiled
/* This comment will compile */
/* This comment will compile */
Import
SCSS
@import 'typography';
Compiler will import typorgraphy.scss to the working file.
Partials
SCSS
@import 'typography';
Adding an underline before the filename makes a partial. Compiler will not compile to .css.
_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)
MixinsReusable pieces of code
Why use mixins?
.button1 { color: #000; background: #e2e2e2; border-bottom: 1px solid #444; padding: 20px; }
.button2 { color: #bbb; background: #e2e2e2; border-bottom: 1px solid #444; padding: 20px; }
Avoid code repetition
Basic Mixin@mixin button { background: #e2e2e2; border-bottom: 1px solid #444; padding: 20px; }
.button1 { @include button; color: #000; }
.button2 { @include button; color: #bbb; }
Better with Mixins
@mixin button { background: #e2e2e2; border-bottom: 1px solid #444; padding: 20px; }
.button1 { @include button; color: #000; }
.button2 { @include button; color: #bbb; }
We still have repetition
.button1 { background: #e2e2e2; border-bottom: 1px solid #444; padding: 20px; color: #000; }
.button2 { background: #e2e2e2; border-bottom: 1px solid #444; 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
4. Save and examine the compiled output (style.css)
Avoiding Repetition@mixin button { background: #e2e2e2; border-bottom: 1px solid #444; padding: 20px; }
.button1,
.button2 { @include button; }
.button1 { color: #000; }
.button2 { color: #bbb; }
.button1,
.button2 { background: #e2e2e2; border-bottom: 1px solid #444; padding: 20px; }
.button1 { color: #000; }
.button2 { color: #bbb; }
SCSS CSS
Avoiding Repetitiondiv { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
padding: 20px; border: 1px solid #000; }
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; border: 1px solid #000; }
div { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 20px; border: 1px solid #000; }
SCSS CSS
Mixin Argument Defaults
SCSS CSS
@mixin border-radius( $radius: 5px ) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; }
div { @include border-radius; }
p { @include border-radius(9px); }
div { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
p { -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; }
Multiple Mixin Arguments
SCSS CSS
@mixin button($color, $radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius;
color: $color; }
.btn { @include button(#333, 5px); border: 1px solid #000; }
.btn { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #333; border: 1px solid #000; }
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
4. Save and examine the compiled output (style.css)
ExtendPieces of code that exactly match
Why use extend?.button1 { background: #e2e2e2; border-bottom: 1px solid #444; padding: 20px; color: #000; }
.button2 { background: #e2e2e2; border-bottom: 1px solid #444; padding: 20px; color: #bbb; }
[
[
How to extend?
.button1 { background: #e2e2e2; border-bottom: 1px solid #444; padding: 20px; color: #000; }
.button2 { @extend .button1; color: #bbb; }
.button1, .button2 { background: #e2e2e2; border-bottom: 1px solid #444; 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
4. Save and examine the compiled output (style.css)
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 { background: #e2e2e2; border-bottom: 1px solid #444; padding: 20px; color: #000; }
.button2 { @extend .button1; color: #bbb; }
.button1, .button2 { background: #e2e2e2; border-bottom: 1px solid #444; padding: 20px; color: #000; }
.button2 { color: #bbb; }
SCSS CSS
Extend with Placeholder%button { background: #e2e2e2; border-bottom: 1px solid #444; padding: 20px; color: #000; }
.button1 { @extend %button; }
.button2 { @extend %button; color: #bbb; }
.button1, .button2 { background: #e2e2e2; border-bottom: 1px solid #444; 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
5. Save and examine the compiled output (style.css)
FunctionsReturn a value
Basic Function
SCSS CSS
@function fluid($width, $total) { @return ($width / $total) * 100%; }
.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
4. Save and examine the compiled output (style.css)
Conditions / Comparisons
If/else statement
SCSS CSS
$theme: light;
body { @if $theme == dark { color: #FFF; } @else { color: #000; } }
body { color: #000; }
If/elseif/else statement
SCSS CSS
$theme: light;
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
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
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
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 with Sass!
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 Utilitiesround($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
Colors with Sass!
Color & Math
SCSS CSS
$base: #333;
.addition { background: $base + #112233; } .subtraction { background: $base - #112233; } .multiplication { background: $base * 2; } .division { background: $base / 2; }
.addition { background: #445566; }
.subtraction { background: #221100; }
.multiplication { background: #666666; }
.division { background: #191919; }
Color Utilitiescolor: 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 Utilitieshttp://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
What’s Compass?A library filled with useful CSS functions built on Sass.
ex. Cross-Browser CSS3 Rounded Corners
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
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
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