quantity-queries icon indicating copy to clipboard operation
quantity-queries copied to clipboard

Add factor-of()

Open danielguillan opened this issue 4 years ago • 3 comments

Continuation of #13

danielguillan avatar Oct 18 '21 14:10 danielguillan

Oh, cool! Thank you for considering. I guess I'm making some fuzz here, like I did on SASS Modular Scale. Maybe I need a hobby.


Given even() and factor-of(2) would give the exact same results, one can be an alias to the other.

robsonsobral avatar Oct 18 '21 14:10 robsonsobral

Would you accept a PR, @danielguillan ?

robsonsobral avatar Mar 25 '22 20:03 robsonsobral

Absolutely! Can you please share what the API would look like and some example input/output code before doing the PR?

danielguillan avatar Mar 31 '22 08:03 danielguillan

Let get back to this? I'm sorry it took so long. I ended using my own implementation, but I think it can be helpful to others, specially as the use of grid layout increases.


I'm sorry! I messed up everything! I'm talking about multiples, no factors! The intention is to target quantities which are divisible by a number, so multiples! I'm so sorry!


I guess my old sample still works.

The API could be something like:

.foobar {
  @include multiple-of(3) {
    background-color: cyan;
  }
  
  @include multiple-of(5) {
    background-color: magenta;
    
    &:nth-child(2n) { // a nesting sample for every even element among a multiple of 5 quantity
      background: green;
    }
  }
}

And the output:

.foobar:nth-last-child(3n):first-child,
.foobar:nth-last-child(3n):first-child ~ * {
  background-color: cyan;
}
.foobar:nth-last-child(5n):first-child,
.foobar:nth-last-child(5n):first-child ~ * {
  background-color: magenta;
}
.foobar:nth-last-child(5n):first-child:nth-child(2n),
.foobar:nth-last-child(5n):first-child ~ *:nth-child(2n) {
  background: green;
}

robsonsobral avatar Dec 06 '22 13:12 robsonsobral

This is great, thank you! Please feel free to submit a PR that adds the multiple-of mixin.

danielguillan avatar Dec 07 '22 08:12 danielguillan

@danielguillan , may I suggest you to rename this issue, just to help us in the future?

robsonsobral avatar Dec 07 '22 11:12 robsonsobral