If you find yourself with a complex css layout that isn’t quite working the way it should be, and you can’t quite work out what’s happening.

The dev tools might be helping but you keep having to refer to it for every little changes.

Here’s a handy sass mixin that you can simply drop in any element and get a quick debug view of your page with outlines:

@mixin debug-layout {
    outline:1px solid black;
    > * {
        outline:1px solid red;
        > * {
            outline:1px solid green;
            > * {
                outline:1px solid pink;
                > * {
                    outline:1px solid orange;
                }
            }
        }
    }
}

Not sure what’s happening with that header?

#that-header {
    @include debug-layout;
}

You can tweak the line styles and/or colour to fit better in your project too.

@mixin debug-layout {
    outline:1px double purple;
    > * {
        outline:1px solid green;
        > * {
            outline:1px dotted blue;
            > * {
                outline:1px dashed pink;
                > * {
                    outline:1px double dashed black;
                }
            }
        }
    }
}

The main important thing to know here is that outline does not affect spacing in your layout (unlike border) so you can add/remove as you please with no negative effect to the content flow.

Once the layout is fixed, it might worth asking ourselves how we got to that point in the first place :)