null value

[jamiebuilds]

Just an idea:

---

Stylus:

#foo
    margin 1em null

CSS:

#foo {
    margin-top: 1em;
    margin-bottom: 1em;
}

---

Stylus:

#foo
    margin null 1em

CSS:

#foo {
    margin-left: 1em;
    margin-right: 1em;
}

---

Stylus:

#foo
    margin 1em .5em null

CSS:

#foo {
    margin-top: 1em;
    margin-right: .5em;    
    margin-right: .5em;
}

---

Stylus:

#foo
    margin null .5em 1em null

CSS:

#foo {
    margin-right: .5em;    
    margin-bottom: 1em;
}

[kizu]

Nice idea!

However, there is another idea I have when I hear null: right now there is no way (afaik) to tell Stylus that this property don't need to return anything.

So, when you're doing something like foo: bar() and the bar() is some function, then there is no way to return nothing, so there won't be a foo there at all.

So, adding some keyword that would tell Stylus to ignore the property at all would be nice.

And the behavior you want can be made by the following mixin:

margin()
  if null in arguments
    margin-top: arguments[0] if arguments[0] != null
    margin-right: arguments[1] if arguments[1] != null
    if length(arguments) == 2
      margin-bottom: arguments[0] if arguments[0] != null
      margin-left: arguments[1] if arguments[1] != null
    else if length(arguments) == 3
      margin-bottom: arguments[2] if arguments[2] != null
      margin-left: arguments[1] if arguments[1] != null
    else if length(arguments) == 4
      margin-bottom: arguments[2] if arguments[2] != null
      margin-left: arguments[3] if arguments[3] != null
  else
    margin: arguments

[jamiebuilds]

Well done on that snippet, I've already put it in my _mixins.styl file along with padding. I would like to see this expanded into other places and turned into function for both margin and padding (I'd do it myself but it'd be a terrible hack job...)

Also, I'm fairly certain that the colons aren't necessary in these functions but I may be wrong.

Margins

margin()
  if null in arguments
    margin-top: arguments[0] if arguments[0] != null
    margin-right: arguments[1] if arguments[1] != null
    if length(arguments) == 2
      margin-bottom: arguments[0] if arguments[0] != null
      margin-left: arguments[1] if arguments[1] != null
    else if length(arguments) == 3
      margin-bottom: arguments[2] if arguments[2] != null
      margin-left: arguments[1] if arguments[1] != null
    else if length(arguments) == 4
      margin-bottom: arguments[2] if arguments[2] != null
      margin-left: arguments[3] if arguments[3] != null
  else
    margin: arguments

Padding

padding()
  if null in arguments
    padding-top: arguments[0] if arguments[0] != null
    padding-right: arguments[1] if arguments[1] != null
    if length(arguments) == 2
      padding-bottom: arguments[0] if arguments[0] != null
      padding-left: arguments[1] if arguments[1] != null
    else if length(arguments) == 3
      padding-bottom: arguments[2] if arguments[2] != null
      padding-left: arguments[1] if arguments[1] != null
    else if length(arguments) == 4
      padding-bottom: arguments[2] if arguments[2] != null
      padding-left: arguments[3] if arguments[3] != null
  else
    padding: arguments

[jamiebuilds]

Borders

border-color()
  if null in arguments
    border-top-color:      arguments[0] if arguments[0] != null
    border-right-color:    arguments[1] if arguments[1] != null
    if length(arguments)      == 2
      border-bottom-color: arguments[0] if arguments[0] != null
      border-left-color:   arguments[1] if arguments[1] != null
    else if length(arguments) == 3
      border-bottom-color: arguments[2] if arguments[2] != null
      border-left-color:   arguments[1] if arguments[1] != null
    else if length(arguments) == 4
      border-bottom-color: arguments[2] if arguments[2] != null
      border-left-color:   arguments[3] if arguments[3] != null
  else
    border-color: arguments

border-width()
  if null in arguments
    border-top-width:      arguments[0] if arguments[0] != null
    border-right-width:    arguments[1] if arguments[1] != null
    if length(arguments)      == 2
      border-bottom-width: arguments[0] if arguments[0] != null
      border-left-width:   arguments[1] if arguments[1] != null
    else if length(arguments) == 3
      border-bottom-width: arguments[2] if arguments[2] != null
      border-left-width:   arguments[1] if arguments[1] != null
    else if length(arguments) == 4
      border-bottom-width: arguments[2] if arguments[2] != null
      border-left-width:   arguments[3] if arguments[3] != null
  else
    border-width: arguments

border-style()
  if null in arguments
    border-top-style:      arguments[0] if arguments[0] != null
    border-right-style:    arguments[1] if arguments[1] != null
    if length(arguments)      == 2
      border-bottom-style: arguments[0] if arguments[0] != null
      border-left-style:   arguments[1] if arguments[1] != null
    else if length(arguments) == 3
      border-bottom-style: arguments[2] if arguments[2] != null
      border-left-style:   arguments[1] if arguments[1] != null
    else if length(arguments) == 4
      border-bottom-style: arguments[2] if arguments[2] != null
      border-left-style:   arguments[3] if arguments[3] != null
  else
    border-style: arguments

[jamiebuilds]

Does it make sense to put in a check just to make sure property null wasn't used?

property()
  if null in arguments
    if length(arguments) > 1
      property-top:   arguments[0] if arguments[0] != null
      property-right: arguments[1] if arguments[1] != null
      if length(arguments)      == 2
        property-bottom: arguments[0] if arguments[0] != null
        property-left:   arguments[1] if arguments[1] != null
      else if length(arguments) == 3
        property-bottom: arguments[2] if arguments[2] != null
        property-left:   arguments[1] if arguments[1] != null
      else if length(arguments) == 4
        property-bottom: arguments[2] if arguments[2] != null
        property-left:   arguments[3] if arguments[3] != null
    else
      error(arguments + ' is not a valid value of ' + property)
  else
    property: arguments

[jamiebuilds]

Closing this as part of cleaning out old issues. Feel free to reopen.