Last Updated: February 25, 2016
·
861
· michaelmeder

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.

2 Responses
Add your response

AWESOME, in love with Compass / SASS <3

over 1 year ago ·

A coworker pointed out today that what I really wrote about was data structures. Changed the title to reflect. Sorry all.

over 1 year ago ·