SASS and Compass for Web Designers: Building a Theme
videos

SASS and Compass for Web Designers: Building a Theme

on Feb 15th 2012 with 37 comments
Tutorial Details
  • Topic: SASS and Compass, CSS
  • Difficulty: Beginner
  • Screencast duration: 33 mins

Final Product What You'll Be Creating

Download Source Files
This entry is part 2 of 6 in the series SASS and Compass for Web Designers

SASS and Compass for Web Designers

We’re going to continue our look at SASS and Compass, this time preparing ourselves for a complete website template build. During the coming screencasts we’ll use a popular Themeforest .psd design, translating it into an HTML/CSS project with our new found SASS and Compass skills. There’s lots to do, so let’s get going!

Plan of Action

To begin with we’ll look at yet another software application to compile our SASS and Compass files, and we’ll look at what we’re going to build in this series.

Alternatively Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!

Variables, Mixins and Functions

This is a short introduction to variables, mixins and functions.

Alternatively Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!

Setting up the Project

Now let’s set up the project, import some dependencies, and talk about partials and default variables. We’re all set to start writing SCSS.

Alternatively Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!

Useful resources

Series Navigation<< SASS and Compass for Web Designers: IntroductionSASS and Compass for Web Designers: Grids and Sprites >>

Norris is PureMellow on Themeforest
 
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.

My name is Norris, and I am a hybrid Designer/Developer. I work mostly with Wordpress, but in my spare time I like expanding my knowledge in various other programming languages, and working on my own projects. You can find me on twitter as @justnorris and my personal website is justnorris.com.  

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

    first of all thank you for this awesome tutorial
    the truth is i am scared to use this technologie of css. i mean, i am using css and building theme without knowing this framwork and i use also the 24 grid system.
    so my question is what can compass framework offer that i can not do with the 24 grids and the css.
    what are the advantages?
    i am asking because i hesitate to learn it. my be you can convence me.
    thank you very mutch for you tutorial.

    • http://www.themer.me Methemer
      Author

      There is nothing to be scared about at all.
      I think the biggest advantage of using a system like SASS is that you don’t have to learn anything at all.
      If you do know CSS, you already know SASS. That is what I keep repeating in my tutorials – you don’t have to use anything that you don’t want to. If, for example, you want to be able to nest your CSS properties, you can do just that, and nothing else. If you’d like to save some of the theme properties in variables, you can do that, and just write CSS with variables. Or you can do all, and find out everything SASS has to offer you.

      So don’t even think of these tutorials on SASS as tutorials, think of them more like about demonstrations of what SASS can do, and then you can choose, what really helps you, and what is too complex for you and you don’t care about it.

      That being said, there are other advantages, for example when using a traditional grid system, you specify in the HTML Markup, that this is grid_4 and that is grid_8, but in SASS, you specify that inside the CSS file, so you keep your markup clean, and that was the selling point about SASS when I first started out.

      • supprof

        ok thank you for your anser
        you made a point
        nothing to learn if you already know css good one
        keep your markup clean another good point
        but what about the we performance?
        does it make your website run slower?
        does it consome more bandwidth?
        is there some big company that uses this technology?
        thank you very mutch

        • dj

          @supprof … did you do any reading about SASS at all before commenting? In your defense, this tutorial is not one of the best. In fact isn’t really organized, and hasn’t explained well either SASS or the the intended topic of the title (yet?) SASS is a PRE-processor. It does all it’s action during the production phase of coding and assists the coder (you/me) with the repetitive aspects of coding. You must learn a new “meta-language” which will then be turned into “real” CSS by the pre-processor that you THEN can upload as finished CSS to your server.

          For the most part the CSS generated by SASS is the SAME code that you or I would have written ourselves – just not as quickly. So, the followup questions you asked are completely irrelevant. The SASS code itself never touches your band width and usually isn’t even uploaded to the server.

          In practice, the actual code generated by SASS looks to be fairly “best practices” and is NOT at all bloated like programs such as Dreamweaver and/or Frontpage etc. create. IF you are a novice, and a fairly sloppy coder, then SASS will probably generate more streamlined (and hence faster) code than you; but, if you are experienced and already create streamlined code then it isn’t any better than you could do.

          The issue is that SASS can only generate code based upon the coding methods that YOU tell it to use and if your style is to use needlessly inefficient methods (i.e. tags vs id’s vs classes for selectors) or bloat your structure by fragmenting styles etc. then that’s how your final code will come out, SASS or no SASS.

          That’s why coding experts and instructors advise you to LEARN GOOD CSS FIRST – before even fooling with pre-processors. It doesn’t sound to me like you are ready yet, and there are those who would say that you NEVER need to be. Although, if you follow the detractors logic to the extreme, they might have us all writing code in binary to be seen as “macho” instead of using Basic, Cobol, Fortran, PHP or any other compiled language. @buddybuddha I agree with your INITIAL premise; BUT, “needing” to use a pre-compiler is NOT the same as “wanting” to use one. I certainly hope that you are not advocating choosing to ignore time-saving software tools in the name of being a purist. I, for one, was very happy to give up coding in assembly when Bill made Basic available. I could still do it… but WHY would I?

          • supprof

            ok well thank for the correction and for the large and good explanaition
            i think that you’re right, i should stick with the classic way of writing my own css for now
            thank you very mutch

          • http://www.themer.me Methemer
            Author

            dj, you’re right. I haven’t covered essentials of what actually is sass. I assumed, that the viewer already knows just enough to get going (that SASS is a CSS preprocessor). Thats what I started the first tutorial out with, and never covered anything about what is SASS. Hmm. I wonder how should I proceed with that topic.

    • dj

      The truth is that SASS, COMPASS etc add nothing to CSS — except, convenience (a lot of convenience). AND for the beginner they may actually cause needless confusion and difficulties in actually learning the basic css code. That is why experienced people like Chris Coyier and Jeff Way and others recommend programmers start by learning basic CSS and HTML first and becoming thoroughly familiar them before thinking about pre-compilers.

      Frankly, when you have the facility needed to program in CSS there will come a time when certain portions of coding become tedious to you. You know them, you’ve done them and now you are bored with repetitive typing. That’s a good point to begin learning SASS (etc.) – and there will be no fear about it. You’ll actually be grateful. If you have to worry about it – you probably are not ready yet and should do a search for a different tutorial first (there are many better for you).

      I agree with @bill’s comment about the usefulness of using an apple only utility – such a tiny market share but people who use it tend to think that is all there is. So far, however, there hasn’t been anything said that the other windows-compatible programs won’t handle.

      AND, in actuality, if you are really following the current design trends these kinds of frameworks are extremely limiting when you think in terms of “responsive design.” Many, now-a-days, are using flexible layouts and not limiting themselves to fixed, regimented layouts which fit many platforms “sort-of” and no platform really well and often require entirely separate pages for wide-desktops and handheld-mobiles. I, for one, am beginning to be more and more intolerant of lazy programmers knee-jerking the 960 grid for their own convenience and leaving 30% of my screen a wasteland on both edges. We get sooo panic’d about having things “above the fold” and totally ignore everything outside 960px – what a waste. Not everyone surfs on a phone!

    • Preston

      I don’t use SASS, but instead am using Less (same captain, different boat) and one of the most important features it brings to the table is nesting your rules. It seems like a simple thing and merely there for convenience, but what I really love about nesting is that it adds a defined structure to your CSS so that you aren’t generating confusion six months down the road when you need to make a few changes.

      When everything is nested properly, you have a visual guide of what rules are used by what. You don’t have to worry about changing some rule and ending up with unexpected changes to other elements that have similar ancestry.

      I work almost exclusively on Magento sites, and for this, it’s a huge help. Many of the predefined CSS rules are not very intuitive, and without nesting it can be guesswork what gets changed when you alter a rule.

      What is also really awesome about nesting is that you can develop more complex rules (especially when dealing with pseudo-selectors) that work properly the first time without guesswork.

      Aside from that, mixins with arguments are incredibly powerful. I like to define a mixin such as — .box(@w,@h,@float,@pos) and can then use that to build structure on new elements simply by passing in a width, height, float, and position.

  • Bill

    Can we get some alternatives for CodeKit since it is only for Mac. I am interested in learning a lot of these techniques but I feel like using a Mac only GUI app is not going to teach me how to understand what is actually going on.

    • http://www.themer.me Methemer
      Author

      The app I’m using is CodeKit, but in the previous part of the series (Part 1) I talked about two other cross-platform applications (and how to use them), so they work on Windows as well (Compass.app and Scout).
      In the tutorial I am never going to do anything “CodeKit” specific :).

  • Marco Salatin

    Hi, thanks for the tutorial! Anyway I would start using sass/less, but I’m a step before deciding what to choose, because when I see these tutorials about it, I still don’t know the differences between each other. I know that there are some syntax differences, but what’s the main goal of each other? Or what should be better?

    • http://www.themer.me Methemer
      Author

      They are very, very similar, and yet different in some ways. Mostly it depends on preference, but there are some feature specific things. For example how variables work in one or the other. Or as we’ll see in a later tutorial, Compass adds some great functionality, that LESS just doesn’t (like easy spriting). Then again, SASS would be the equivalent to LESS, and Compass is just a framework for SASS (just as there is Ruby, and there is Ruby on Rails).

  • BuddyBuddha

    Sass, Less, Compass, Dork, Blork, Lork, Fork…the cute names continue unabated. No offense, but the day people need help to speed up writing html and css, the two easiest ‘languages’ on the planet, is the day all computer scientists weep. Call me when you need to maintain hundreds of thousands to millions of lines of perl/java/cobol code. You know, like a real programmer.

    p.s. The fact that you used anything Mac-specific for this made it a piss-poor tutorial. Doesn’t envato pay tutorial authors? Yeah…

    • http://www.themer.me Methemer
      Author

      Call me, when a web designer is asked to maintain hundreds of thousands to millions of lines of perl/java/cobol code.
      The application used in the tutorial makes no difference. In the previous tutorial I covered other applications that windows users can use. The application here makes no difference to SASS and Compass usage at all. Just as it doesn’t matter which code editor you use.

      • BuddyBuddha

        Stand by what I said, ad infinitum. Needing pre-processors to speed up html/css ‘development,’ no matter how big the project, is still kinda sad. And using anything pc or mac dependent in a tutorial is lame.

        • Andrew

          I’m a web developer who has a degree in CS. I’ve maintained applications requiring thousands of lines of code. However tools like Zen Coding, as well as preprocessors like Sass are hugely beneficial. I’m not sure why any tools saving time should be scorned upon. :P

        • Sumit

          Seriously? You boast of being a purist and yet you complain about pc or mac dependent softwares! The apps are being used just to keep things in perspective for people who are afraid of using terminal. I am a programmer and I love terminal. So, that’s what I use. Compass runs smoothly on terminals. It’s cross platform and open source.

      • thursday0384

        i think his point is that these time-saving technologies seem pointless, and i agree. what’s so hard with just writing css and html out from scratch. if you want to save time then use zen coding. all of these technologies just seem to try to make css and html some sort of advanced high-brow coding languages and they’re not. they’re simple and they don’t take long to figure out. if you want to use a compiler for something then learn a real programming language. it’s a close race in my mind as to which is more pointless, SASS/LESS/COMPASS or the idea of a 960 css framework. really! we need a framework now!?

    • Preston

      Clearly you’ve never worked on a large web project with thousands of lines of CSS. Or, maybe you have, but are oblivious to how frustrating it can be to work on code others have written that isn’t intuitive.

      Ok, I’ll get off your lawn.

  • Bryan

    Bryan here; the guy that wrote CodeKit. Thanks for the awesome mention in the tutorial! I really appreciate it ad I hope my app makes life easier for anyone that wants to use Compass or SASS.

    I’ll be releasing an update to the app in the next couple of days that brings “live” browser reloading (Just like LiveReload.) Best of all, you won’t have to install a browser extension or add a script to your files to get live reloading — it will just magically work.

    Please feel free to email me if you’ve got any questions or suggestions for the app! Bryan
    At incident 57 dot com.

  • Pingback: SASS and Compass for Web Designers: Building a Theme | Shadowtek | Hosting and Design Solutions

  • http://www.dhaneshtk.com dini

    I think webdesigntuts is by far the best resource for designers. Your articles is of top notch and can be tagged as [NO1] to any other design blogs.Real world know how for people like me, has much gained form your tutorials like these. Once again my sincere thanks!!!

    keep it going…. :)

  • Pingback: SASS and Compass for Web Designers: Building a Theme … – Computer Building

  • David

    Hi! What kind of packages for Sublime Text do you use for put the yellow bullets in the select line? I love it!

    Thanks!

    • http://www.themer.me Methemer
      Author

      Intuitive enough – it’s called “BracketHighlighter”, I installed it with Sublime Package Manager :)

  • http://web.tursos.com Josue Ochoa

    Sass changed my life, thanks.

  • http://mozaixmedia.com Korab Hoxha

    For some reason .. :)

  • http://gravatar.com/alokdesai1 alok desai

    i was waiting for this one for so long..lol

  • Justin

    Are there plans to post the next video in this series?

    • http://www.themer.me Methemer
      Author

      Hey Justin,
      I’ve been very busy lately, but I’ll do my best and I hope I’ll be able to publish Part 3 next week, so stay tuned :)

      • Justin

        Thanks, I’m looking forward to it.

  • http://www.themer.me Methemer
    Author

    Glad to hear that!

  • shawn

    I have spent a lot of time looking at different grid systems and I was curious if you have tried this one. http://semantic.gs/

    Most of what I work with are fluid layouts. One thing that I have not yet seen is a great writeup as to the pros and cons of different grid systems. This one just seemed super simple. Can you tell me what I would be gaining or missing out on using this one vs. your grid? Mostly I just want something super simple that I will not regret using at a later time.

    • http://www.themer.me Methemer
      Author

      Hey shawn,
      At first I took a look at semantic.gs too, and it inspired me to make Blankwork, as it was missing some features for me. See I wanted to be able to apply padding to my columns, and that is something that I haven’t seen anywhere, and for a good reason – you couldn’t apply padding to your grid columns in traditional grid systems.

      The good news is that we’re not limited to “traditional css” that much with SASS, so I decided to take a leap and try making a grid system where you can say column(8, 20px), and if 8 columns are for example 100px, then the width of the column would be set to 80px, so you can have 10px of padding. ( I know it’s something you can have with CSS3, but right now we can’t rely on that ).

      You are going to see me use Blankwork grid system in the next tutorial, but otherwise, all I can say – it doesn’t really matter as much which grid system you use, they all do the same thing – provide a grid for you. With Blankwork, I try to make it just a bit more flexible.

  • Pingback: Sass And LESS: An Introduction To CSS Preprocessors | Van SEO Design

  • Pingback: Ultimate Photoshop Tutorials for Enhance Designing Skills | codeManiac - Snippets, Templates, API and the best developer content

  • Malik Dixon

    Hi, thanks for the tutorial! I have a problem that I am unable to figure out. I was adding the @import “compass”; and @import “partials/normalize”; to the screen.scss file. When I go to save the files I get the error below.

    Compass was unable to compile one or more files in the project:

    error screen.scss (Line 2: File to import not found or unreadable: partials/normalize.
    Load paths:
    /Users/mac/Desktop/Sass Project/sass
    /Users/mac/Downloads/CodeKit.app/Contents/Resources/engines/compass/frameworks/blueprint/stylesheets
    /Users/mac/Downloads/CodeKit.app/Contents/Resources/engines/compass/frameworks/compass/stylesheets
    Compass::SpriteImporter)
    overwrite screen.css

    If you can assist me with this, I would appreciate it greatly.

    Thank you.

    • http://forgetfulvet.info Casey Maupin

      I get the same error, and it is driving me nuts… I have been scurrying around the net and haven’t found the fix. I am on a windows machine too. I hope it isn’t from Sublime Text 2, I love it. Can anyone help with this?

    • http://www.forgetfulvet.info Casey Maupin

      I found the solution!!! You put the partials folder in the SASS directory. So the line ‘partials/normalize’ hit on the correct path.

  • Danny

    Awesome tutorials, thanks. Didn’t even know these apps were available.

    Can I ask, how do get Finder to slide up from the bottom of the screen like that, and how what do you use for the window management i.e. browser on the left side, sublime on the right?

    Thanks again