JaggyGauran

Freelance developer, and designer

My Sass/Stylus Workflow

For such a long time, I've been working with Sass and Stylus and pretty much, I suck at it. Even till now I believe so.

Anyways, to get things started, I'll show you the directory structure of my assets, take not that I'll be using stylus for the entirety of the post.

Structure

| stylus/
|- theme.styl
|
|- partials/
|-- components.styl
|-- footer.styl
|-- header.styl
|-- layout.styl
|
|- utils/
|-- boilerplate.styl
|-- colors.styl
|-- grid.styl
|-- icons.styl        // font icons
|-- metrics.styl      // dimensions
|-- mixins.styl
|-- typography.styl

The main things I wanna focus on are: colors and components.

Grid

Now, my grid is very simple:

$column-name  = col;
$column-count = 32;
$column-width = 2rem;

.full { width: 100%; }
.half { width: 50%; }

for $index in 1..$column-count {
    .{$column-name}-{$index} {
        width: ($index * $column-width)
    }
}

Components

Now, the I work with my colors are more or less like this:

// colors.styl

$red   = #ff0000;
$green = #00ff00;
$blue  = #0000ff;
$black = #000000;

Rather than using the color variable to style the buttons, I use a dedicated variable for the components.

// components.styl

hover() {
    &.hover {
        background-color: darken(@background-color, 10%);
    }
}

$button-primary-background = $red;
$button-primary-text-color = $black;

.button {
    hover();
    background-color: $button-primary-background;
    color: $button-primary-text-color;
}

Why?

Well, at first I just threw everything in the colors partial but I ended up having to guess each and every variable name and ended up just going to look back into the reference.

I preferred using straight colors before but whenever I tweak, I end up lost in maintenance and all the crap.

Now, by bringin in the variables along with the component, I manage to see which color it points to and can easily reuse the component into different projects.

Naming Convention

I pretty much more or less go with the generic-specific-attribute naming conventions

generic-specific-attribute

link-hover-text-color button-primary-text-color

You get the point. It makes it much easier for autocomplete to do it's magic.

Outro

I'm not sure if I should place the components in the util or partials.

Now, I'm more of a backend developer so I still have a lot of stuff to learn. Now, this is my workflow and I'm just throwing it out there for some constructive criticism.

If you have any suggestions or you wanna talk, hit me up on twitter @jaggygauran