Селекторы Sass Placeholder и классы Modernizr .no

Скажем, у меня есть селектор-заполнитель в Sass. В этом селекторе я пишу несколько стилей, где становится очевидным, что мне нужно проверить функцию с помощью Modernizr.

Проблема заключается в том, что вы собираетесь использовать классы .no-generatedcontent или .generatedcontent, предоставленные modernizr, но их нельзя использовать, поскольку они окажутся в неправильном иерархическом расположении после того, как селектор-заполнитель выполнит свою работу.

Единственный способ, который я вижу для решения этой проблемы, — поместить их за пределы селектора-заполнителя, но это испортит мои стили, в то время как Sass предназначен для того, чтобы помочь сохранить мои стили более организованными.

Любые идеи о том, как это можно обойти?

Вот пример того, что я имею в виду:

Тег <html> в верхней части моей страницы после того, как modernizr завершит свою работу:

<html class="js flexbox flexboxlegacy canvas canvastext webgl touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths wf-allumistd-n1-active wf-freightsanspro-n3-active wf-automate-n4-active wf-automate-n7-active wf-active">

Теперь предположим, что у меня есть селектор-заполнитель под названием %styles.

%styles {
li {
this: this;
}
.no-generatedcontent li {
this: that;
}
}

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

.main {
section {
.box-area {
color: red;
@extend %styles;
}
}
}

Мне кажется очевидным, что класс modernizr находится в неправильном месте, чтобы иметь какой-либо эффект. Это своего рода проблема иерархии. Я мог бы решить эту проблему, поместив его за пределы заполнителя, но тогда мне пришлось бы @extend его отдельно, и мой код sass запутался, что является основной причиной, по которой я начал использовать sass, чтобы мои стили были более аккуратными.

Любые идеи?


css sass placeholder modernizr
person rctneil    schedule 19.11.2012    source источник
comment
Какой CSS вы хотите сгенерировать? Как вы пишете свой Sass? Что вы пробовали?   -  person cimmanon    schedule 19.11.2012
comment
Проверьте мой комментарий к первому ответу ниже и обновленный пример кода, который я добавил в вопрос.   -  person rctneil    schedule 20.11.2012
comment
Это действительно намного полезнее, если вы также предоставите CSS, который хотите сгенерировать.   -  person cimmanon    schedule 20.11.2012

Ответы (1)


arrow_upward
1
arrow_downward

Сасс:

%styles {
    li {
        border: 1px solid red;

        .no-generatedcontent & { // note the location of the & here
            border: 1px solid red;
        }
    }
}

.main {
    section {
        .box-area {
            color: red;
            @extend %styles;
        }
    }
}

CSS:

.main section .box-area li {
  border: 1px solid red; }

.no-generatedcontent .main section .box-area li, .main section .no-generatedcontent .box-area li {
  border: 1px solid red;
  background: #CCC; }

.main section .box-area {
  color: red; }

Кажется, есть ошибка при использовании @extend (видите, как он генерирует 2 селектора в строке .no-generatedcontent? Sass 3.2.3). Этого не произойдет, если вместо этого я использую миксин:

.main section .box-area {
  color: red; }

  .main section .box-area li {
    border: 1px solid red; }

  .no-generatedcontent .main section .box-area li {
    border: 1px solid red;
    background: #CCC; }
person cimmanon    schedule 20.11.2012
comment
Можете ли вы сказать мне, что означает/делает амперсанд в конце селектора? Похоже, это может быть решением этой проблемы :-) - person rctneil; 20.11.2012
comment
Обновление. Видел это: joeloliveira.com/2011/ 28/06/the-ampersand-a-killer-sass-feature Отлично. Просто нужно немного указать в правильном направлении! Спасибо - person rctneil; 20.11.2012