CODEWITHSUNDEEP
cssstylus
user2419981
user2419981

Reputation: 49

How to start with stylus?

Stylus looks great but no tutorials at all. Please tell me how to cofigure Stylus. I mean:

Where to put all this javascript commands like this, in which file. 

stylus(str)
    .set('filename', __dirname + '/css/test.styl')
    .define('url', stylus.url({ paths: [__dirname + '/public'] }))
    .render(function(err, css){

    });

I need in my css variable with base path for example :

background('bas_path/image.png);

Upvotes: 2

Views: 2263

Answers (1)

razorbeard
razorbeard

Reputation: 2944

I'm rather aware of the lack of tutorials on using Stylus and I do intend to write one myself, perhaps as a blog post of some sort. I just need to get into blogging. Been putting it off for a long while.

First off, in order to use Stylus - you need Node.JS installed. It is by far the easiest and most recommended way to get started with and use Stylus. Stylus can work in the browser, as demonstrated here, but finding out exactly how to do that is a challenge in and of itself.

But despite the lack of tutorials, it really isn't a hard thing to learn. To answer your question, it really depends on how you want to use Stylus, because it can be used in a few different ways.

The first way is simply to write your .styl files, and then use Stylus' built-in executable to watch and compile your files to CSS. The documentation for it can be found here.

The second way involves using the code in your question. It really does not matter which file you put that code in. It'll work anywhere as long as you require('stylus'). The Stylus' documentation isn't 100% complete but if you read over it twice you'll see that it actually answers all of your questions for you.

The third way is to use Connect middle-ware, and there's documentation for that too. The Connect middleware is exactly the same for ExpressJS, just swap any reference to 'connect' with 'express'.

As for referencing a base path variable in a background mixin, it's rather simple actually.

Set a variable like so:

base-path = 'img/path/'

Then create your mixin:

bg-image(image)
  background: url(base-path + image)

And then finally, call your mixin as if it were a simple property:

body
  bg-image: 'image.png'

This would compile down to:

body {
  background: url("img/path/image.png");
}

I will be coming back to this answer in the near future, once I have written a decent tutorial on Stylus, and append the link here. So keep tuned if you're willing to wait.

Upvotes: 1

Related Questions