You probably want some helper classes to pepper through your code, like .color-blue or .bg-blue. Fortunately, with SASS lists, this process is almost as easy as typing out the variables in the first place.
If you aren’t using it yet, I really encourage you to start using gulp-sass, which is built ontop of node-sass right now.
File saves are often under 200ms, which is practically instant; and you can get away with doing some pretty insane loops and code generation really quickly and easily. I’m working on a few Rails projects and plan on continuing to use this process instead of the native Rails SASS simply because the speed is extraordinary.
I am a big fan (if you haven’t noticed in my prior posts) of optimizing my workflow. One thing I’ve never found until recently was a solid way to deal with styles and a live workflow. In comes grunt-style-injector.
⇒ grunt styleinjector
Running "styleinjector:files" (styleinjector) task
info - socket.io started
All Set Up! Now copy & paste this snippet just before the closing </body> tag in your website.
Put those snippets in your index.html (or partial of choice) and make sure you don’t commit said file, and you’re good to go. Since it’s framework agnostic, you can use whatever compilation process you want, and it never falsely reloads CSS (something I found) happened all the time with LiveReload.
Check out how easy this is to do with Stylus; added instructions and example at the end of this post.
The beauty of freelancing is twofold: you work on a lot of different projects simultaneously, and have to learn to quickly dive into a various set of systems at any given moment.
One challenge I run into in my work is building scalable, modular CSS, and lately I’ve been making a strong effort to write more modular code.
Here’s a pattern I ran into today. Say I want to add a simple spacer class that adds a little padding or margin on an element. I’d rather not have to do anything beyond editing the HTML markup, so let’s generate some CSS classes using a SASS @each loop.
My first take was to set up some $spaceamounts, then generate a few mixins:
Boom. Now, I can add more variable array definitions and simply include a few lines to have it output for each of these loops:
$right-space-vars: (5 right r, 10 right r, 15 right r, 25 right r, 30 right r);
$bottom-space-vars: (5 bottom b, 10 bottom b, 15 bottom b, 25 bottom b, 30 bottom b);
$top-space-vars: (5 top t, 10 top t, 15 top t, 25 top t, 30 top t);
@include generate-spacing-classes(); // left comes by default