![\"Three](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2013\/02\/preprocessors.jpg\")
<\/p>\n<\/p>\n
CSS Preprocessors have been around for a while now, but I didn\u2019t start seriously looking into them until about a year ago. I have loads of excuses for this: I was too busy, I already knew how to write CSS, cool kids write their CSS by hand… you get the idea. Basically, I didn\u2019t think yet another language like LESS<\/a>, Stylus<\/a> or Sass<\/a> would have anything to offer me.<\/p>\n I was wrong, and CSS Preprocessors are awesome. Here are three good reasons why. <\/p>\n If you already know a decent amount of CSS, guess what? Congratulations! You also already know a good portion of LESS and Sass as well.<\/p>\n In both languages, CSS is perfectly valid to write. So when you want to bold a tag, this is what your Sass would look like:<\/p>\n That\u2019s 100% homegrown CSS there, folks. Because Sass and LESS are CSS<\/strong> fundamentally. Just like you can write normal JavaScript in your jQuery, you can write CSS in your preprocessor of choice.<\/p>\n This is awesome because it means you don\u2019t have to spend hours learning a new syntax just to spit out the clich\u00e9d \u201cHello World\u201d page. You can write what you know, and add in the new syntax as you learn it.<\/p>\n So here\u2019s the thing: I build websites for a living and I write about building websites in my free time. And yet when it comes time to craft a cross-browser CSS linear gradient on my site, I\u2019m pulling up Google just like 99.9% of the other developers out there. Because with the extra power we have with CSS these days comes great complexity.<\/p>\n Take a look at this CSS for a simple blue background gradient:<\/p>\n And no, I didn\u2019t write that by hand. I can\u2019t remember the intricacies of that sort of syntax. I nabbed it from ColorZilla<\/a> like a sane human being.<\/p>\n And yet, what happens when we use Sass (with its fantastic helper, Compass<\/a>)? Magic:<\/p>\n One line of code. And it\u2019s simple enough I can memorize the syntax. And then when I compile my Sass, it spits out CSS just like the CodeZilla-spawned code soup above.<\/p>\n Remember when you very first started hearing about CSS, and the promise of how it was going to simplify your development? You write one simple rule, and the resulting style magically cascades down through your document. Brilliant!<\/p>\n But why is it that the mojo of the cascade still leaves us repeating chunks of code throughout our site? Why do we find ourselves scattering colors, padding widths and font sizes in a half dozen places in the same stylesheet? <\/p>\n Preprocessors solve that by giving us variables. We’ll extend our gradient example:<\/p>\n We define a variable at the top of our stylesheet, then use it wherever we want. Now when your client comes back and says he wants that blue to have a teensy bit<\/em> more green in it, you don\u2019t have to find it in a half-dozen places. Change the variable and be done with it.<\/p>\n Mixins can be even more helpful. In Sass they are particularly powerful, acting almost like functions. If you find yourself using the same set of rules repetitively, mixins are for you. Here\u2019s a super simple mixin I use on CSS Newbie: <\/p>\n This is a fix for inline-block in IE7 (which doesn\u2019t understand inline-block, but will treat inline elements with layout like an inline-block element anyway). Any time I want an element to be inline-block, I use this mixin, like so:<\/p>\n And now my inline-block elements work all the way back to IE7, without me having to write out a bugfix each time.<\/p>\n These are just three of the many<\/strong> reasons to use a CSS Preprocessor. Others include code nesting (which just makes sense, dammit) and built-in compression to reduce file size and speed up your site.<\/p>\n I\u2019m not going to tell you here which preprocessor to use. I\u2019ve used LESS<\/a> in the past and mostly use Sass<\/a> currently. In my opinion LESS is a little easier to learn and Sass is a little more powerful, particularly when paired with Compass<\/a>. And there are others out there (Stylus<\/a> has a strong following but I\u2019ve not used it). But what I will<\/strong> tell you is to use one. There are lots of reasons to do so, and not very many good reasons not to.<\/p>\nYou Already Know A Lot<\/h3>\n
strong { font-weight: bold; }<\/pre>\nCSS3 Is Hard<\/em><\/h3>\n
.gradient {\n background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));\n background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%);\n background: -o-linear-gradient(top, #1e5799 0%,#7db9e8 100%);\n background: -ms-linear-gradient(top, #1e5799 0%,#7db9e8 100%);\n background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%); \n}<\/pre>\n.gradient {\n @include background-image(linear-gradient(#1e5799 0%, #7db9e8 100%));\n}<\/pre>\nVariables and Mixins ROCK<\/h3>\n
$lightBlue: #7db9e8;\n$darkBlue: #1e5799;\n.gradient {\n @include background-image(linear-gradient($darkBlue 0%, $lightBlue 100%));\n}\na { color: $darkBlue; }<\/pre>\n@mixin inline-block {\n display: inline-block;\n *display: inline;\n zoom: 1;\n}<\/pre>\n.site-logo {\n @include inline-block;\n}<\/pre>\nThe List Goes On and On<\/h3>\n