The pace of change with web technologies can be staggering. Over the years I've learned to focus on the basics (focus on meaningful content, typography, and clean styles) and to try new techniques and tools as time allows.
Two areas where I've long wanted to get up to speed on are Sass and Git. With my most recent project, I finally made myself get started with Sass until the point where I felt comfortable. Not proficient, simply comfortable.
This article is covering the basics of Sass and is targeted to the novice web developer.
I've looked at several tutorials over the years, but many were written with a certain assumption for the level of knowledge on the other end. Many can be a struggle for the beginner because you may not even have the tools to be able to use Sass. Because of this, I wanted to write a handful of tips on what helped me get on board.
So, without getting too technical, here's a look at what Sass is. Described as "style with attitude", Sass is short for syntactically awesome style sheets. What does that mean? Here's how the Sass site defines it:
Sass is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.
With that out of the way, here's what has helped me get up and running.
The tools
To start, open Terminal … wait, command line? No thanks. I wanted to find a tool that supports Sass without a lot of messing around. And as I already love Hammer & Anvil, it was great to see that Hammer already supports several preprocessing languages.
Sadly, Espresso, my text editor of choice, does not support the .scss file extension. Thankfully, some kind soul put together an Espresso sugar to support Sass. Sublime Text supports both Sass syntaxes out of the box, so it's a good option as well. Do people still use Textmate? I'm sure it supports Sass as well. Codekit is a tool similar to Hammer that a lot of people seem to like and it compiles Sass files.
When I first looked into giving Sass a try a couple years back, every tutorial seemed to start with installing packages via the command line. But if you've waited a while to try it yourself, smart developers have made it easier to do so now. With very little work, you can be up and running with Sass!
Multiple style sheets
One thing I enjoyed about Sass right off the start was the ability to break your styles up in to different files. This is a bit tedious at first, or for a one page or small site. But if you have a design with multiple pages and several elements per page, one CSS file can start to become unwieldily. There's only so much scrolling I want to do.
With Sass, you can break your elements into multiple files. After processing, all the styles are saved into one file.
Variables & mixins
The easiest way to take advantage of Sass is right here. If you do nothing else, creating a few variables is a great way to save time, saving you from having to retype colours or use the Find & Replace numerous times.
Here are a few of the variables I used in my latest project:
$fcolor: #555; $fstack: 'Ideal Sans SSm A', 'Ideal Sans SSm B', 'Helvetica',< sans-serif; $scaps: 'Ideal Sans SSm SmallCaps A', 'Ideal Sans SSm SmallCaps B','Helvetica', sans-serif; $fsize: 18px; $lheight: 34px; $vbase: 1.666666667em; $vbase2: 2.083333333em;
As mentioned above, colours are one of the best ways to put variable to use:
/*** Color Scheme A ***/ $link: #FFB29F; $link-h: #FF4400; $note: #B5EAAD; $note-h: #27AF22; $quote: #CEE1F0; $quote-h: #3489EC; $bookmark: #EEA4B2; $bookmark-h: #EE5851;
Using these in your declarations is also straightforward. Just use them in place of your normal CSS value:
.entry blockquote {
font-size: 1.25em;
font-style: italic;
font-weight: 300;
line-height: $vbase2;
}
Mixins are slightly different. You can add several CSS declarations to a mixin, making it great for reducing the need to type vendor prefixes. As well, it's good for creating a few characteristics that might apply to multiple modules/elements.
Here are some of mine, most of which could apply across multiple projects:
@mixin rounded-corners {
$rounded-corner-radius: 4px;
-webkit-border-radius: $rounded-corner-radius;
-moz-border-radius: $rounded-corner-radius;
-ms-border-radius: $rounded-corner-radius;
border-radius: $rounded-corner-radius;
}
@mixin quick-transition {
$transition: all .25s ease-in-out;
-webkit-transition: $transition;
-moz-transition: $transition;
transition: $transition;
}
@mixin thin-white-line {
-webkit-box-shadow: 1px 1px 0px #FFF;
-moz-box-shadow: 1px 1px 0px #FFF;
box-shadow: 1px 1px 0px #FFF;
}
And to use a mixin, you just use the @include statement the name:
.entry {
@include rounded-corners;
@include thin-white-line;
background: #FFF;
border: 1px solid #EEE;
margin: 2em 0;
padding: 2em 0 5em;
position: relative;
}
Find an example
Now, reading about the various bits of functionality in Sass is straightforward. But what helped me more than anything else was to view someone else's project. This allows you to see how someone with more experience with Sass structures their files, uses variables and mixins, as well other
I used the default theme for my Memberful account as a place to start. Drew and his team are talented folks, and poking around in the theme proved this to be true. Find yourself something similar, an open source project or similar, and see how smart people are putting Sass to use.
From there, just pick a few things to get started, like the items I've listed here. Once you get into your project, you'll constantly be thinking, “How can I save myself time?” That's exactly what Sass was created for.
