drocarmo

@mixin background-opacity($color, $opacity: .3) {
  background: $color;
  background: rgba($color, $opacity);
}

// Use case

@include background-opacity($color-white, .7);

drocarmo

// Mixin

@mixin font-smoothing($value: on) {
    @if $value == on {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    @else {
        -webkit-font-smoothing: subpixel-antialiased;
        -moz-osx-font-smoothing: auto;

drocarmo

/* Require Framer.js import = http://www.framerjs.com/static/js/framer.js */
/* Also, add a little css, so you can see the view's contents properly:
  .framer{
    background: black;
  }
*/

view = new ImageView({
  x:20,
  y:20,

drocarmo

/* Requires latest JQuery lib */

var win = $(window),
    nav = $('nav'),
    pos = nav.offset().top,
    
    sticky = function(){ 
      if(win.scrollTop() > pos){ 
        nav.addClass('sticky')
      } else {

drocarmo

// Sass Shape Mixin
// http://css-tricks.com/examples/ShapesOfCSS/

@mixin shape($shape, $size, $color){
	
	@if $shape == square {
		width: $size;
		height: $size;
		background-color: $color;
	}

drocarmo

// From @chriscoyier
// http://css-tricks.com/snippets/css/a-guide-to-flexbox/

@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

drocarmo

/* Use-case output */

a.github {
  color: #333333;
}
a.github:hover, a.github:active {
  color: #1a1a1a;
}
a.rdio {
  color: #006ed2;

drocarmo

// Bourbon's clear-anything mixin

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

drocarmo

// blog link: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

@mixin vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

drocarmo

$(".kanye").on("click", function() {
  $(this).toggleClass("west");
});