Как я могу эффективно удалить поля последнего столбца, используя 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 из выдержек, которые выданы Сьюзи, но это не работает. Правый желоб уже был установлен @include span(3 of 6) и поэтому останется. Единственная вещь, которая делает трюк - это удаление правого поля следующим образом:

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

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

Источник

2 ответа

Решение

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

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

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

Источник

ОБНОВИТЬ
Я понял, что omega был заменен last в Сьюзи 2.х.
Поэтому я думаю, что правильный ответ на ваш вопрос будет

.excerpt:last-child { @include last; }
Источник

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

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

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

Источник
Другие вопросы по тегам