Intro to Sass

First, navigate via the command line to your /class2-exercises/practice/stylesheets directory.

Then type:

$ sass --watch scss:css

@mixin yourMixinName($optionalArgument) {
  // hard-code values
  property: value;

  // or use arguments
  property: $optionalArgument;
}

p {
  // example usage
  @include yourMixinName($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;
}

Sometimes we have styles that duplicate another class. We can use the extend prefix (%) for these:

@mixin clearfix {
  content: "";
  display: table;
  clear: both;
}

&:after {
  @include clearfix;
}

After extending a class, we can add to it:

.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

Mixins are very useful for common design patterns. A great example is the CSS sprite design pattern.

Here's YouTube's icon sprite:

Sprite image:

CSS for icon: .icon { display: block; background: no-repeat url(img/youtube_sprite.png) -395px -114px; background-size: auto; width: 18px; height: 18px; }

If you set up your Photoshop sprite to use grid lines, you can use Sass to easily position your sprite image without lots of trial and error.

@mixin sprite-position($x:0, $y:0) {
  $gridSize:  -32px;
  $offsetX:   $x * $gridSize;
  $offsetY:   $y * $gridSize;
  background-position: $offsetX $offsetY;
}
@mixin sprite-image($file, $x:0, $y:0) {
  background-image: url("../../img/icons/#{$file}");
  @include sprite-position($x, $y);
}

Or use Compass!

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 arrow($direction: right) {
  @if $direction == right {
    //right arrow styles
  }
  @else if $direction == left {
    // left arrow styles
  }
}

h1 {
  padding: 1rem;
  background-color: pink;
  @include arrow(left);
}

http://codepen.io/KatieK2/pen/GJVKRo

You can incorporate this into your existing mixins to use if/else if statements, so that they output different CSS depending on different arguments.

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

h1 {
  @include opacity(transparent);
}

http://codepen.io/KatieK2/pen/jPjggG

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;
}

http://codepen.io/KatieK2/pen/waVwBJ

• Use loops to write classes and styles for you! Use them to make columns that fit within in 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

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

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

.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('img/#{$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: Lots of mixins and advanced functionality (Ruby only)
• Sassmeister: Quickly test Sass. Lots of mixin options.

• 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