Question

Is there any way to get a predefined element with with compass(CSS Framework)?

Let’s say i have:

<ul>
    <li class="class-1">foo</li>
    <li class="class-2">foo</li>
    <li class="class-3">foo</li>
</ul>

What i want outputted is:

ul > li {
    position: absolute;
    top: 0; left: 50%;
}

ul > li.class-1 { width: 20px; margin-left: -10px; }
ul > li.class-2 { width: 26px; margin-left: -8px; }
ul > li.class-3 { width: 24px; margin-left: -12px; }

If at all possible, I imagine I would have to do something like:

ul > li {
    position: absolute;
    top: 0; left: 50%;

    &.class-1 { width: 20px; }
    &.class-2 { width: 16px; }
    &.class-3 { width: 24px; }        

    @for $i from 1 through 3 {
        .class-#{$i} { margin-left: $item-width / 2; }
    }
}

But $item-width naturally isn’t defined. Is there any way to calculate it in the case described above?

Answer 1

I don’t think it is possible to reference a predefined element, as there are no predefined elements… In other words all elements are defined by you.

So the easiest way around this is create a mixin with includes as follows

@mixin counter($num) {
    width: $num+px; margin-left: - $num/2+px; 
}

ul < li {
    position: absolute;
    top: 0; left: 50%;

    &.class-1 { @include counter(20); }
    &.class-2 { @include counter(16); }
    &.class-3 { @include counter(24); }
}

Hope this still helps someone as I notice it is quite old.