Intro to Sass

Class 1

Fork Class 1 Example on CodePen:

http://bit.ly/gdi-chi-sass



Create an account so you can save your work

Welcome!

Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.

Some "rules"

  • We are here for you!
  • Every question is important
  • Help each other
  • Have fun

Welcome!

I'm Arelia Jones

  • Front End Developer at Sprout Social
  • CoderSpace Co-Founder and Instructor
  • GDI Chicago co-Chapter Leader
  • I write HTML, CSS/Sass and JavaScript/React for the Sprout Social web app

Welcome!

Tell us about yourself.

  • Who are you?
  • What do you hope to get out of the class?
  • What's the last song or podcast you listened to?

Note about using CodePen

What does Sass do?

Variables: 

$brandColor: #f90000;
$accentColor: #fff;
header {
  background-color: $brandColor;
  color: $accentColor;
}
header a { color: $accentColor; }

What does Sass do?

Nesting: 
header {
  background-color: $brandColor;
  color: $accentColor;
  a {
    color: $accentColor;
  }
}

What does Sass do?

Mix-ins: 
@mixin visually-hidden {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.image-replace {
  @include visually-hidden;
  background: url(logo.png) no-repeat;
}

What does Sass do?

More examples:

Tools

Terms

  • Ruby: A programming language

  • Preprocessor: A computer program that modifies data to conform with the input requirements of another program. (Sass is a preprocessor)

  • Compile: The act of converting one computer program into another programming language.

  • CSS3: The output of Sass. Sass compiles into CSS!

Sass and CSS

How Sass compiles into CSS

1. You write Sass (.scss files)
2 .You run a command (sass --watch) on the command line
3. .scss files compile into .css files

Nesting

Sass input:

header {
  color: black;
  nav {
    background: red;
    a { color: white; }
}

CSS output:

header { color: black; }
header nav { background: red; }
header nav a { color: white; }

Referencing Parent Selectors: &

Sass input:

nav {
    background: red;
    a {
      color: white;
      &:hover { text-decoration: underline; }
    }
}

CSS output:

nav { background: red; }
nav a { color: white; }
nav a:hover { text-decoration: underline; }

Let's Develop It!

  • Open your fork of the CodePen example #1: http://bit.ly/gdi-chi-sass
  • Rewrite some styles to use nesting and referencing the parent
  • Look for selectors that share a common parent HTML element, like header, nav, footer, #main
  • Look for hover styles, or add some, to practice referencing the parent with &
  • There are lots of possible solutions! Be creative!
  • Toggle the CSS view to see what the 'compiled' code looks like

Break Time!

Stand up and stretch - we'll resume in 5 minutes

Variables

Sometimes you want to reuse a value for a style - you use them frequently, they're hard to type or remember, such as

  • Colors 
    #2a79af
  • Font stack styles 
    Georgia, Times, "Times New Roman", serif;
  • Font sizes 
    1.667em

Defining Variables

Variables with Sass let us reuse values more than once, while only defining them in one place

//define using dollar sign
$brandColor: #f90000;
$mainTextcolor: #fff;
$accentColor: #ccc;

To create a variable you need a dollar sign before the name of your variable, and a colon: to give it a value

Note that in Sass files, you can comment out a line with // two slashes

$brandColor: #f90000; // red
$mainTextcolor: #fff; // white
$accentColor: #ccc; // grey
header {
  color: $mainTextColor;
  background-color: $brandColor;
}
.content {
  color: $mainTextColor;
  background-color: $accentColor;
}
footer {
  color: $accentColor;
  background-color: $brandColor;
}

Keep em together

Variables are easy to change if you keep them all in one stylesheet, and update or add to the styles as needed

// Let's define some variables
// Colors
$favoriteColor: #2a79af;
$anotherColor: #f05b62;
// Fonts
$favoriteFont: Papyrus, fantasy;
$aPracticalFont: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
// Font sizes
$aNiceBigFontSize: 16px;
$finePrint: 10px;
$giantLogo: 36px;
// Margins and Padding
$defaultMargin: 15px;
$defaultPadding: $defaultMargin;

Let's Develop It

  • Create a section at the top of your CodePen styles for "Utilities"
  • Under Utilities, make some new variables, and base some variables on your existing styles - look for colors, fonts, and size values

Math Operations

With CSS you have to be explicit about everything, including numbers. With Sass, you can write math to calculate numbers for you:

+Addition
-Subtraction
*Multiplication
/Division*

*division is special, check the documentation link for why and how

Math Operations

Sass input:

$layoutWidth: 960px;
#sidebar {
  width: $layoutWidth/3;
}

CSS output:

#sidebar {
  width: 320px;
}

