Применение:
@include firsLastIndentReset($elem, $prop);
$elem
- элемент DOM
(класс или тег) для класса заключаем селлектор в кавычки '.item'
$prop
- CSS свойство имеющее модификаторы top
и bottom
Вызов без параметров
сбрасывает margin-top
и margin-bottom
у элементов p
.edit-block__body {
@include firsLastIndentReset();
}
на выходе получаем
.edit-block__body p:first-of-type,
.edit-block__body p:first-child {
margin-top: 0;
}
.edit-block__body p:last-of-type,
.edit-block__body p:last-child {
margin-bottom: 0;
}
Вызов c параметрами
сбрасывает padding-top
и padding-bottom
у элементов .menu__item
@include firsLastIndentReset('.menu__item', padding);
на выходе получаем
.menu__item:first-of-type,
.menu__item:first-child {
padding-top: 0;
}
.menu__item:last-of-type
.menu__item:last-child {
padding-bottom: 0;
}
/**
* $tag элемент или класс (для класса . в имени, обязательна)
*/
@mixin firsLastIndentReset($elem : p, $prop : margin) {
#{$elem}:first-of-type,
#{$elem}:first-child {
#{$prop}-top : 0;
}
#{$elem}:last-of-type,
#{$elem}:last-child {
#{$prop}-bottom : 0;
}
}
htmlbook.ru/css/first-of-type, htmlbook.ru/css/last-of-type
поддержка caniuse.com/#search=first-of-type