At first glance, T-Pro Solutions is a pretty typical marketing site: hero carousel, big banner images on each page, and a whole mess of calls-to-action. There's nothing wrong with a site like this, but they're not always the most exciting to build. T-Pro's site, however, has a little bit of magic under the hood that's worth sharing.
Tag: Sass
When I’m the only one working on a site, compiling my Sass files locally and committing the generated CSS isn’t the worst thing in the world. When you’re working in a team environment however, it’s necessary to consider that several developers of different experience levels may touch a site throughout its lifecycle. What would happen if a developer who had never used Sass needed to make an update to a site? How long would it be before someone starts complaining that the change they made to the CSS file was overwritten after the next compilation of the corresponding .scss file?
This technique has one goal: keep generated CSS files out of the git repository. In order to do this, we’ll need to make sure of a few things:
- Generated files are explicitly blocked from the repo (to prevent someone who doesn’t know any better from committing them)
- Automatically recompile our SASS files into CSS upon deployment.
I’ve been wanting to explore CSS pre-processors for several months and re-building this site seems like a good chance to get my feet wet. I’ve been following the debates between the two most popular pre-processors, Sass and LESS, and decided that for my purposes and experience, Sass would be a better fit.
Using a workflow that I learned in the Build Responsively Workshop, I wanted to create separate .scss partials for each of my breakpoints, then import them into my main stylesheet using media queries and @import statements within my main Sass stylesheet (style.scss). Normally I avoid @import statements in my CSS files (which would prevent stylesheets from being downloaded in parallel), but the compiled nature of Sass means that the only time these files are actually imported is when the actual CSS files are generated. Importing multiple Sass partials also a) keeps my styles organized better (with no performance hit) and b) allows me to easily re-use partials for alternative stylesheets.
