Dados dimensionais com bússola / SASS

Um dos meus aspectos favoritos do Compass e do SASS é a inteligência adicional que você pode adicionar às suas folhas de estilo. Você pode entrar em algumas travessuras orientadas a objetos bastante impressionantes, especialmente com dados dimensionais. Aqui está um exemplo:

Você pode ver uma versão ao vivo na caneta de código .

Também há mais diversão Compass e SASS aqui .

Vamos começar definindo alguns caras

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

Vamos colocar esses caras em uma lista para mantê-los seguros

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

Vamos definir nosso proto-cara

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

Vamos criar um mixin para analisar as informações

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

Agora tudo o que precisamos fazer é percorrer nossa lista

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

Aqui está o que você vai fazer .

Também há mais diversão Compass e SASS aqui .