Dimensional Data with Compass / SASS

One of my favorite aspects of Compass and SASS is the added intelligence you can add to your stylesheets. You can get into some pretty awesome objected oriented shenanigans, especially with dimensional data. Here's an example:

You can view a live version on code pen.

There's also more Compass and SASS fun here.

Let's start by defining some dudes

$michael: Michael, Designer, #dcd782, 'michael.jpg';
$nathan: Nathan, Designer, #59c5c7, 'nathan.jpg';
$zach: Zach, Developer, #e76e7f, 'zach.jpg';

Let's throw these guys in a list for safe keeping

$myList: $michael, $nathan, $zach;

Let's define our proto-dude

%proto-dude{
    display:block;
    height: 100px;
    @include border-radius(100px);
    background: #ccc;
    color: white;
    text-indent: 100px;
    position: relative;
    line-height: 100px;
    &:after{
        content:'';
        display: block;
        height: 80px;
        width: 80px;
        @include background-size(contain !important);
        @include border-radius(80px);
        position: absolute;
        top:10px;
        left: 10px;
    }
}

Let's create a mixin to parse the information

@mixin define-dude($dude){
    @extend %proto-dude;
    background: nth($dude,3);
    &:before{
        content: "" + nth($dude,1) + ', ' + nth($dude,2) + "";
    }
    &:after{
        background: url('http://sandbox.lazy-robot.com/sass-family-fun/img/'+ nth($dude,4));
    }
}

Now all we need to do is run through our list

$counter: 1;
@each $guy in $myList{
    .dude-#{$counter}{
        @include define-dude($guy);
    }
    $counter: $counter + 1;
}

Here's what you end up with.

There's also more Compass and SASS fun here.