Show HN: Family.scss – a set of 20 smart SASS mixins
lukyvj.github.io
lukyvj.github.io
ul li:nth-child(1) {
background: red
}
ul li:nth-child(2) {
background: red
}
ul li:nth-child(3) {
background: red
}
should just be ul li:nth-child(1),
ul li:nth-child(2),
ul li:nth-child(3) {
background: red
}
Also, it's not very clear how to download the family.scss file, it's buried deep in an oddly named subfolder in the repo. ul li:nth-child(-n + 3) {
background: red;
}
See the last example on this page: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-childI assume that this is your github profile ? https://github.com/JelteF
$ cat <<EOF | gzip | wc -c
ul li:nth-child(1) {
background: red
}
ul li:nth-child(2) {
background: red
}
ul li:nth-child(3) {
background: red
}
EOF
71 # bytes
$ cat <<EOF | gzip | wc -c
ul li:nth-child(1),
ul li:nth-child(2),
ul li:nth-child(3) {
background: red
}
EOF
71 # bytesFor the download part, I think it's better to get the user to the folder where he can find the file in two different versions. But I take it in consideration and I'll try to improve that part.
There is no obligation to use it, if you think it's easy, then good for you :) You wont need it.
It's just here to make you save some time, to help you taming some wild targeting selectors. If you can do it, without some helpers, then just don't use it.
Note: there's a small bug in the first example. Css output sets 'color' while the scss used 'background'.
Of course, you'll use this project ony if you have to deals with some more complex nth targeting on a regular basis.