How to Switch Single Lines of CSS to Multiple Lines in Sublime Text
Every once in a while you’ll need to edit a CSS file and all the code will be in single lines. This to me is annoyingly unreadable to the human eye unless you really look closely. It’s not fun so here’s how to Find and Replace the code in Sublime Text. I am pretty sure you can do this in just about any code editor.
First, open up your Find and Replace search box. For PC’s that’s Find > Replace or CTRL + H to open up the Replace box. For multiple files, Find > Find In Files or CTRL + SHFT + F. Whenever possible use keyboard commands. It makes coding and designing much more efficient.
For this example I use the Replace Files box.
Make sure Regular Expressions is selected. It’s those little characters at the top left of the Replace box => .*
Next, add the semicolon character to Find => ;
If you’re using the Replace search, make sure to select the files you want to do this for.
In the Replace field, add semicolon, backslash, n, backslash, and t => ;\n\t
The semicolon will be replaced with itself. If you don’t add this your CSS code will absolutely be decimated. The \n is a line feed, the \t is a tab to indent the code.
When you’re ready, hit the Replace button. Sublime Text will pop up a box asking to replace how many instances of semicolons are in the file(s).
Voilah! You now have a cleaned up CSS file ready for viewing. Happy coding!