Quick Tip: Integrate Compass into an Existing CodeIgniter Project
videos

Quick Tip: Integrate Compass into an Existing CodeIgniter Project

on Jun 3rd 2011 with 23 comments
Tutorial Details
    • Technologies - CodeIgniter && Compass
    • Difficulty - Moderate
    • Format - 5 Minute Screencast

I was recently asked about how to use Compass in an existing CodeIgniter project. It seems that the emailer was under the impression that Compass was made for Ruby and Rails. But that’s not the case at all!

Note that Ruby will need to be installed on your system in order for Compass to work correctly. It’s installed by default on a Mac. Otherwise, the easiest way to install the latest version of Ruby is with RVM. Refer here for detailed instructions.

Choose 720p for optimal viewing.
Subscribe to our YouTube and Blip.tv channels to watch more screencasts.

Let us walk you through the process of getting started with Sass and Compass from scratch.

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Zombaya

    Nice tip, hower I would recommend lessphp as an alternative, simply because it offers roughly the same advantages and is written in PHP, so it’s easily integrated.

    You can find more about it on http://leafo.net/lessphp/ .

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Actually Sass and Compass offer *way* more.

  • Pein87

    Why not just implement compass and sass in php and be done with it. Syntax might be a little different in php due to how its syntax is but functionality wise it should be equivalent. I think there is a php implementation of both out there in php already.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      I don’t see any real advantage to doing so.

      • http://www.seven-sigma.com/ Jeff Dickey

        From the viewpoint of the larger group of Web developers (who develop in PHP rather than Ruby/Rails), the real advantage of re-implementing Compass and Sass in PHP would be simplifying the tool stack. If I have a pure PHP implementation, I can deploy on any server that hosts PHP 5.3. If I use both PHP and a tool which requires Ruby, I’ve limited my deployment possibilities and increased complexity; either or both will tend to make me less attractive to knowledgeable clients.

        That’s exactly why I never really did much Web work in Java; chasing after the bright shiny pieces that make life easier for me as a developer, makes life much harder for the poor SOB who has to deploy and maintain my magnum oopus. As a developer, I’m looking for tools that make my job easier, sure — but they’re counterproductive if they make deployment and maintenance more complicated. SASS as it now stands does that, much as I’d like to use it.

      • Argenis Ferrer

        Deployment would not actually be a problem! remember your using compass during development, what you should be uploading to the server is the generated CSS, which is why it shouldn’t be much of a hassle :)

  • Alistair

    Brilliant tip Jeffrey, whenever I move to Mac for at least 50% of the week life is going to be so much easier when it comes to new projects, CodeIgniter and Sass and a host of others.

    Whilst I love Windows, Mac is seemingly becoming not only designers choice but developers now also.

    It’s a shame because you can definitely do as much if not more on PC when it comes to development in relative terms but main-stream tutorial sites are really pushing Mac and Linux to the power user.

    Guess web design is becoming less and less for the faint hearted.

    Thanks for sharing.

    • Kevin L.

      Sublime Text 2, SASS, and Ruby works just as well on Mac just as well as it does on MACS. I use both on my Windows 8 Pro w/ Media Center Laptop and I haven’t had issues. My school allows us to borrow Mountain Lion Macbook Pros and I haven’t had trouble with a workflow on either such that I would prefer one over the other at this point (3 Weeks).

      Outside of Codekit for those who truly don’t want to touch a terminal, Window users don’t seem left out to me at all. Because Macbook Pros have a far larger serious designer community, it only makes sense that tools have surfaced on Macs to make the use of SASS more approachable, specifically for designers (which is the whole purpose of Codekit).

      Personally, I feel like because of the profession, we have a special responsibility to perhaps be aware of any nuances on both OSs, just like we have to be aware of specific browser bugs that are smoothed out as much as possible by SASS, LESS, COMPASS, STYLUS, and etc.

    • Kevin L.

      Sublime Text 2, SASS, and Ruby works just as well on Windows just as well as it does on MACS. I use both on my Windows 8 Pro w/ Media Center Laptop and I haven’t had issues. My school allows us to borrow Mountain Lion Macbook Pros and I haven’t had trouble with a workflow on either such that I would prefer one over the other at this point (3 Weeks).

      Outside of Codekit for those who truly don’t want to touch a terminal, Window users don’t seem left out to me at all. Because Macbook Pros have a far larger serious designer community, it only makes sense that tools have surfaced on Macs to make the use of SASS more approachable, specifically for designers (which is the whole purpose of Codekit).

      Since Developers more than ever have to be aware of topics most brushed off as ‘designer’ worries in the past and more of them are solved easier or faster on Macs, your point is totally warranted though.

      Personally, I feel like because of the profession, we have a special responsibility to perhaps be aware of any nuances on both OSs, just like we have to be aware of specific browser bugs that are smoothed out as much as possible by SASS, LESS, COMPASS, STYLUS, and etc.

  • http://jonweb.co.uk Jon

    I don’t have the money to buy a Mac. Does this work on PC?

    • http://fedesilva.com Federico

      If you don’t have money to buy a mac I say you should use linux. I’m running Ubuntu and comppas, and it’s so easy when you get around the console.
      I love the way thing are evolving and the only OS that does not evolve is Windows. So if you don’t want to spend on a mac, there isn’t almost anything really that you can do with a mac that you cannot do with linux.

  • fractalbit

    You know there is an OS called windows 7 right? And guess what, most people still use it! :P Interestingly you completely miss that point in your quick tip. Not trying to be harsh, just trying to explain the low rating of the article (at least that’s why i gave it a 2).

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      There’s isn’t a huge difference between installation for each OS. Just make sure you install Ruby on Windows. There’s a link to instructions in the article above.

    • pipo

      srsly? are you retarded? win7?

      excellent article!!

  • http://ipadstory.net iPad Story

    CodeIgniter is awesome framework. Many big company use this for their website.. thanks for the tutorial

  • Paul

    This might be a silly question, but does it offer any advantage over just using a PHP file with a text/css header?

    • http://dorianpatterson.wordpress.com Dorian Patterson

      If you’re talking about writing embedded stylesheets vs. external than, definitely yes. If you’re talking about writing CSS vs using a CSS Preprocessing language (like SASS on which Compass is built on), then the answer is it depends, but usually yes.

  • http://fabiofl.me Fabio F.

    F*ck yea! Awesome.
    Now i’ll watch the video. :D

  • http://boldeksperten.dk Frederik Storm

    Hello Jeffrey.

    Can you please make a video about, how you are creating screencasts with Screenflow and how you get the best quality?

    Best Regards

    Frederik

  • http://www.popstencil.com rafzan

    I have something like this on my github. Theres a while im using it. Really easy.

    https://github.com/rafzan/rafzan-php-framework

    • http://www.popstencil.com rafzan

      in fact… i have used PHAMLP to integrate a sass-compiler as a lib in codeigniter. Everytime you search for ‘…/css/file.sass’, the Controller CSS will render a .css file from the .sass.

      It still have some bugs with the new functions from compass and other stuff, but works really well.

  • http://www.zizli.co.uk mo_zag

    Hi Guys

    Great tutorial Jeffery however here is something I use to create applications in HAML, SASS, PHP and can integrate compass with it to should not be to hard, it works great with codeigniter have look it might help someone.

    https://github.com/mo-zag/watcher

  • http://twitter.com/zonkroom zonkroom

    Hai Jeff, how to remove useless line in my stylesheet/app.css

    /* line 5, ../../../../../Users/MY_NAME/.rvm/gems/ruby-1.9.3-p286/gems/zurb-foundation-3.2.2/scss/foundation/common/_globals.scss */
    /* line 6, ../../../../../Users/MY_NAME/.rvm/gems/ruby-1.9.3-p286/gems/zurb-foundation-3.2.2/scss/foundation/common/_globals.scss */

    etc…

    etc…

    /* line 327, ../../../../../Users/MY_NAME/.rvm/gems/ruby-1.9.3-p286/gems/zurb-foundation-3.2.2/scss/foundation/components/modules/_mqueries.scss */
    …
    …
    how to delete all the rows? very useless?