Math Operations

Sass input:

$layoutWidth: 960px;
$defaultPadding: 16px;
#main {
  padding: $defaultPadding;
  width: $layoutWidth - $defaultPadding*2;
}

CSS output:

#main {
  padding: 16px;
  width: 928px;
}

Let's Develop It

  • Write a math expression in Sass to calculate the width of elements in your page layout instead of declaring a number
  • Use a variable to represent the result of your calcuation
  • Take a look at your page to see your changes, and toggle to CSS to see the output
$layoutWidth: 960px;
$navWidth: $layoutWidth/3;
footer {
  width: ($layoutWidth - 20px);
}

Color Functions

Color functions are built-in to Sass. They let you alter existing color values. This is the lighten function:

Sass input:


$linkColor: #000;
$linkShadow: lighten(#000, 40%);
a {
  color: $linkColor;
  text-shadow: $linkShadow;
}

CSS output:


a {
  color: #000;
  text-shadow: #666;
}

Example of output style

Color Functions

This is the darken function:

Sass input:


$background: #ff0000; // red
$text: darken($background,50%);
body {
  color: $text;
  background: $background;
}

CSS output:

body {
  color: #990000;
  background: #ff0000;
}

Example of output style

Color Functions

This is the grayscale function:

Sass input:


$background: #ff0000; // red
$text: darken($background,50%);
body {
  background: grayscale(#f00);
  color: grayscale(darken(#f00, 50%));
}

CSS output:


body {
  background: #000;
  color: #808080;
}

Example of output style

Let's Develop It

  • Edit your variables under Utilities to use color functions
  • Refer to the sass-lang.com docs
  • Toggle to CSS to see your changes
  • Bonus - change the color scheme of your website while only editing the color variables!
lighten(#000, 20%)
darken(#eee, 30%)
grayscale(#2a79af)
saturate(#2a79af, 40%)
invert(#2a79af)

Comments

Traditional CSS comments are downloaded by the user. With Sass, we can specify whether comments are left in the final CSS code or are only visible to the developer:

Sass input:


/* Multiline comments will appear
 in the final CSS file */
//This single-line comment won't
a { color: blue; }

CSS output:


/* Multiline comments will appear
 in the final CSS file */
a { color: blue; }

Mixins

Mixins are really just a collection of one or more styles that are reusable, like variables are reusable values

Sass input:


@mixin dropshadow($text) {
  color: $text;
  text-shadow: 2px 4px lighten($text, 50%);
}
p {
  @include dropshadow(black);
}

CSS output:


p {
  color: black;
  text-shadow: 2px 4px #808080;
}

Example of output style

Mixins

These are especially useful for CSS3 rules that need browser prefixes, like gradients.

http://codepen.io/cfarm/pen/jteAG

Let's Develop It

  • Add some mixins under Utilities - a good candidate is any style that needs a browser prefix
  • Try replacing the footer gradient with a mixin
  • Use these mixins in your footer styles
  • Add different types of comments that describe what your mixins do, and check the final CSS in the browser inspector to see if they appear
@mixin name {
  property: value;
}
@mixin example($argument) {
  property: value;
  property: $argument;
}

Questions?