Как показать столбцы сетки Bourbon Neat?

В моем файле CSS применяются команды Bourbon Neat и не отображаются столбцы в html-файле, если отображается результат применения, но не отображаются столбцы.

.container{
    @include outer-container;
    @include span-columns(2 of 8, table);
    border: 1px solid red;
    margin: 0 auto;
    position: relative;
    width: 960px;
}

При отображении css, созданного для sass, не отображается фоновое свойство столбцов Bourbon Neat.


css sass grid-layout bourbon neat
person Mario del Valle    schedule 04.02.2013    source источник
comment
Не могли бы вы также опубликовать сгенерированный CSS и целевой HTML?   -  person juanignaciosl    schedule 05.02.2013

Ответы (4)


arrow_upward
14
arrow_downward

Важно установить $visual-grid: true; и определить точки останова перед строкой @import "neat";.

Из https://github.com/thoughtbot/neat#using-neat:

Визуальная сетка отражает изменения, примененные к сетке с помощью миксина new-breakpoint(), если медиаконтексты определены до импорта Neat.

Независимо от того, решите ли вы использовать файл _grid-settings.scss (как рекомендует документация), решать вам. Но для того, чтобы увидеть визуальную сетку, вам обязательно нужно установить $visual-grid: true; перед импортом в чистом виде. И для того, чтобы визуальная сетка реагировала, вам также необходимо определить точки останова перед аккуратным импортом.

person Gabe Kopley    schedule 10.09.2013
comment
Спасибо. Недостаток использования переменной вместо миксина для отображения сетки. - person RobW; 24.10.2013

arrow_upward
11
arrow_downward

К сожалению, просто добавив "$visual-grid: true;" в контейнере не получится. Или, по крайней мере, это не работает для меня. Однако у меня сработало добавление файла «_getting-settings.scss» со следующими настройками в файл:

$visual-grid: true;
$visual-grid-color: yellow;
$visual-grid-index: front;
$visual-grid-opacity: 0.5;

В документации не очень ясно, куда должен идти $visual-gridL, поэтому трудно сказать, соответствует ли это намерениям разработчиков. Я думаю, что они должны предоставить лучшие примеры в этом случае.

person Larry Dennis    schedule 09.09.2013

arrow_upward
1
arrow_downward

в контейнере нужно добавить

  $visual-grid: true;

Это должно показать фоны столбцов сетки для отладки.

person Vivek Gani    schedule 04.04.2013

arrow_upward
1
arrow_downward

  1. Создайте файл, как показано ниже (настройте параметры в соответствии со своими требованиями). Этот файл перезаписывает настройки по умолчанию, которые находятся в _visual-grid.scss в каталоге настроек Neat.

  2. Добавьте импорт в файл, который вы только что создали, строкой Before (after не будет работать) вы импортируете основной аккуратный файл в ваш основной файл проекта SCSS.

_neatsettings.scss

// Neat Settings

$visual-grid: true;
$visual-grid-color: #faa;
$visual-grid-index: front;
person byronyasgur    schedule 01.06.2015
comment
Как это что-то добавляет к существующим ответам? - person cimmanon; 01.06.2015
comment
Я бы подумал, что это более ясно и более авторитетно. Существующие ответы на самом деле не очень помогли мне, когда я сам работал над этим, поэтому я разместил ответ. - person byronyasgur; 02.06.2015
comment
Хорошо, но этот ответ показывает, какие настройки вам нужно использовать, и этот ответ поясняет, что переменные должны быть чистыми перед импортом. Вы просто перефразируете существующие ответы. - person cimmanon; 02.06.2015
comment
этот ответ а) подразумевает, что вы должны добавить визуальную сетку в контейнер и б) не указывает, что настройки должны быть добавлены перед аккуратным импортом, а также включает некоторую путаницу it's hard to tell if that is as the developers intended. плюс, насколько я могу судить, есть опечатка ... Это все равно не решило мою проблему в то время, когда я потратил час или около того, пытаясь понять это. - person byronyasgur; 02.06.2015