Show HN: Family.scss – a set of 20 smart SASS mixins

[redox_]

http://lukyvj.github.io/family.scss/

[tobr]

Looks 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.

[JelteF → tobr]

What 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

[lukyvj → JelteF]

Wow, thanks for this one, updating now! :o

I assume that this is your github profile ? https://github.com/JelteF

[JelteF → lukyvj]

Yup

[twolfson → tobr]

It 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

[lukyvj → tobr]

Hey @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.

[robinson7d → tobr]

Totally right. I made a PR to the repo showing a way to fix it: https://github.com/LukyVj/family.scss/pull/1

[pedalpete]

I'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 → pedalpete]

Hi,

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.

[atriix]

For anyone else searching, the actual file is https://github.com/LukyVj/family.scss/blob/master/source/src...

[_qbjt]

Hey, 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 → _qbjt]

Hey! 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.

[wes-k]

Nice library!

Note: there's a small bug in the first example. Css output sets 'color' while the scss used 'background'.

[lukyvj → wes-k]

Fixed! Thanks

[angry-hacker]

The website is somehow able to hang and crash my Chrome browser on Android. Just thought I'll let you know.

[lukyvj → angry-hacker]

Yeah, it can be really heavy for some systems. I'll work on that.

[Illniyar]

Looks nice, but I've never had the need for anything other then first/last and even/odd myself.

[lukyvj → Illniyar]

Thanks,

Of course, you'll use this project ony if you have to deals with some more complex nth targeting on a regular basis.

[hobonumber1]

Nice work! Great docs.

[lukyvj → hobonumber1]

Thanks :)

[restlessdesign]

Sass* :)