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

Re:Show HN: Family.scss – a set of 20 smart SASS mixins by tobr on Sunday May 22, 2016 @01:51PM (#11749521)

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.

[ Parent | on HN ]

Re:Show HN: Family.scss – a set of 20 smart SASS mixins by JelteF on Sunday May 22, 2016 @02:59PM (#11749783)

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

[ Parent | on HN ]

Re:Show HN: Family.scss – a set of 20 smart SASS mixins by lukyvj on Sunday May 22, 2016 @03:39PM (#11749928)

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

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

[ Parent | on HN ]

Re:Show HN: Family.scss – a set of 20 smart SASS mixins by JelteF on Sunday May 22, 2016 @03:58PM (#11750008)

Yup

[ Parent | on HN ]

Re:Show HN: Family.scss – a set of 20 smart SASS mixins by twolfson on Sunday May 22, 2016 @05:24PM (#11750347)

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

[ Parent | on HN ]

Re:Show HN: Family.scss – a set of 20 smart SASS mixins by lukyvj on Sunday May 22, 2016 @02:52PM (#11749743)

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.

[ Parent | on HN ]

Re:Show HN: Family.scss – a set of 20 smart SASS mixins by robinson7d on Sunday May 22, 2016 @02:25PM (#11749635)

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

[ Parent | on HN ]