Точка останова (без запроса) жалуется на «&» при попытке использовать с сетками дзен

Я попытался использовать точку останова для замены медиа-запроса в _Response.scss (см. строку 155) подтемы базовой темы Zen 7.5.4 Drupal:

// @media all and (min-width: 960px)
@include breakpoint($desktop)
{
  $zen-column-count: 5;
  …

До этого я установил точку останова, требуемую в config.rb, включил и определил свои точки останова в _init.scss.

// Breakpoints
$breakpoint-no-query-fallbacks: true;

$small: 480px, 'no-query' '.lt-ie9';
$desktop: 960px, 'no-query' '.lt-ie9';

Более простая задача работает без нареканий (то есть система работает), однако указанный код выдает следующую ошибку:

error styles.scss (Line 118 of _breakpoint.scss: Base-level rules cannot contain the parent-selector-referencing character '&'.)

Пытался найти '&' в коде zen-grids, но не нашел. Что я не так?


sass drupal zen breakpoint-sass
person thamas    schedule 04.11.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Как сказал Тамас, резервный вариант точки останова без запроса предназначен для использования внутри селектора; запасные варианты добавляются к строке селектора с пробелом, поэтому их нельзя использовать вне селектора.

Вот что происходит:

Sass с точкой останова:

$small: 480px, 'no-query' '.lt-ie9';
.foo {
  content: 'bar';
  @include breakpoint($small) {
    content: 'baz';
  }
}

Обычный Sass:

.foo {
  content: 'bar';
  @media (min-width: 480px) {
    content: 'baz';
  }
  .lt-ie9 & {
    content: 'baz';
  }
}

Важно отметить, что точка останова не создает отдельный глобальный контекст, поэтому предоставленный вами код, который устанавливает $zen-column-count внутри вашей точки останова, не будет ограничивать это этой точкой останова.

Рекомендуемый рабочий процесс для работы с медиа-запросами и рабочий процесс, для которого была создана точка останова, — это не тот, в котором все медиа-запросы одного типа сгруппированы вместе, а тот, в котором медиа-запросы используются в режиме реального времени для настройки отдельных элементов по мере необходимости. . Это идет рука об руку с рекомендацией не использовать медиа-запросы на основе устройств, а скорее медиа-запросы, основанные на контенте; то есть медиа-запросы выбраны, потому что текущий компонент больше не выглядит хорошо и нуждается в корректировке.

person Snugug    schedule 26.11.2013

arrow_upward
0
arrow_downward

"Что я не так?"

Я не читал. В сообщении об ошибке говорится, что проблема в _breakpoint.scss, который принадлежит Breakpoint, а не Zen.

И это не баг, это "по задумке". Точка останова — это миксин, предназначенный для включения в селектор, поэтому бессмысленно использовать @include на корневом уровне .scss файла.

Стоит отметить, что Sass поддерживает корневой уровень @include, но его использование ограничено без каких-либо свойств или родительских ссылок (у breakpoint они есть, вот в чем проблема) — см.: http://sass-lang.com/документация/файл.SASS_REFERENCE.html#втомчисле_a_mixin

person thamas    schedule 26.11.2013
comment
Вы можете добавить эти комментарии к своему предыдущему ответу, а затем удалить этот. - person Michael McGinnis; 14.11.2014