Mastering Sass: Lesson 3
videos

Mastering Sass: Lesson 3

on Apr 1st 2011 with 37 comments
Tutorial Details
  • Topic: Sass and Compass
  • Format: 15 Minute Screencast
  • Difficulty: Moderate
This entry is part 3 of 3 in the Mastering Sass Session
« Previous

In this final lesson in our Sass mini-series, we’re going to review the excellent Compass stylesheet framework, why you should be using it, and how it connects to Sass.


Subscribe to our YouTube page to watch all of the video tutorials!

 
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
  • w1sh

    Nothing? Not even a mention of Beiber? What happened to Envato’s April Fools’ spirit?!

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

      We already did it.

  • AngelBotto

    Awesome ….thanks :D hi from Colombia :D

  • http://jonas-doebertin.de Jonas

    I really like these intros! Keep going!
    Oh, btw. your Sass Series is fantastic, too! ;-)

  • http://www.graphiics.com Graphiics

    Its nice really good

  • http://gdmedia.fr Guillaume Denormandie

    This is a nice tool, but i feel it might be a bit too much…

    I’ve seen some snippets that aren’t really useful unless you’re the laziest person ever and that generate code you might not need; like the inline-block one, which automatically aligns to the middle. Cool, what if I need it to be valign : top ?

    So i think I’ll keep using my custom mixins (mostly css3) and create the ones I need on the fly because I prefer to be in control.

    And I’d definitely advise beginner – intermediate CSS developers to stay away from this as this would tend to prevent them to actually understand important things.

    That’s my opinion and I’ll say it once again, this is a nice tool for advanced developers.

    • Kris

      @Guillaume Telling intermediate CSS developers to stay away from a tool that will help them save time and do more with their work is counterproductive. Instead, why not urge learners to review the compiled CSS and view the source (which is openly displayed on compass-style.org). This will be a greater learning experience than wasting time on a poorly designed language.

  • Ivo Trompert

    Great tutorial please continu with this serie

  • Marcin

    Really helpful stuff, sass + vim series are my favorite, thx :)

  • http://labs.thesedays.com Keegan Street

    Hey Jeffrey,

    Thanks for the tutes. I’m a big fan of Sass but I haven’t used Compass. I’m not sure that I will, but it was good to get an overview.

    I wanted to ask what Vim plugin you use for the auto-complete functionality? While you are typing CSS selectors, filenames or mixin names the autocomplete suggestion shows up as underlined text, seemingly automatically. I took a peak at your vimrc on github but couldn’t see what’s doing it.

    Cheers,
    Keegan

  • http://www.twitter.com/craig_keeling Craig

    Excellent, as always… column-count($n) alone has completely blown my mind. Thanks for the intro.

  • http://www.bumstaerk.com Martin Haakansson

    Loved your little session on SASS – it’s been a real eyeopener for me.

    But I have some issues with installing the 960 gem. Using the sudo gem install compass-960-plugin, it installs properly but afterwards the plugin/frameworks is not avaible in Compass.

    I’ve tried installing it manually, by pasting the files into (what I think is) the proper directory, but still nothing happens.

    Doing the “compass frameworks” also reveals that there’s nothing installed.

    Any thoughts on this? Have I done something wrong? Or am I simply missing some important information?

  • http://www.csskarma.com Tim Wright

    I’m slowly getting sold on using Saas in my development environment before I push to production. I really like that you can stay modular with your css and have it all combined.

    I’m not totally jazzed about the framework itself but I guess using all the ins and outs is optional anyway.

    Looking forward to the next tut.

  • w1sh

    Had time to watch the video. Your new style is really good and Compass looks awesome. Still not sure what the difference is between SASS and LESS, but Compass is sweet.

    How about that Lemonade Quick Tip? :)

    Thanks Jeff. Good stuff!

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

      Less doesn’t have support for things like Math, if statements, etc.

  • Manu

    Hey Jeffrey, nice tutorial but i cant seem to get watch to work with compass. It says unable to load carboncore when i try and watch

  • http://pixelcoder.co.uk Alistair

    My Jeffrey how you have grown in such a short space of time. *in awe*.

    Seems like only yesterday you were using the .box in your video screen casts to highlight positioning context.

    Execution is spot on, i’m always an admirer of web design and tips but you definitely have became one of those guys who inspire. You buddy, are a cewebrity. Dun dun dun

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

      Thanks!

      But beginner level screencasts will always continue. Everyone starts somewhere, so it’s good to have those basic positioning type videos. :)

      • http://pixelcoder.co.uk Alistair

        You are most welcome.

        Like all things being taught here ofcourse beginner, intermediate and expert shows the standards, commitment, ability of the person creating the content.

        e.g. You here with SAAS it’s a firm introduction to the technology, however the compliment was more so towards the ability you have as an individual to jump straight into it for yourself, learn it, practice it and ultimately execute it in a great fashion.

        The saying “jack of all traits, expert of none” is something I believe is not in your tech repertoire.

        Anywho, just showing appreciation.

      • joeboo

        Hi Jeff, awesome tut by the way! quick question, what does “FSSM” is essentially dead at this point mean? help!

        thanks…

  • http://www.nouveller.com/ Benjamin Reid

    Another great lesson Jeffrey. Compass looks a sweet addition to SASS!

  • David Savage

    Very cool series, I agree – keep going! What I’d love to see is an overview of the different best practices you can accomplish with SASS/Compass (integrating HTML5 boilerplate, fluid grids, IE fixes, etc.) along with maybe an overview of the different extensions for SASS/Compass. Would really love to see what it’s truly capable of beyond beginner stuff!

  • http://datasplash.co.uk Darren

    Amazing short series Jeff, I would love if you could show how to setup without the terminal in the next one (if there is a next one). I know you touched on it in the first episode, but I would like a little bit more.

    A1 work.

  • http://coffeewiththeboogeyman.com Dan Robert

    Great series! Please keep going, if possible. I’m really interested in using SASS in my projects and these tutorials are always a great help and resource. Thanks for all the great content!! :)

  • http://martealdesigns.com bob marteal

    Thanks for the hi quality videos and explanations. I’m looking forward to biting in to Sass over the next couple months as i try to clean up a few stylesheets that have gotten way out of control.

  • http://csseditor.in Yash

    Thank you so much. Its is totally new to me. I’ll do some experiment on this.

  • http://martealdesigns.com bob marteal

    Shouldn’t Sass/Compass watch for ALL changes? Terminal is telling me ‘Compass is watching for changes’ but it only seems to update when i do Ctrl-C to stop it then start it again. It does not seem to update as i go along making changes to screen.scss.

    So i watch the directory that i created for the project, change screen.scss > nothing happens to the screen.css and terminal doesn’t show anything. I do Ctrl-C and then watch again and the changes are made.

    Can anyone give me a hint to what’s up?

  • http://twitter.com/r8r mario rader

    this is a brilliant series. thank you!
    would love to see more advanced lessons to be added too!

  • joe

    what does “FSSM” is essentially dead at this point mean? help peep! :)

  • Peter

    I would like to see more of these videos! :D They’re really great and well explained. I’d like to learn about the sprites functionality especially.

  • http://dsinewerxz.com KSmy04

    Great tutorial, I really love how jeffrey way explain every tuts very clear. I like this series

  • Israel B

    Thanks Jeffrey, I would love to see a small project being build using Sass and compass. After you create your compass project folder and since it is only a css frame work, I wasn’t sure how do you link you html files to that folder. That was a little confusing to me.

  • jean

    Just wanted to say thanks very much – great tutorials, really helped me get my head around this. Thanks!

  • Lance Morgan

    Thank you for the tutorial, very straightforward and helpful!

  • Israel B

    Great Tut Jeffrey, I would love to see more on Compass and Sass, maybe on a real project so we can see how you organize your files as well.