Sublime Text + SASS + Ascii Art For the Win

I wanted to share one of the coolest tricks I’ve started using in my SASS to help me get around my stylesheets a bit quicker. I’m always looking for little tricks like this to make getting around the code a lot faster. On a huge project these little gems really add up.

Over a year ago I switched to Sublime Text as my code editor. I’d previously been a long-time Dreamweaver user, but I wanted to use something I could have on Mac and PC without buying two licences.

One of the weirdest differences was the Sublime Minimap. Effectively, the scrollbar shows you a zoomed out version of your code! It’s actually pretty amazing, you start to identify sections of code by line breaks. This quickly became one of the indispensable features of the tool.

Now I find myself writing my CSS in SASS. One of my favourite features of this stylesheet preprocessing language is that comments will be stripped out when the final CSS is ultimately compiled.

That’s when I had an amazing idea. Or should I say,

#   /$$$$$$       /$$                    
#  |_  $$_/      | $$                    
#    | $$    /$$$$$$$  /$$$$$$   /$$$$$$ 
#    | $$   /$$__  $$ /$$__  $$ |____  $$
#    | $$  | $$  | $$| $$$$$$$$  /$$$$$$$
#    | $$  | $$  | $$| $$_____/ /$$__  $$
#   /$$$$$$|  $$$$$$$|  $$$$$$$|  $$$$$$$
#  |______/ \_______/ \_______/ \_______/

By using a handy Text to Ascii tool and using a generous amount of white space in my code (something I’ve been doing for a while during development) I can create really easy to see divisions in my SASS!


Giant comments in codes are also visible in the minimap scrollbar on the right of the code editor!


When SASS gets compiled (I use Codekit for Mac, and Fire app for PC), it strips all of this out, so it really is just a handy reference for me.


5 thoughts on “Sublime Text + SASS + Ascii Art For the Win

  1. Great idea. I have been using Ascii art for some years now as headers for my css files – as a little advert so taking this a step further is great.
    Running those comments through CodeKit or HammerForMac I realised I could keep them in the final compressed output by adding an exclamation after the opening comment:
    /*! Comment you want to keep in a compressed file */
    This stops the compression of the comment – can be useful if you want to retain a bit of structure in the compressed version.

  2. Pingback: This one weird trick will make your stylesheets easy to navigate

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>