If you haven't already, create these mixins under Utilities:

• dropshadow/text-shadow style
• clearfix
• gradient

@mixin example($optionalArgument) {
  property: value;
  property: $optionalArgument;
}
p {
  @include example($optionalArgument);
}

@mixin gradient($color1, $color2) {
  background-image: -webkit-linear-gradient($color1, $color2, $color1);
  background-image: -moz-linear-gradient($color1, $color2, $color1);
  background-image: linear-gradient($color1, $color2, $color1);
}

@mixin gradient($color1: #fff, $color2: #666) {
  background-image: -webkit-linear-gradient($color1, $color2, $color1);
  background-image: -moz-linear-gradient($color1, $color2, $color1);
  background-image: linear-gradient($color1, $color2, $color1);
}

@mixin rotate($degree, $position) {
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  transform: rotate(-5deg);
  -webkit-transform-origin: $position;
  -moz-transform-origin: $position;
  transform-origin: $position;
}

@mixin rotate($degree, $position) {
  -webkit-transform: rotate(#{$degree}deg);
  -moz-transform: rotate(#{$degree}deg);
  transform: rotate(#{$degree}deg);
  -webkit-transform-origin: $position;
  -moz-transform-origin: $position;
  transform-origin: $position;
}

.headline {
  font-size: 2em;
  font-weight: bold;
}
.lead-story-headline {
  @extend .headline;
  text-decoration: underline;
  text-transform: uppercase;
}

@mixin rotate($degree, $position) {
  -webkit-transform: rotate(#{$degree}deg);
  -moz-transform: rotate(#{$degree}deg);
  transform: rotate(#{$degree}deg);
  -webkit-transform-origin: $position;
  -moz-transform-origin: $position;
  transform-origin: $position;
}

@mixin gradient($color1: $bodyBackground, $color2: $accentBackground) {
  background-image: -webkit-linear-gradient($color1, $color2, $color1);
  background-image: -moz-linear-gradient($color1, $color2, $color1);
  background-image: linear-gradient($color1, $color2, $color1);
}
@include gradient(#fff, #000);

Other CSS3 features that require browser prefixes to work in most popular browsers include:

• @font-face
• transitions
• box-shadow
• opacity
• http://shouldiprefix.com/

Other common UI elements that Sass mixins make easy:

• buttons
• image replacement
• error messages
• CSS shapes (triangles, arrows)

Sass has logic statements that you can use to create conditionals. They are @if, @else if, and @else

@mixin opacity($value: 0.5) {
  @if $value == transparent {
    opacity: 0;
  } @else if $value == opaque {
    opacity: 1;
  } @else {
    opacity: $value;
  }
}
@include opacity(transparent);

Rewrite your existing mixins to use if/else if statements, so that they output different CSS depending on different arguments.

@mixin arrow($direction: right) {
  @if $direction == right {
    //right arrow styles
  }
  @else if $direction == left {
    // left arrow styles
  }
}

With @for loops, you can make Sass write your classes and styles for you.

@for $i from 1 through 3 {
  .column-#{$i} { width: 2em * $i; }
}

.column-1 {
  width: 2em;
}
.column-2 {
  width: 4em;
}
.column-3 {
  width: 6em;
}

• Use loops to write classes and styles for you! Use them to make columns that fit within our layout, and add links to our footer nav in these columns.
• Experiment with math in your loop's styles - change the width, padding, even font-size

@for $i from 1 through 3 {
  .column-#{$i} { width: 2em * $i; }
}

With @each, you can loop through a list of items and create styles for each item in the list.

Sass code:

@each $icon in youtube, twitter, facebook {
  .icon-$icon {
    background-image: url('#{$icon}.png');
  }
}

CSS output:

.icon-youtube {
  background: url('youtube.png');
}
.icon-twitter {
  background: url('twitter.png');
}
.icon-facebook {
  background: url('facebook.png');
}

• Create background image styles for each Famous Woman article
• Try SubtlePatterns.com for images to use
• Write these background styles with @each and a list
• Bonus: style your social media icons using @each and @if logic

@each $woman in ada, grace, frances, barbara, anita, maria {
  .#{$woman}-bg {
    background-image: url('images/#{$woman}.png');
  }
}

The following tools can help you write Sass even faster:

• CodeKit: Compile Sass & more without command line
• Sass Sleuth: See Sass line numbers in your browser
• Live Reload: Compile Sass without refreshing your browser
• Compass

• Haml: like Sass for HTML
• Rails: Rails is a software development framework written in Ruby. Sass & Haml are used in Rails apps. Try the Rails Girls tutorials to build your own app!
• LESS: a CSS preprocessor like Sass with different syntax

        $ cd ../
                    

        $ cd /
                    

        $ cd Users/cfarman/Sites/gdi-sass
                    

        $ ls
                    

• Download for Windows: rubyinstaller.org
• Mac users: you're in luck! Mac OS X comes pre-installed with Ruby. Try the following command in Terminal to make sure:

ruby -v

Now that Ruby is installed, we can install the Sass gem.

In Terminal or Git Bash:

gem install sass

• rename CSS files to have a .scss file extension
• structure them inside the stylesheets folder like so:
  • /stylesheets/
    • /css/
      • empty for now
    • /scss/
      • /font/
      • reset.scss
      • styles.scss
• Update your index.html stylesheet url in <head> to point to your /css/ folder.

Check out your index.html file in a browser. Looks funky, yes?

We need to compile our .scss (Sass) files to make the CSS work in the browser.

First, navigate via the command line to your /stylesheets directory in the "practice" folder.

Then type:

$ sass --watch scss:css

Let's break this command down - you're going to use it *a lot*!

$ sass --watch scss:css

--watch tells Sass to look for changes to our .scss files, and to compile them to css if they have updates.

The scss bit is the folder where our .scss files live. We edit these files only.

The css part is the folder where our .css files will be. These files are the compiled output of our Sass, and are only created when we run the above command.

Edit some Sass in the .scss files and see your changes automatically compiled to CSS!