linear-gradient with variables #67

Closed
cmr opened this Issue Feb 5, 2012 · 3 comments

4 participants

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

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 kizu added a commit to kizu/nib that referenced this issue Aug 13, 2012
@kizu kizu Moved whole logic from the gradient function to the vendor ones, rewr…
…iting the background, background-image etc. Fixes #67
988d3de
@enyo

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

@kizu

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

@slang800 slang800 added a commit that referenced this issue Jun 16, 2013
@kizu kizu Moved whole logic from the gradient function to the vendor ones, rewr…
…iting the background, background-image etc. Fixes #67
43c300f
@slang800 slang800 added a commit that referenced this issue Jun 19, 2013
@kizu kizu Moved whole logic from the gradient function to the vendor ones, rewr…
…iting the background, background-image etc. Fixes #67
73767f4
@slang800 slang800 added a commit that referenced this issue Jun 20, 2013
@kizu kizu Moved whole logic from the gradient function to the vendor ones, rewr…
…iting the background, background-image etc. Fixes #67
1fb83a1
@slang800 slang800 added a commit that referenced this issue Jun 20, 2013
@kizu kizu Moved whole logic from the gradient function to the vendor ones, rewr…
…iting the background, background-image etc. Fixes #67
b270a25
@slang800 slang800 added a commit that referenced this issue Jul 27, 2013
@kizu kizu Moved whole logic from the gradient function to the vendor ones, rewr…
…iting the background, background-image etc. Fixes #67
dbf630d
@slang800 slang800 added a commit that closed this issue Jul 30, 2013
@kizu kizu Moved whole logic from the gradient function to the vendor ones, rewr…
…iting the background, background-image etc. Fixes #67
8f8231a
@slang800 slang800 closed this in 8f8231a Jul 30, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment