Скажімо, вам потрібно використовувати певний селектор у кількох місцях вашого коду. Звичайно, це не надзвичайно часто, але таке трапляється. Повторний код, як правило, можливість для абстракції. Абстрагувати значення в Sass легко, але селектори трохи складніше.
Один із способів це зробити - створити свій селектор як змінну. Ось приклад списку селекторів, розділених комами:
$selectors: " .module, body.alternate .module ";Потім, щоб використати це, вам потрібно інтерполювати змінну, наприклад:
#($selectors) ( background: red; )Це також працює з вкладанням:
.nested ( #($selectors) ( background: red; ) )Префікс
Змінна також може бути лише частиною селектора, як префікс.
$prefix: css-tricks-; .#($prefix)button ( padding: 0.5rem; )Ви також можете використовувати вкладеність, щоб зробити префікс:
.#($prefix) ( &module ( padding: 1rem; ) &header ( font-size: 110%; ) &footer ( font-size: 90%; ) )Селектори на карті
Можливо, ваша абстракція піддається ситуації пари ключ / значення. Це карта в Сассі.
$selectorMap: ( selectorsFoo: ".module", selectorsBar: ".moodule-2" );Ви можете використовувати їх окремо, наприклад:
#(map-get($selectorMap, selectorsFoo)) ( padding: 1rem; )Або прокрутіть через них:
@each $selectorName, $actualSelector in $selectorMap ( #($actualSelector) ( padding: 1rem; ) )Приклади
Дивіться Змінні Pen Sass для селекторів Кріса Койєра (@chriscoyier) на CodePen.