SASS and Compass for Web Designers: Introduction
videos

SASS and Compass for Web Designers: Introduction

on Jan 11th 2012 with 27 comments
Tutorial Details
  • Topic: SASS and Compass, CSS
  • Difficulty: Beginner
  • Screencast duration: 24 mins
This entry is part 1 of 6 in the series SASS and Compass for Web Designers

SASS and Compass for Web Designers

Welcome to the first in a series of screencasts about SASS and Compass for web designers. We (designers) favor graphic user interfaces, and are sometimes intimidated by the command line, so let’s begin by looking at three friendly applications to get you started with SASS and Compass.

At the end of this tutorial, I’ll also preview SASS code nesting abilities. In future videos, we’ll take a look at SASS and Compass in more depth.

Introduction


Alternatively Download the video, or subscribe to Webdesigntuts+ screencasts on YouTube

Useful resources

Series NavigationSASS and Compass for Web Designers: Building a Theme >>

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
  • http://martealdesigns.com bob marteal

    Yay! Really excited to get into this one. There was a SASS mini-series sometime last year that got me going, but it just touched on Compass. I’ve been dabbling here and there, but this is getting me geared up for some big projects coming up at work.

  • http://www.skippednote.com Bassam Ismail

    Tried the latest build of LiveReload on Windows 7 x64, didn’t work :(

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

      Well you can speed up their development for windows by helping them debug it. That is probably the only way :)

    • http://28inch.co.uk 28inch

      Livereload for windows is in pre-alpha stage. Compiling is not supported yet. Subscribe to the newsletter to get the latest information about it.

  • http://richardmisencik.com Richard

    Nice tutorial, i have always been looking for some app like livereload but couldnt find anything that actually worked, but since im a windows user i will probably have to wait for their windows release. Anyway, one more question, when you were creating a html file in sublime, how did you set the shortcut to expand basichtml into html doctype? Or did you use some other app for that? Because i tried to set the same thing but it didnt really work, only for some pieces of small text and sometimes it was really buggy. Thanks

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

      Well there are two ways to do that. I’m using an app called “TextExpander”. I saved a snippet, and anywhere, where I type “basichtml” and hit tab I get that html. Comes in really handy for times like these.
      But, if you’re using Sublime Text, TextMate, and nowadays many other text editors offer to save your own snippets. Basically – it’s a snippet :).

      • http://richardmisencik.com Richard

        Thanks, i was wondering if you are using that app or snippets inside sublime :)

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

        Well, the snippets inside sublime text are even more powerful. You can even trigger them with shortcuts, etc.

        • http://richardmisencik.com Richard

          It didnt quiet work for me, when i wanted to expand more complicated markup it just all colapsed. Or I was trying to trigger it with tab (i set it as trigger) but instead i just got a tab space, so it was kinda weird.

          • http://28inch.co.uk 28inch

            I. You can write your own snipettes, it`s really easy or….
            II. Install package controll
            III Install the HTML5 bundle
            IV ..and a snipett looks like:

            html:5+tab and you will get:

            as you can see this one even has a conditional(5) after the double colons which allows you to be more specific.

          • http://28inch.co.uk 28inch

            It seems to me that they cut the code off from the comments. So after this line: “html:5+tab and you will get:” there was a basic html5 template.

  • Gvido

    Nauri, you are genius…And I’m proud of having you as my cousin! Wish you best of luck and success with next projects!

  • Pingback: SASS and Compass for Web Designers: Introduction | Shadowtek | Hosting and Design Solutions

  • JP

    I’ve been using SASS with Ruby on Rails for quite some time now and I got to tell you that it’s addictive as hell. It’s such a brilliant tool that saves you so much time, makes CSS easier to read, makes your code cleaner.

    Why aren’t SASS’ features being added to CSS by default?

  • http://compass.handlino.com/ Handlino

    Thank you for mention Compass.app!

    BTW, “Compass” should link to the compass framework http://compass-style.org/ , not to us :)

  • Wes

    Nice tut! After compiling the screen.css you opened it in SublimeText2.

    How did you drag it over and have a split view?

    Could you share your settings file that accomplishes this?

    Thanks

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

      Command + Alt + 2 (Ctrl + Alt + 2 on Windows) for the split view.
      For additional layouts look at the menu: View -> Layout, and there is a list of different available layouts.

  • http://www.dsignworx.com Mauricio

    Business model from 2010s #1
    create a <> that everybody desire <> in order to have <> and everybody must come to us to learn or get licence, that will create demand for apps, then we will sell tools for create dos apps.

    <>

  • ssi48

    You speak and do things too slow. It’s impossible to watch video and not to fall asleep in the middle.

    • kevin

      wow, talk about being unappreciative. The screencasts here are so valuable and FREE and you have the nerve to post a comment like that? I don’t really want to start a comment war here but I will say “THANK YOU FOR THIS GREAT VIDEO” on your behalf and “KEEP MORE COMING!”,
      sincerely and most appreciative.

    • LarryDavid

      Ignore this cretin.

    • http://www.designtodevelop.com Steven

      @ssi48 Please don’t write negative remarks here.

      The video was detailed, elaborate and eye opening. Very helpful and has helped me learn more of SASS and Compass.

      Keep up the good work

    • Joshua Richards

      Great Tut, but you do move and speak a little slowly, great knowledge but the presentation could be better.

    • Guillermo Loren

      you should take into account that many people watching these video series are not native English Speakers, so it’s quite nice that he talks slowly enough to be easily understood

  • Pingback: useful articles | Pearltrees

  • Pingback: 35 Great Resources for Compass and Sass | Fuel Your Coding

  • Pingback: Recopilatorio de Tutoriales – Compass & Sass | Marta del Castillo

  • Redscrapbook

    Will it work with jQuery?
    And iphone app?

  • Nero

    LiveReload is working for me for html files but not for SASS files, what could be the issue? I am on windows and I am using the cmd line for monitoring the sass changes via compass

  • Pingback: Quick Tip: Working with SASS and Bootstrap | Webdesigntuts+

  • Pingback: My Stream | Quick Tip: Working with SASS and Bootstrap | My Stream

  • Pingback: Quick Tip: Working with SASS and Bootstrap - Website Design Prices

  • http://twitter.com/ednailor Ed Nailor

    Thanks for explaining the different apps that can be used for this. I am using a Windows 8 machine, and Scout doesn’t seem to work yet with that (errors.) Downloaded and tried LiveReload, which I do like, but there are not as many options as the Mac version quite yet. Downloading Compass.app to give that a try and see how that works.

  • Digh

    Thank you so much for this