Динамический: последний дочерний элемент в SASS

Я некоторое время возился с SASS и сделал несколько хороших функций, которые используют @if @else if и т. Д. Однако у меня есть следующие два фрагмента кода в Mixin:

&:last-child { float: right; margin-right: 0; } 
&:only-child { float: left; margin-right: 0; }

Очевидно, что обе эти части кода применяются к каждому элементу, в который я включаю этот конкретный миксин. Есть ли способ динамической проверки того, является ли элемент :last-child/:only:child с помощью оператора @if или любых других методов?

Что-то типа:

@if :last-child == True { float: right; margin-right:0; }

Надеюсь, я объяснил это достаточно хорошо.

Спасибо


css sass css-selectors pseudo-class
person Richard Watts    schedule 03.06.2013    source источник
comment
Простое присутствие :last-child поможет вам проверить, является ли элемент последним дочерним элементом.   -  person BoltClock    schedule 03.06.2013
comment
@BoltClock Да, но он повторяет код для каждого элемента, на который я включаю Mixin. Если это единственный ребенок, я бы хотел, чтобы он выполнял эту функцию, если это последний ребенок, я бы хотел, чтобы он выполнял другую функцию, а не проверял оба.   -  person Richard Watts    schedule 03.06.2013

Ответы (1)


arrow_upward
11
arrow_downward

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

Если вы ищете последний дочерний элемент, который не является единственным дочерним элементом, это ваш селектор:

&:last-child:not(:only-child) {
    // styles
}

http://tinker.io/1717b

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

@mixin foo($children: true) {
  @if $children or $children == last-child {
    &:last-child {
      // styles
    }
  }
  @if $children or $children == only-child {
    &:only-child {
      // styles
    }
  }
}
person cimmanon    schedule 03.06.2013
comment
Ах, это отстой, думаю, я пытался много программировать с помощью SASS? Казалось бы, мой единственный вариант - добавить мои правила :last-child в Mixin, которые люди должны сами включать в элемент last-child? - person Richard Watts; 04.06.2013
comment
Да, это то, что я бы порекомендовал. Несколько небольших миксинов, которые можно использовать (или не использовать) вместе, лучше, чем один большой миксин с длинной строкой аргументов. - person cimmanon; 04.06.2013
comment
Единственным другим решением было бы использование согласованных имен классов, но особенность моей системы заключается в том, что пользователи могут иметь произвольные/семантические имена классов. Есть ли способ найти для этого динамическое решение с использованием другого языка и/или использования базы данных? - person Richard Watts; 04.06.2013
comment
Я не понимаю, почему это проблема или почему вы хотите привлечь к этому базы данных (как вы думаете, какую пользу это вам даст?). Модульный код — лучший способ предоставить вашим пользователям гибкость, которую они ищут, особенно если они относятся к тому типу пользователей, которые хотят беспрепятственно интегрировать его со своим собственным стилем кодирования. - person cimmanon; 04.06.2013
comment
Что ж, для того, чтобы моя сеточная система работала должным образом, важно, чтобы :last-child плавал правильно (из-за проблем с рендерингом субпикселей). Я могу либо дать пользователю выбор: мучительно не забыть прикрепить пользовательский миксин, чтобы плавать в последнем дочернем элементе (для большинства людей это не сложно, но все равно раздражает), или я добавляю миксин к каждому элементу по умолчанию и работаю с повторяющимся кодом. . - person Richard Watts; 04.06.2013
comment
Если ваш код выполнен модульно (примеси стилей столбцов, примеси стилей последнего дочернего элемента, примеси стилей последнего типа), то все, что вам нужно сделать, это создать дополнительные примеси, которые вызывают их, чтобы упростить получение кода, который просто работает, позволяя опытным пользователям вызывать их индивидуально по своему усмотрению. - person cimmanon; 04.06.2013