CODEWITHSUNDEEP
csshashstylus
BeniaminoBaggins
BeniaminoBaggins

Reputation: 12433

Stylus - Hash causing error

I'm trying to use a hash in Stylus to group all the properties of my buttons. Here is the hash:

global_constants.styl:

brand-colour = #FC4747
button-hover-colour = #ff8282
button-style = 
    {   font: 200 16px 'Helvetica Neue', Helvetica, Arial, sans-serif,
        border: 1px solid brand-colour,
        border-radius: 6px,
        '&:hover': {
            background-color: #ff8282
        }
    }

And the client (override_multiselect.styl):

@require "global_constants"

button.multiselect 
    {button-style}

ul.multiselect-container 
    width 100%

span.multiselect-selected-text
    color brand-colour
    text-transform uppercase
    font button-style[font]

I'm getting this error:

ParseError: stylus/global_constants.styl:7:6 3| button-style = 4| { the-font: 200 16px 'Helvetica Neue', Helvetica, Arial, sans-serif, 5| the-border: 1px solid brand-colour, 6|
the-border-radius: 6px 7| } -----------^

invalid right-hand side operand in assignment, got "outdent"

How do I get rid of the error and apply all of the button-style styles to button.multiselect and apply the button-style[font] to span.multiselect-selected-text?

Upvotes: 0

Views: 156

Answers (2)

BeniaminoBaggins
BeniaminoBaggins

Reputation: 12433

I had to change the indentation to contain the opening parenthesis on the same line as the "=", and also escape my commas in the font, like this:

brand-colour = #FC4747
button-hover-colour = #ff8282
button-style = {   font: 200 16px 'Helvetica Neue'\, Helvetica\, Arial\, sans-serif,
        border: 1px solid brand-colour,
        border-radius: 6px,
        height: 64px,
        '&:hover': {
            background-color: #ff8282
        }
    }

Upvotes: 0

Panya
Panya

Reputation: 2699

Well, you get the error because , is a separator for key-value pairs of the hash. You can use your approach (with string + unquote to get the real value), or you can escape the commas with \:

font: 200 16px 'Helvetica Neue'\, Helvetica\, Arial\, sans-serif,

Upvotes: 0

Related Questions