Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

linear-gradient with variables #67

Closed
emberian opened this issue Feb 5, 2012 · 3 comments
Closed

linear-gradient with variables #67

emberian opened this issue Feb 5, 2012 · 3 comments

Comments

@emberian
Copy link

emberian commented Feb 5, 2012

@import 'nib'

a
  background-image: linear-gradient(bottom, hsl(0, 0%, 35%), hsl(0, 0%, 45%))

works, but

@import 'nib'

dark-gradient = linear-gradient(bottom, hsl(0, 0%, 35%), hsl(0, 0%, 45%))

doesn't, it fails with

/usr/lib64/node_modules/stylus/bin/stylus:511
              throw err;
                    ^
Error: nib/gradients.styl:108
   104|  */
   105|
   106| linear-gradient(start, stops...)
   107|   error('color stops required') unless length(stops)
 > 108|   prop = current-property[0]
   109|   val = current-property[1]
   110|   stops = normalize-stops(stops)
   111|

cannot perform null[(0)]

    at Null.operate (/usr/lib64/node_modules/stylus/lib/nodes/node.js:189:13)
    at Evaluator.visitBinOp (/usr/lib64/node_modules/stylus/lib/visitor/evaluator.js:388:28)
    at Evaluator.<anonymous> (/usr/lib64/node_modules/stylus/lib/visitor/index.js:28:39)
    at Evaluator.visit (/usr/lib64/node_modules/stylus/lib/visitor/evaluator.js:74:18)
    at Evaluator.<anonymous> (/usr/lib64/node_modules/stylus/lib/visitor/evaluator.js:451:26)
    at Evaluator.<anonymous> (/usr/lib64/node_modules/stylus/lib/visitor/index.js:28:39)
    at Evaluator.visit (/usr/lib64/node_modules/stylus/lib/visitor/evaluator.js:74:18)
    at Evaluator.<anonymous> (/usr/lib64/node_modules/stylus/lib/visitor/evaluator.js:451:26)
    at Evaluator.<anonymous> (/usr/lib64/node_modules/stylus/lib/visitor/index.js:28:39)
    at Evaluator.visit (/usr/lib64/node_modules/stylus/lib/visitor/evaluator.js:74:18)

Why does nib need to use current-property? Can it be avoided?

@mekwall
Copy link

mekwall commented Feb 11, 2012

This is because linear-gradient add properties to the current selector, and thus cannot be referenced by a variable.

Best approach is to define your own function that in turn run linear-gradient with your pre-defined args.

dark-gradient()
  linear-gradient(bottom, hsl(0, 0%, 35%), hsl(0, 0%, 45%))

.foo
  dark-gradient()

kizu added a commit to kizu/nib that referenced this issue Aug 13, 2012
…iting the background, background-image etc. Fixes stylus#67
@enyo
Copy link

enyo commented Sep 23, 2012

That's really bad because configuring designs without this get's really frustrating. @kizu does your commit fix it so gradients are assignable?

@kizu
Copy link
Member

kizu commented Sep 23, 2012

@enyo yep, my fix would make it so you could assign gradients to variables and use then later. Here is a test for this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants