Grow your CSS skills. Land your dream job.

#88: Intro to Compass/Sass

Ask a bunch of designers what they wish CSS could do that it can't now, and you'll get a big list that reads much like the list of features for the Compass/Sass framework. If you are like me, you don't have any trouble writing CSS, but the thought of being able to using things like variables, mixins, and nesting is rather enticing. I learned quite a bit in my first musings with Compass/Sass and answered a lot of my own questions about how it works. You'll see it all here.

Links from the video:

Comments

  1. That’s really neat! You made a good point though comparing with jquery and javascript. But isn’t the point of frameworks to make our lives easier. Why spend hours doing something you can do in minutes using a framework?

    I do like the ability to use variables so you aren’t typing the same thing over and over though.

    But in reality, you are just using a framework for CSS, that speeds up your production once you learn it. Same as PHP and Javascript frameworks, they are there for you to use, and their are different ways to end up at the same result.

    Good overview Chris, you did hold my interest the whole way!

    • Kyle,
      It depends. If you want to learn, you should stay away from frameworks because you don’t know what actually happens behind the scene. Many people who start with jQuery without learning JS assumes $ to be a part of JS.

      But if you are working on some project, its better to use framework which makes your life easier.

      I like the JS vs jQuery comparison Chris made.

  2. It surely saves time. I’m using a PC and I’m not smart enough to figure out how to install it, so I think I should stick with old friend, CSS. :)
    Also, I don’t like the syntax. I prefer the bracket things in CSS.
    Why it didn’t generate linear gradient for IE?

  3. Interesting, definitely have to try this out.

    Couple things I wonder/worry about though. Won’t this make tearing apart someone else’s CSS a nightmare? How would you inspect this in Firebug or learn about another coder’s technique if the CSS is actually the output of a function that is referenced throughout the stylesheet? It seems like this makes tracking down what controls what in someone else’s code trickier.

    Also, I can just imagine all the crazy, disorganized tangle of code that is going to come from newbie coders (like me) until a best practices standard comes out for setting up your sass files to keep them organized and straightforward. Woe is the person who has to come in after me and clean up my mess if they inherit my sites…

    • Duncan
      Permalink to comment#

      Ian
      Like you I was a bit worried about Firebug use, but I’ve just found a link on the Compass site to an add-on for Firebug, “FireSass”
      Haven’t tried it yet but seems it reports the SASS filenames and line numbers. Could be a big help.

      @Chris, I think your buttons problem might have just been a typo, I think you declared ‘fancy-buttons, and then called them ‘fancy-button’ without the ‘S’ on the end.
      Thanks for a great screencast.

  4. Permalink to comment#

    Chris – great video as ever. I’ve never even heard of Compass, till now.

    Was it that you didn’t ‘define your button mixin’? maybe you had to put the ‘=’ sign ahead of it like you did for =main-structure ?

    If this is correct, then it’s down to your excellent tutorial style as I wouldn’t have known otherwise!

    • adrian
      Permalink to comment#

      no, the mixin was already declared (with the = sign) when he imported the fansy buttons extension in the line: @import "fancy-buttons"

  5. sass is amazing! def def recommended! way smarter & neat :)

    I have been using it @work (80Beans – not gonna put a link, dun wanna make you guys think I am spamming :p) – they make it compulsory for us to use ONLY sass (no more css)

    We also using haml instead of .erb :)

  6. Zandy
    Permalink to comment#

    I didn’t even know this kind of thing was possible. Around 16 minutes in, I suddenly felt that the use of Terminal might be worth it. I love the idea of being able to re-use pieces of CSS quickly.

  7. I agree with Ian, seems debugging becomes more time consuming.

  8. Super interesting. Definitely have mixed feelings about it though. Whereas jQuery is super forgiving and raw JS is a bit of a mess, I think sass vs. css is the opposite. SASS seems a much less forgiving to troubleshoot. Just my hunch. Will definitely try it out some day.

    Thanks for the screencast.

  9. Matt
    Permalink to comment#

    Just a recommendation, for those who want to stay in Javascript-land, try less.js. For those that want to have the pleasure of using Python, use CleverCSS (and django-css if you use django).

  10. Looks pretty cool but I honestly am not a big fan of the SASS structure. No brackets, semi colons, what the hell? I code my CSS single-line and take great pride in how I code so this is definitely not for me.

    I do use PHP in my CSS sometimes and that can be cached so I don’t see performance as a big deal there. Plus you can compress it with output buffers which I think is cool.

  11. Permalink to comment#

    looks really neat.
    I might actually start using that on ym real projects :D

  12. Hey Chris,

    Great job!!

    Since I tend to developed on a “*.tld” of whatever “*.com” project I’m working on, I sometimes use PHP to process CSS and cache the stylesheets as minified production versions. It allows me to maintain a development and production stylesheet and I don’t have to minify manually.

    I think you made a really important point about knowing CSS before plodding ahead with Compass/SASS. There may be times when you need to perform a task in raw CSS either for efficiency’s sake or because Compass/SASS isn’t supporting it (yet). Or in case some included file is giving you trouble and you have a deadline to meet. :P

    I would argue the same about jQuery and javascript. I love jQuery and I use it frequently because of its speed and ease of use, but I’m also comfortable to know when something will perform better as raw js on the rare occasion that Resig isn’t six steps ahead of me.

    This was a nice way to introduce Compass/SASS to your readers. I’ve visited this site many times — it’s a valuable resource. Keep up the great work.

    Thanks again! ~Bill

  13. Devin
    Permalink to comment#

    I had the same problem as Chris with not being able to get sass installed and getting mad and giving up. This was a great video that really helped me. I am going to start using this on my projects.

    What are the benefits of changing to sass over scss?

  14. jQuery is faster and easier than JS and this appears to be faster and easier than CSS – so bottom line you’re lazy like the rest of us! Working faster and smarter is better than taking the long route every single time anyways.

  15. Good Lord Compass seems to be a real pain in the ass compared to CSScaffold. There is no Terminal install with CSScaffold and dare I say it, a greater everyday feature set. Both work under the same concepts, but CSScaffold is more thought out. Check NetTuts for a great intro to CSScaffold my J. Way.

  16. Hi Chris,

    Thanks for the screencast. I just recently started using Sass.

    For anyone using TextMate, you can download a Sass bundle at http://github.com/charlesr/ruby-sass-tmbundle. The main thing this will give you is CSS syntax highlighting. When you open your .scss fie in TextMate, select the Ruby Sass language at the bottom of your window.

    My favorite feature of Sass is the nesting, but I also love the mixins, variables, and selector inheritance.

    Good stuff.

    Also, it sounds like the new main Sass syntax is SCSS rather than sass. They’ve based it on a superset of CSS3 and moved away from the HAML-like indented syntax.

    Thanks again.

  17. Permalink to comment#

    I use a Windows computer myself so I don’t think this will work for me, but even if I did own a mac I still think I woudn’t use it.

    It goes past a certain “abstraction point” with the whole terminal thing, I mean jQuery is a library which is pretty understandable but this thing on “Ruby” which I have no understanding of at all is so abstract to me… I don’t think it will improve my workflow. I does has some cool features but I think it should be made more accesible and less abstract.

    It feels like it’s in a beta fase… which is kinda dissappointing because the features it offers are kinda neat.

    Also what is mentioned before, the de-bugging will be (imo) harder. I also think the SASS is more prone to typo’s with the “white-space” thing. I like the freedom of CSS where it makes your code nice and clean…

    No go for me :’)

    Great screencast Chris!

  18. Chris
    Permalink to comment#

    Awesome Screencast! I never knew of Compass/Sass till this, and decided to try it out. Holy moly is it cool! It’s fun sitting here trying to think up of some interesting ways to do repeatable coding with just one line, and I came up with two (if they suck or are dumb, let me know, I want to see what you think).

    I often use padding, border, margin, width, and height on almost every box element, so why not combine them? This is what I came up with:

    =size(!padding = 0, !border = 0, !margin = 0, !width = 0, !height = 0)
    padding: !padding
    border: !border
    margin: !margin
    width: !width
    height: !height

    +size(10px, 1px #ccc solid, 10px, 100px, 100px)

    Silly? Maybe, not sure, seems helpful to me at the moment, haha, thoughts???

    ~ Chris

  19. Your BASE index.html file seem to be HTML 5, but it still contains type=”text/css” ;)

  20. Permalink to comment#

    A W E S O M E ! ! !

    I’ll be using it for sure in my future projects. This is for sure a killer app for any template creator!

  21. Hey Chris! Lovely screencast that you have!

    I think you are spot-on with the feeling that you should know CSS before learning Sass, but you can learn jQuery without knowing hardcore javascript. I think this bolts down to the fact that since actually what ends up running in the browser is compiled CSS, which means it is subject to all the intricacies of this language. CSS is very weak in terms of layout, since it is a very static language, but the medium (an interactive presentation on a multimedia device) is very dynamic and flexible.

    Javascript on the other hand runs in the browser, so jQuery can abstract away all the differences. This allows you to forget about those problems and focus on what you are trying to accomplish. With Sass, you still have to worry very much about the different interpretations that the browsers will do of your generated CSS.

    By the way, on that notion of “introducing variables loses the concept of CSS” or “it doesn’t fit its target audience”… I’m calling bullshit on that. The intended audience is the web developer on one hand, and the browser on the other. Browsers don’t care about if it is more difficult to learn and web devs what powerful stuff that makes their lives easier. What are you, targeting it at novices? Great design doesn’t happen that much on the web because great web guys have their hands tied and spend many more time running around issues than being creative.

    Just think of any innovative interface you could dream of, say a dial, or a popover, or a slide-to-unlock thing, a stack or a zooming dock… etc. Now think what a pain that would be to implement with todays web tools. *cringes*

    CSS just isn’t up to stuff. We need something better!

    One last note, I wonder why you are excited about the math thing in Sass, all it can do is precalculate some values, but the end result is always a static number. No way to do something like 100% – 200px, which would be really helpful in many situations…

    Anyway, keep up the great work!

    Cheers,
    Miro

  22. Nice one Chris, I hope you continue to delve into this!

    Yes, it’s a bit confusing what the “sass” and “compass” parts of the equation are:

    Sass is the language parser (a tool to translate from one syntax to another). Sass is also the name of the original syntax it handles, but with the addition of the SCSS syntax, it now handles whichever you prefer.

    Compass is a framework that brings a ton of libraries of css helpers and common tools for helping you write your stylesheets.

    e.g. you could call sass directly in your terminal every time you want to update your stylesheet:

    sass “src/INPUT.scss” “stylesheets/OUTUT.css”

    …but that “compass watch” command saves you from having to do that manually: they work together.

    I noticed you were quick to jump away from the error when you first had trouble with SASS. You have to read the error messages, they are helpful! It actually said: “inconsistent indentation: 10 spaces were used…” which would’ve helped you spot the problem right away.

    I wish you had stayed with the SCSS syntax for this intro, just to make the transition easier for people unfamiliar with the concepts. Most people feel more at home with SCSS so we prefer to promote that one to start: learn the new concepts, but don’t get hung up on the syntax at first.

    I think that’s the reason why it seems LESS got more recognition among designers, because the SASS syntax seemed too alien right off the bat. SCSS is actually a superset of plain CSS. This means you can start with your regular valid CSS, and add the special features as needed.

    Personally I prefer the indented SASS syntax because it reads cleaner… but in case anyone prefers one over the other, it’s easy to switch using the sass-convert tool:

    sass-convert –from=scss –to=sass src/screen.scss

  23. It’s an interesting concept and I do agree with you about the whole jQuery thing, although that is mainly because if you go one dot out of line in JS then it just dies on you. To be honest I think I would prefer to just stick to CSS for the time being, but do you think that the advantages of SASS etc. could get you to make the switch?

    I’m just not sure it’s entirely worth it, CSS is designed to be a seriously simple language, and I feel that the additions of things such as SASS just make it more and more complex. Not that that’s a bad thing, I just think it’s unnecessary.

    So after playing with it, do you think you could make the switch?

  24. Slavisa Petrovic
    Permalink to comment#
  25. Ant

    I tried to use one of these CSS frameworks (It was CSS Scaffold) but it not loaded css 50% of the times so I left it. Also confusing to setup.

  26. Hey Chris, I was just checking this out and wanted to download both Compass and Less. In Terminal, I wrote “sudo gem install less” but the result was that it couldn’t find the less locally or in a repository. Same with Compass. Do you know what’s up with that?

  27. Phreedom
    Permalink to comment#

    First things first, thank you so much for the vids. Second after watching this one, CSS just got even more exciting for me (which it was before hearing about Sass) – Now I have heard about Sass, I think I need to lay down and take a few deep breaths. Thank you again – I really do like your vids, actually you are the first person who has made video tutorials that I am willing to watch and use.

  28. Mike
    Permalink to comment#

    That’s a very funny vid but very informative. Thank you very much.

  29. Delicious. Thanks for this, Chris. Very well done and detailed. I like the comparison you made about Compass to jQuery as a framework language that’s built for writing more code with greater ease — it does make a world of difference in terms of coding speed and general coder happiness.

  30. Well done!

    I’m finding that one of my biggest problems in coding up webpages and/or wordpress installations with CSS is that I’m not as consistent in formatting all of the multitude of different styles that a user might choose. It seems that this is an elegant solution.

    Thanks for demoing it and showing off the power of Compass SASS

  31. Bart
    Permalink to comment#

    Had to install it on my ubuntu and kubuntu machines, made my day.
    Having hard times with terminal like Chris, compass was not working.
    Used this page to set rails on Lucid Lynx:

    http://ascarter.net/2010/05/10/rails-development-on-ubuntu-10.04.html

    Then I manage to make it work.
    Now I am debating with myself on using scss or sass, maybe both…

  32. Permalink to comment#

    I think that many uses of compass don’t seem to realize what compass’s real intentions are. Compass is a collection of mixins mostly to replace html classes for the blueprint grid framework, but also som css3 shortcuts and other complex bits of code like clearfix and image replacement

  33. Ep
    Permalink to comment#

    I wish I could learn about Sass, but 7 minutes in and I just learned about how you’re slow as a snail and refuse to JUST GET TO IT! This entire video could be 5 minutes.

  34. mark
    Permalink to comment#

    I appreciate the resource you offer, but this is just way too long. A 30 min video is impenetrable and dull to someone trying to get up to speed quickly.

  35. abberdab
    Permalink to comment#

    Just stumbled across this tutorial. Very informative and I love your screencast approach! I think this was a great intro to compass/sass and I also appreciate that you let the viewer learn with you as you made mistakes. :) I like that the end product of compass/sass is a vanilla css file that doesn’t require additional work either by the browser or the server. It’s been a over a year since you posted this, so I wonder how much the components have evolved (e.g. does the gradient shorthand now generate IE-compatible css?) or, if not, whether the generating components can be easily customized to reflect newer css thinking. I also wonder how compatible compass/sass is with a responsive/scalable web design approach. Are relative units like percents and ems supported? What about media queries? Must investigate further…

  36. Marina
    Permalink to comment#

    Thank you for this awesome tutorial! This was very helpful. BTW require fancy-buttons in config.rb didn’t help me.

  37. Permalink to comment#

    Awesome video. I love your relaxed style.

    Unfortunately, it looks like the /compass/css3/gradient has been deprecated. I just wanted to point that out in case anyone else was having errors.

    Thanks for the great screencast!

  38. Ugh I’m YEARS behind on Compass/Sass. Thanks for this video it did a good job of laying a foundation for me.

  39. i am not able to download this video, it seems its broken link or some other issue, please rectify it

  40. James Pickering
    Permalink to comment#

    I had a brief discussion with a colleague about using Compass + SASS last December but due to time constraints he wasn’t prepared to give me a walkthrough to show me what I needed to do to use it on a mobile project. It certainly seems a lot simpler than he made it out to be. The only thing that bothers me is dealing with that quirky indentation – compiling workflow in the editor. I’m usually writing CSS in my editor and tweaking the results in Firebug/Chrome inspector to get a feel for how styles are affecting the layout.

    Do you plan on doing any videos on how to install Compass + SASS on Windows?

  41. Syam Ambu
    Permalink to comment#

    SASS / COMPASS INSTALLATION IN WINDOWS

    Here it is how you can install Compass/Sass on Windows:

    1) Install Ruby from http://rubyinstaller.org/
    2) Go to Windows Command Line(Start -> cmd)
    3) Change directory to Ruby bin Folder. Eg C:\Ruby193\bin (It will be different to your version and installation directory)
    4) Type ruby -v and if it get back with Ruby Version Number. Bravo, you are got to go.

    Staying in the same directory (C:\Ruby193\bin)

    5) Type gem install sass (It will install sass)
    6) Type gem install compass (It will install compass)
    7) Type compass version (If compass is running. It will get back with compass version and other info)

    Thank you :)

  42. Syam Ambu
    Permalink to comment#

    @James Pickering Please refer this link:- http://www.impressivewebs.com/sass-on-windows/

  43. Thanks for this intro, I think it’s useful for the people you’re aiming a..

    Just a clarification about something I was confused about.

    You suggest that compass is ‘what turns your code into CSS’. That is in fact Sass’s job, Sass is the extension that makes sense of the code (Sass/scss) that you’ve written and returns CSS. Compass has nothing to do with that. If i’ve understood everything correctly, Compass is the library that utilizes the Sass technology and lets you get more out of Sass.

    Compass has the ‘watch’ command so maybe thats what confuses people about what technology takes care of what with regards to this.

    Right now I’ve been using Sass without Compass for a couple of years but on new projects I always go with Compass as well since it helps a lot, without it I find myself having to write helpers in Sass that I use a lot, manually, but that is already there in Compass.

    The jQuery/JavaScript comparison is good, I’d like to go even further and say that you need to know CSS well in order to write Sass well – then you may do that more optimized using Compass.

    • The confusing thing (to me) about compass was that it’s both a preprocessor (a replacement for the sass gem) and a library of useful SASS modules/mixins.

      Currently I’m using the (“pure”) sass gem included with Rails 3 and the mixins that Bootstrap provides, translated into SASS from the original LESS code.

      But the mixins compass defines are definitely worth keeping an eye on.

  44. In case someone reads this despite this being comment #55 or so…

    The suggested analogy between SCSS and jQuery might be intuitive in the sense that both things serve the purpose of creating better code with less effort/hassle. But the analogy isn’t accurate.

    jQuery is a JavaScript library (iow a pile of useful code that basically anyone who knows JavaScript can use and extend).
    So jQuery is to JavaScript what a CSS framework such as Blueprint.css is to CSS.

    SASS, on the other hand, is not a CSS library but a language bundled with a preprocessor that translates it into valid, perfectly readable CSS. My point is:

    SASS is to CSS what CoffeeScript (not jQuery) is to JavaScript

    CoffeeScript gets compiled to readable, optimized JavaScript by a preprocessor that – just like sass – happens to be a Ruby gem.
    You can make use of any JS library (including jQuery) with CoffeeScript, just as you can make use of any CSS framework (such as Bootstrap‘s) with SASS.

  45. Great article on pre-processors, I work with sass and in my opinion is more complete than less. The sass could be the release of four css, lol. Modularize all your css is a time saving and productivity in the life of the Front-end Engineer

  46. You know, I work primarily as a freelancer but as of late, about every contracted position I interview for all mention the use of sass. I’m just not sure I get it. A while back, I worked for a local web hosting company and one particular project I worked on I was in charge of implementing various templates into a new web builder they were attempting to launch. We were using git as version tracking for the project and it all but brought the project to a complete stand still. SASS seems like it would do the same. While I get the shortening of writing code and the ease of getting your css just right, the comments alone sass adds has to eat up a little extra bandwidth. ?? I mean each line has a mile long comment… I don’t know, I guess I’m fighting the inevitable.

    • If you’re seeing super long comments before each selector, Sass is probably in debug mode / outputting line number mappings. That’s awesome locally, but bad in production. You’d set Sass to compile “compressed” in production meaning all comments and white space are stripped, which is better than you write by hand.

    • Permalink to comment#

      I realize I’m late with a reply here.

      For your website, using Sass wouldn’t eat any extra bandwidth since it’s not compiled to CSS on http request – it’s precompiled during the development process meaning the end user won’t feel a difference. As was suggested before, you can choose in what way Sass should render your CSS, with comments/without or compressed etc.

  47. Jeff Freeman
    Permalink to comment#

    Great video and lot’s of great comments. I spent a good part of the night last night playing with Sass and am eager to try it in my next project. Keep up the good work!

  48. Permalink to comment#

    Funny video. I like you are natural and fresh to give some intro about compass,
    Very usefull.
    thanks!

  49. Dude, this was awesome. You covered everything I had the same issues. I had to link to the css with ../ for it to work but when it did, I was was really impressed. Not only the setup, but yeah, the way it rips out the css and tracks it in terminal. Pretty bad ass. I have the same comments as you because you need to acclimate to a shorthand and not get it confused with every other thing you know. I love the fact that you can use variables. That is key if you love working with dynamic code. Again, awesome video and thank you for sharing.
    Chris

  50. Loved your take on jQuery/JavaScript but you know what – I am pretty good in jQuery and never took the time to learn pure JavaScript and it has kept me from finding a job – despite being a website developer for EIGHTEEN FLIPPING YEARS!!! Love your video; it’s helping me learn SASS quite nicely.

  51. Brian Hughes
    Permalink to comment#

    Thanks so much for this. Compass looks like it’s gonna be fun! I love that you can use variables!

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

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