Family.scss is a set of Sass mixins which will help you to manage the style of :nth-child'ified elements, in an easy way.
MIT License
Family.scss is a set of 26 smart Sass mixins which will help you to manage the style of :nth-child
'ified elements, in an easy and classy way.
Website : https://lukyvj.github.io/family.scss/
$ middleman
( You don't use middleman ? Goto https://middlemanapp.com/ )$ npm install family.scss
$ bower install family.scss
gem install family-rails
(maintained by pzi)Family.scss on npm
First of all, you need to import Family.scss into your project. If you're using eyeglass you can import it as such:
@import "family";
Otherwise import the Family.scss source file.
Then you can use the mixins right away on your stylesheets.
Input :
ul li {
background: blue;
@include first(3) {
background: blue;
}
}
Output :
ul li {
background: blue;
}
ul li:nth-child(-n + 3) {
background: blue;
}
It's true, I did it for Sass, but some awesome contributors extended it to :
family.scss
file is now on source/src/_family.scss
instead of source/src/family.scss
each-after()
mixin removed, re-opening #37
first-child()
mixin added.last-child()
mixin added.each-after()
mixin added, closing #37
first()
mixin now uses :first-child
if the given parameter is 1
, closing #10
n-between()
mixin added, closing #35
at-least()
, at-most()
and in-between()
quantity queries mixins added, closing #24
pair-between()
is now even -between()
, closing #34
impair-between()
is now odd-between()
, closing #34
backdrop-filter
removed from the about page