davidkpiano

@include keyframes(fadeIn) {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

davidkpiano

.vp-button {
    padding: 1rem 2rem;
    background: $button-bgcolor;
    
    // Variants/Subcomponents
    &-secondary {
        background: $button-secondary-bgcolor;
    }
    
    // Modifiers

davidkpiano

// ----
// Sass (v3.4.6)
// Compass (v1.0.1)
// ----

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"], 
input[type="email"],

davidkpiano

// ----
// Sass (v3.4.6)
// Compass (v1.0.1)
// ----

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"], 
input[type="email"],

davidkpiano

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----

.mobile-foo {
  @extend %col-4-small;
}

.tablet-foo {

davidkpiano

angular.module('App', ['Goats', 'ngMockE2E'])
    .run(['$httpBackend', function($httpBackend) {
        var goats = [{}];

        $httpBackend.whenGET(/views.*/).passThrough();

        $httpBackend.whenGET('/goats').respond(goats);

        $httpBackend.whenGET(/goat\/.*/).respond(function(method, url, data) {
            var name = url.split('/')[2];

davidkpiano

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----

/// SCSS Specificity Calculator
/// 
/// Utility to calculate (and display) specificity or specificity map of any
/// valid simple/compound/complex selector.
/// @author David Khourshid

davidkpiano

----------


# Calculating Specificity in Sass

As any web developer who has to write CSS knows, specificity is both an important and confusing concept. You might be familiar with principles such as avoiding nesting and IDs to keep specificity low, but knowing exactly *how* specific your selectors are can provide you valuable insight for improving your stylesheets. Understanding specificity is especially important if you are culpable of sprinkling `!important;` throughout your CSS rules in frustration, which ironically, makes specificity less important.

**TL;DR:** You can find the calculator source [here on GitHub](https://github.com/davidkpiano/sass-specificity). Also, check out some [examples on SassMeister](http://sassmeister.com/gist/dbf20a242bcccd1d789c). 

## What is Specificity?

davidkpiano

var RecordSortingService = [function() {
  var sortables = [];
  
  function getSortable(context) {
    var sortable = sortables.filter(function(sortable) {
      return sortable.context == context;
    })[0];
    
    if (!sortable) {
      sortable = new Sortable(context);

davidkpiano

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----



// Let's say I have a button component...
%button {
  display: inline-block;