6 ms·
Show HN: Family.scss – a set of 20 smart SASS mixins
- Illniyar 10y agoLooks nice, but I've never had the need for anything other then first/last and even/odd myself.
- lukyvj 10y agoThanks, Of course, you'll use this project ony if you have to deals with some more complex nth targeting on a regular basis.
- hobonumber1 10y agoNice work! Great docs.
- lukyvj 10y agoThanks :)
- supernintendo 10y agoHey, great work. I don't have a personal use for this but for designers building a lot of static sites, it could be nice. I will say that you can achieve the same effect using classes with less bloat in your compiled CSS.
- lukyvj 10y agoHey! Thanks for the nice words. Sure you could achieve the same effect with css classes, here I just present an other way to do it.
- tobr 10y agoLooks like a great utility, but the output css isn't very compact. For example, 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.
- robinson7d 10y agoTotally right. I made a PR to the repo showing a way to fix it: https://github.com/LukyVj/family.scss/pull/1 https://github.com/LukyVj/family.scss/pull/1
- lukyvj 10y agoHey @tobr, Thanks for your feedback, and you're right! I'll work on it for a next update. For 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.
- JelteF 10y agoWhat would be even better is this: 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-child https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
- twolfson 10y agoIt might not be compact but the gzipped size is the same. $ 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 # bytes
- restlessdesign 10y agoSass* :)
- atriix 10y agoFor anyone else searching, the actual file is https://github.com/LukyVj/family.scss/blob/master/source/src/family.scss https://github.com/LukyVj/family.scss/blob/master/source/src...
- angry-hacker 10y agoThe website is somehow able to hang and crash my Chrome browser on Android. Just thought I'll let you know.
- lukyvj 10y agoYeah, it can be really heavy for some systems. I'll work on that.
- pedalpete 10y agoI'm not sure who/why somebody would use this library when it is fairly easy to write these selectors using just CSS (for most use cases anyway).
- lukyvj 10y agoHi, 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.
- wes-k 10y agoNice library! Note: there's a small bug in the first example. Css output sets 'color' while the scss used 'background'.
- lukyvj 10y agoFixed! Thanks