Получение ширины элемента с компасом - PullRequest
Новая
       5

Получение ширины элемента с компасом

0 голосов
/ 18 января 2012

Есть ли способ получить предопределенный элемент *1001* с помощью компаса (CSS Framework)? Допустим, у меня есть: 

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

То, что я хочу вывести: 

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

Если это вообще возможно, я думаю, что мне придется сделать что-то вроде: 

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

Но $item-width, естественно, не определен. Есть ли способ рассчитать его в описанном выше случае?

1 Ответ

1 голос
/ 29 января 2012

Я не думаю, что можно ссылаться на предопределенный элемент *1001*, поскольку здесь нет предопределенных элементов ... Другими словами, все элементы определены вами.

Таким образом, самый простой способ обойти это - создать миксин, включающий следующие элементы: 

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

Надеюсь, это кому-то еще поможет, поскольку я заметил, что он довольно старый.

...