Как эффективно удалить поля последнего столбца с помощью susy?

Я использую susy для создания простой сетки из 12 столбцов. Думаю, я более-менее разобрался, за исключением одного. У меня есть следующая разметка:

<div class="news">
    <div class="tweet">
        <p>the tweet<p/>
    </div>
    <div class="blog">
        <h3>Recent News</h3>
        <div class="excerpt">
            <p>the excerpt<p/>
        </div>
        <div class="excerpt">
            <p>the excerpt<p/>
        </div>                
    </div>
</div>

Я хочу, чтобы «новости» занимали полную строку, «твит» — половину этой строки, а «блог» — вторую половину. Два «отрывка» должны занимать половину столбца «блог». Поэтому у меня есть следующий scss:

.news {
    @include container();
}
.tweet {
    @include span(6);
}
.blog {
    @include span(6 at 7);
}
.excerpt {
    @include span(3 of 6);
}

Конечно, у второго фрагмента теперь тоже есть правый желоб, что заставляет его переходить на новую строку. Поэтому я подумал, что буду использовать флаг last для :last-child отрывков, которые предоставляет susy, но это не работает. Правый желоб уже был установлен @include span(3 of 6) и поэтому останется. Единственное, что делает трюк, это удаление правого поля следующим образом:

.excerpt:last-child {
    margin-right: 0;
}

Это работает, но я думаю, что должно быть другое решение. Здесь?


html css sass susy-compass susy-sass
person Flavio    schedule 22.03.2014    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Я еще не пробовал Susy 2, так что примите это предложение. В старой версии Susy у вас был omega миксин для обозначения последнего элемента.
Следуя документации по обновлению, они предлагают следующее для версии 2.0:

// Susy 1.x
.old { @include nth-omega(last); }

// Susy 2.x
.new:last-child { @include omega; }

Источник

ОБНОВЛЕНИЕ
Я понял, что omega был заменен на last в Susy 2.x.
Поэтому я думаю, что правильным ответом на ваш вопрос будет

.excerpt:last-child { @include last; }
person pasine    schedule 22.03.2014
comment
Оба omega() и last() поддерживаются в Susy 2 и могут использоваться, как показано здесь. Они удалят любые краевые желоба, которые необходимо удалить. Вы также можете использовать ключевые слова last или omega, как показано в другом комментарии. - person Miriam Suzanne; 22.03.2014
comment
Хорошо, спасибо @notme за ответ! Я понял это для susy 1.x, но не нашел решения для 2.x. - person Flavio; 23.03.2014

arrow_upward
2
arrow_downward

Разве ваши .tweet и .blog не должны быть с отступом ниже .news? Тогда ваш .excerpt должен быть с отступом ниже .blog. Интересно, может ли это сработать, если у вас есть:

.blog {@include span(last 6 of 12);}
    .excerpt {@include span(3 of 6);}

Возможно, стоит попробовать!

person prasutagus    schedule 22.03.2014
comment
span(last 6) и span(6 at 7) имеют одинаковый эффект. - person Miriam Suzanne; 22.03.2014