CODEWITHSUNDEEP
cssstylus
iopq
iopq

Reputation: 1024

How to output a variable with Stylus syntax

If I have a few variables in stylus like this:

emphasisBackground = emphasis(0%, emphasisTop, emphasisBottom)
emphasisHover = emphasis(20%, emphasisTop, emphasisBottom)
emphasisActive = emphasis(-10%, emphasisTop, emphasisBottom)

emphasis is my own mixin that returns some properties like background, filter (for IE), etc. how can I display those variables?

a
  emphasisBackground

this doesn't work, Stylus thinks it's a property, not a variable

a unquote(s('%s',emphasisBackground))

this doesn't work either, it just prints the filter property for IE, but not all of the lines of the variable

Do I have to turn those things into mixins?

Upvotes: 2

Views: 1167

Answers (2)

kizu
kizu

Reputation: 43224

In the latest release of Stylus there is @block support (docs).

With it you can make any function return a block object that you could save into the variable and then use anywhere you'd like, an abstract example:

foo(w, h)
  return @block {
    width: w
    height: h
  }

bar = foo(10px, 20px)
baz = foo(20px, 30px)

a
  {bar}

b
  {baz}

would render to

a {
  width: 10px;
  height: 20px;
}
b {
  width: 20px;
  height: 30px;
}

Upvotes: 0

Idistic
Idistic

Reputation: 6301

One way to get that effect would be to nest mixins 

// Mixin that does the work (whatever that is) 
emphasis(percent, eStart, eStop)
  .
  .
  .

// Helper mixins 
emphasisBackground 
  emphasis(0%, emphasisTop, emphasisBottom)

emphasisHover 
  emphasis(20%, emphasisTop, emphasisBottom)

emphasisActive 
  emphasis(-10%, emphasisTop, emphasisBottom)

Then use it just like you are now. 

a
  emphasisHover

If that's not acceptable you can add a bit more detail about what you are doing and I will see if I can assist you.

Upvotes: 1

Related Questions