Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

null value #141

Open
thejameskyle opened this Issue · 4 comments

2 participants

@thejameskyle

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
@thejameskyle

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
@thejameskyle

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
@thejameskyle

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 thejameskyle referenced this issue in thoughtbot/bourbon
Closed

Null Value #140

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.