1

How to create a utility mixins with destrucutrable params? Like in standard css margin: inherit auto where the first argument is applied to top and bottom and second to right and left, unless additional args given.

margin-side(left, right)
  margin-left left
  margin-right right

.some-div
  margin-side auto
  // applied to both margin -left and -right

Using conditionals? Rest params? Default param values? Can't get it to work with any of those..

// thus far I've done it with
margin-side(left, right) ...
margin-sides(both) ...
// but it's error prone

Cheers, thanks!

1 Answer 1

1

I'm not sure if I understand your question.

I think it's what you try to do:

margin-side(vertical, horizontal = vertical)
  margin-top vertical
  margin-left horizontal
  margin-right horizontal
  margin-bottom vertical

.foo
  margin-side(10px)

.bar
  margin-side(5px, 7px)

try it online

3
  • Yes, that's exactly it. I've tried that tho must have messed something up because it didn't work. Thanks!
    – n-smits
    Apr 15, 2020 at 8:48
  • don't forget that this is the default behaviors for margin css propertie so this mixin is probably useless developer.mozilla.org/en-US/docs/Web/CSS/margin#Syntax
    – Yukulélé
    Apr 15, 2020 at 14:14
  • This specific one posted above yes (it's quite literally the same as "margin"). By side I meant horizontal only. So margin-side(left, right = left) { margin-left left; margin-right right; } Another good example is size(width, height=width) {...}
    – n-smits
    Apr 16, 2020 at 15:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.