null value #141

Closed
thejameskyle opened this Issue Oct 27, 2012 · 5 comments

Comments

Projects
None yet
2 participants

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;
}
Contributor

kizu commented Oct 28, 2012

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

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

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

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

thejameskyle referenced this issue in thoughtbot/bourbon Dec 5, 2012

Closed

Null Value #140

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment