please change from

/// Will only select the child if it’s unique.

to

/// Will only select the child if it is unique.

if i do a npm install and include the _family.scss in my scss file and compile it with gulp/sass, it gives me an error because of bad sign. (US-ASCII) or maybe save it as UTF-8 or something.

thank you.

great project btw.

Is it possible to have the library via bower?

Thank you.
PS: Awesome work 👍

Hi, I'm trying to host this lib on cdnjs.

But cdnjs cannot host scss files.
Could you provide css files?
Thanks.
cdnjs/cdnjs#8652

As @leonderijke pointed out, The li should be an amperstand here.

I got several requests for that.
Let's do it for the next code release :)

When adding or removing children, element 6 stays the marked one.

Hi, I'm going to host this lib on cdnjs.

Could you tell me which files should be added?
Thanks for your help!
cdnjs/cdnjs#8550

In FF :

VS

Chrome / Safari

It looks like you're including a lot of extra stuff in the bower install that users probably won't need, you can use the ignore in your bower.json file to skip files from being downloaded.

• https://github.com/bower/spec/blob/master/json.md

For example, all I do is point to bower_components/family.scss/source/src and then I'm able to @import family and it will work. But I don't need any of the other files it pulled down (except maybe the bower.json itself and the readme and license if they're required by Bower).

And if you ever move the family.scss file to a different folder, make sure to do a major version change as some people will be pointing directly to it and that will be a breaking change for them.

The icons are the wrong size and position in Firefox.

Add SassDoc to the project.
http://sassdoc.com/

Hey Luke, I suggest adding a Scss Lint setup and automatically check it via Travis CI.

I could send you a PR later this evening, if you like to :)

yep

Hey, I just ported family.scss to stylus, should I send a pull requ. or open a new repo

This possibly relates to issue #37, but it may also want to be a separate function. It'd be great to have a function to select every Nth item after the Xth child.

For example:

li {
    @include n-after(3,6)
    ....
}

would return

li:nth-child(3n+9) {
  ....
}

Note that it's +9, instead of +6 because +6 would highlight every 3rd including the 6th, instead of starting after. I've used this before for targeting the second row and on.

In addition, n-before in the same format would also be helpful, utilizing :nth-last-child instead of nth-child

Good job the library. It is of great use.
While going through the code I observed you didn't use pseudo last-child in mixin last()
Just like mixin first() we can use last-child when $num = 1.
Would love to know why it was avoided.

Hey Lucas,

Just wondering under what kind of License Family.scss is?
The reason why I am asking this is, I was thinking of creating a Ruby gem to wrap your mixin set and open source it.

Thanks for a great resource.

Cheers
Patrik

It's preferable to have Sass mixins as a bower dependency so that you can include them from their bower folder, and keep the library up to date easily.

Make sure that you only have one main file in a folder called family.scss that others can point to and import. Having other Sass files in the same folder can cause conflicts if people are looking for stuff that has a matching name. This is why it's important to namespace your default file to family.scss and not something generic like style.sass. You can still import other sass files from subdirectories into your main file with no fear of conflicts.

Other libraries that do this:

• https://github.com/TheJaredWilcurt/scout-app#supportedbuilt-in-mixin-libraries

If you set up bower like those libraries, I'll add family.scss to Scout-App so it will come with the processor out of the box.

Hi, I'm going to host this lib on cdnjs.

But I found that your license in package.json is different from the LICENCE.
Could you tell me which is able to use?
Thanks.
cdnjs/cdnjs#8652 (comment)

Would you consider adding Eyeglass support (https://github.com/sass-eyeglass/eyeglass)? It's more intuitive that just installing via vanilla NPM (where users would then have to specify a direct import path to the stylesheet within Sass).

Add mixin last-child() to alias :last-of-type

As @hugogiraudel nicely pointed out, it would be better to keep only one source file for family.scss.

You are dealing with quite complex selectors. It would be nice to see a proper test suite.

There should be a switch/button group/radio group at the top to switch between scss and sass. Switching to .sass would change all the documentation from @import thing() to +thing(). To make it easier for copy/pasting from the documentation.

Would you mind if i took an attempt to port this as an PostCSS plugin? I know postcss-quantity-queries exists but this offers a lot more than that.

Hate dealing with crazy nth cases so this looks like a great utility.. wondering if anyone has tested the browser coverage on this?

Lines 221 and 230 for first-child() and last-child() are missing an ";" and is throwing an error upon linting.

Trying to do something simple as

@include first(1) {
    background: blue;
  }

and it won't compile.

It activate the active style for each and every mixins below this one.

It will fix a few functions that doesn't works on mobile (iphone)

Hello,

May I ask this is added to NPM please, this would allow those of us who use it for all package management to use it easily

Thanks

Jonathan

After a few complains about that, I think it's time to make it more clear.
The idea would be to link the "download" button to a plain text file ( raw file ? ) or just directly starting a download on the user's computer. ( using a download attribute )

http://codepen.io/LukyVj/pen/c912853c61bb23098b4a6cdd29f807ec

pair-between(n) => even-between(n)
impair-between(n) => odd-between(n)

Hi,

Really useful! Would it be a good idea to namespace each mixin, perhaps with 'fam-' or something? I know the @include last() mixins would at least conflict with the susy mixins. Or is there some sort of automatic way to namespace things in sass that i'm not aware of?

Use :first-child instead of :nth-child(1)
:first-child == IE7/8
:nth-child == IE9

https://developer.mozilla.org/fr/docs/Web/CSS/:nth-child
https://developer.mozilla.org/fr/docs/Web/CSS/:first-child

@mixin each($num, $k=0) {
  &:nth-child(#{$num}n + #{$k}) {
    @content;
  }
}

for grid like this
|#|&|&|
|#|&|&|
we need clear:left on first col