Stylus global variables

Question

I have a core.styl where I put my grid-style, some stylus-functions and some variables. This file should be imported in all of my routes.

Beside that I have an page.styl which depends on my current route (e.g. contact.styl for /contact)

Note: My project is based on angular.js so the html-head doesn't reload. But I'm able to add some stuff with angular in html-head like <link href="contact.css">.

I tried following

//index.html
<link rel="stylesheet" href="/css/core.css" /> <-- this is static, always there
                               
<link rel="stylesheet" href="/css/pages/contact.css" /> <-- added by angular

The Problem: In the contact.styl I have no access to my stylus variables and functions (declared in core.styl)

one solution: @import '../core.styl' in each page stylesheet. But for me out of the question.

Is there an other solution I can try out?

Maybe something like that (server.js)?

function compile(str, path) {
    return stylus(str)
        .import(config.path_client + "/css/core")
        .set('filename', path)
        .set('warn', true)
        .set('compress', true);
}
app.use(stylus.middleware({
    src: config.path_client + '/css/pages',
    compile: compile
}));

(tried very long but still doesn't work for me)

Edit: My file structure:

|client
||css
|||pages
||||-contact.styl
||||-contact.css
|||base
||||-core.styl
||||-core.css
|server
||-server.js
|

score 1 · Accepted Answer · answered Mar 06 '15 at 08:38

1

You can use JS API and define these vars using define method. See http://learnboost.github.io/stylus/docs/js.html#definename-node

answered Mar 06 '15 at 08:38

Panya

2,679
2
18
17

isnt that finally the same as the first solution i mentioned where i did '@'import 'core.styl' ? Or maybe i dont get it right so if correct me please: I do .set('filename', '/myvars.styl').define(myvars) and then do '@'import 'myvars.styl' OR I do .set('filename', path).define(myvars) that myvars are directly imported in e.g. contact.css. So both end up the same that myvars are on top of e.g. contact.styl file defined or? --is there no way to define this vars completely independend of any .styl/.css file? – Mangocrack Mar 06 '15 at 21:01
From your question it seems like exactly what you need (the defined global vars and functions will be accessible inside `contact.styl` without importing them in the `core.styl`. – Panya Mar 06 '15 at 21:30
They will be completely independent (they're just globals). – Panya Mar 06 '15 at 21:42
ok thanks it works great for me :) now i must find a way to define all of my vars and fns in a overseeable way ..maybe a .json file – Mangocrack Mar 07 '15 at 16:15
so finally i have mutch more than just a few vars and functions ..and i use jeet (set of functions) is there a way to define this functions all at once? something like that .define(allmyfunction.styl) ? – Mangocrack Mar 07 '15 at 18:19
You can use `import` method (http://learnboost.github.io/stylus/docs/js.html#importpath) – Panya Mar 07 '15 at 18:28
Also you can write a complete plugin and use `use` method (http://learnboost.github.io/stylus/docs/js.html#usefn) – Panya Mar 07 '15 at 18:31
prefer the plugin ..so i have to write a js-function that wrapps all my stylus functions/vars automatically in a `define()` block (maybe store them before in a json file) ? – Mangocrack Mar 07 '15 at 20:19

Stylus global variables

1 Answers1