Grow your CSS skills. Land your dream job.

Compass & Codekit – either or, or both?

  • # December 19, 2012 at 1:37 am

    (I’m a total part-timer front end web dev that is trying to learn SASS for fun, literally). I am trying to wrap my head around SASS and was drawn to Codekit, but of course I’m reading a lot about Compass.

    In a nutshell, how are they different? I’m not getting it.

    Example, I’m working on a new portfolio site for myself using WP and Bones. Bones highly suggests Codekit for preprocessing, but I’m just curious where Compass comes into play, how it differs, etc?

    # December 19, 2012 at 2:59 am

    Compass is a library for Sass. It has many useful mixins and functions. Codekit is an Mac OS X app that compiles Sass (and SCSS) files to pure CSS. You can use Compass with your Sass files in Codekit also.

    So short:

    1) Codekit = Compiler , app
    2) Compass = Library, extension of Sass.

    Links:
    1) Codekit = http://incident57.com/codekit/
    2) Compass = http://compass-style.org/

    # December 19, 2012 at 4:05 am

    I’m not an expert but here is how I understand it so far:
    SASS builds the base as the language extending CSS functionality. Files with .sass and .scss endings are both using SASS, but .scss looks a bit more like CSS syntax.
    Compass then is an extension for SASS with useful stuff like CSS3 mixins which automatically deal with all the prefixes. You can use it if you want, but it’s not mendatory for working with SASS.

    To compile SASS & Compass into CSS you need some sort of compiler. The best around I’d say is Codekit as it can also deal with many other preprocessed languages. There is also Compass.app which just deals with Compass & SASS. Hope that was useful ;)

    # December 19, 2012 at 11:35 am

    Thank you both – I did a bunch of searches for “codekit vs compass” etc., but could not find a definitive comparison or definitions together.

    This helps – I kinda feel like I need to merely learn SASS first, assess the use of it, then maybe move toward Compass.

    (part of my confusion was, do I need to buy Codekit or just use Compass, etc – but I get it now).

    # December 19, 2012 at 2:17 pm

    Definitely get CodeKit. It compiles your Sass for you and then later on you can dig into Compass.

    # December 19, 2012 at 5:43 pm

    In Mac App Store there is app called “Hummer”. It looks also very promising but I prefer Codekit, as @chriscoyier.

    # December 24, 2012 at 12:07 am

    Chris that is what I figured out – just as you said, Codekit now, then as I learn SASS and get that dialed in, I can expand to Compass.

    I’ll check out Hummer too – thanks.

    # December 24, 2012 at 1:40 am

    If you want something even more exciting, check out Grunt: http://gruntjs.com/

    It would be great to see @chriscoyier do a video on Grunt actually!

    # December 24, 2012 at 6:18 am

    Second that on the video about grunt, i’ve been using it in my last few developments made development and deployment far faster.

    # December 24, 2012 at 6:33 am

    There is also compass.app which is a compiler like Codekit, but it is limited to Sass (while Codekit can do LESS and several other things).

    So if you do a compass vs codekit search most likely you will get comparisons between compass.app and codekit.

    # July 17, 2013 at 11:35 am

    3rd that on the grunt video. I’d like to see one with yeoman also.

    # July 17, 2013 at 11:36 am

    **[Prepros](http://alphapixels.com/prepros/ )** lest we forget.

    # July 17, 2013 at 12:31 pm

    I use Compass but really that’s just a small part of my Middleman setup.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".