Mastering Sass: Lesson 1
videos

Mastering Sass: Lesson 1

on Mar 21st 2011 with 44 comments
Tutorial Details
  • Topic: Sass
  • Format: 8 Minute Screencast
  • Difficulty: Moderate
This entry is part 1 of 3 in the Mastering Sass Session
Next »

After numerous requests, we’re launching a 3-part quick tip video mini-series on mastering Sass. To begin, in this introductory eight-minute screencast, I’ll teach you how to install Sass, and then how to get started with the beginning functionality and options.


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

In the next lesson, we’ll take things a step further, and dig into mixins, Math operations, and add-ons! Stay tuned!

 
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. I'm incredibly passionate about modern software development, and am the author of Laravel Testing Decoded! 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
  • http://www.jeffrey-way.com Jeffrey Way
    Author

    I enjoyed the part where I refer to Ruby as Rubies. Haha.

    • $hekh@r

      You can’t laugh at all!

      Where is the alternate content. I can not access video contents.

      • $hekh@r

        Or, you can give me an option to download this video.

      • iamfriendly

        It’s a video on youTube. It will be HTML5-ised at some point in the near future, I suspect. Also, politeness and manners, I imagine, will get you further than telling someone they can’t laugh at their own mistake and demanding they do something they don’t really have much control over.

        Thanks for this, Jeff. I looked at SASS a little while back, went to the ‘main’ site and saw “Sass makes CSS fun again.” as the opening quote. I pretty much ignored the rest. After watching your video, I wish I had had more patience as it genuinely looks useful.

        I’m still not sure it makes CSS ‘fun’ though ;)

    • http://www.venture-ware.com/kevin Kevin Jensen

      Haha! “Rubies”. Nice.

      Great quick tip as always, Jeffery. I’m excited for the next two parts.

    • matt

      Thanks for the tutorial Jeffrey. A tutorial/course on how you would go about building a webpage/website using sass, compass and lemonade would be awesome!

    • Chris Sanders

      Great tutorial. We are looking into CSS frameworks at work now. Granted it’s a bit late in the game but we had other projects taking up all of our time.

  • http://www.webbrands.nl Robbert

    I’m using Less CSS (lessPHP) for my CMS and I love it! It’s very similar to Sass, although I think the syntax of Sass is better: the dollar sign ($) for a variable to me is more natural, since it’s also used by PHP as a variable indicator. I couldn’t find a simple Sass compiler for PHP so I went for Less. It’s amazing. Huge timesaver and flexible if you’re switchting themes within a system.

  • http://www.wesbos.com Wes Bos

    Really excited for the rest of these – haven’t dove into Sass before and this looks pretty solid so far :)

  • http://www.bluelayermedia.com Jason

    Thanks for the tut Jeffrey. BTW, what are you using to record your sceen?

    Thanks,
    Jason

    • http://www.ecustom.ca/ Damon Bridges

      I’ve heard Screenflow from him before, including in a recent post. Also I believe that there is a Screenflow icon in his toolbar at the top-right, looks like a red curtain. Forgive me if I’m wrong.

      • http://www.bluelayermedia.com Jason

        Thank you both!

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

      ScreenFlow.

  • http://www.jpswebdesign.net Saul

    Excelent! I saw the tutorial on LESS but I’m on a windows PC so I didnt have other choice other than LessPHP and I didnt want to go that way, But as I can see the Sass generates the css directly

    Thanks a lot for the Tut Jeff! Excelent as always

    • http://jaimievansanten.nl Jaimie van Santen

      Less can too… just use the same –watch parameter

    • http://www.themer.me Methemer

      You can easily have both SASS and LESS (and even Compass) on windows ;)

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

    Thank-you for that quick introduction Jeffrey, Sass looks really appealing now. The auto-generating CSS file and options to have it compressed are really nice.

    P.S. The quality of the audio and video of this screencast were really good, they seemed a lot better than previous ones.

  • Martin Koistinen

    Thanks, Jeffrey. I’ve been looking at SASS for awhile now after having been using LESS for even longer. It seems that SASS has a better chance of becoming adopted into CSS4 (or something), so I’ve been looking for an excuse to take the plunge. This video tutorial is that excuse. =)

  • Guillermo Gomez

    Great article, straight to the point. I am new to Saas, and so far I like what I saw. However, I am still not sure how this tool will ultimately improve the css in my projects besides minimizing repetition and minifying the files.

    I guess I need to wait and see the upcoming tuts. Thanks again!

  • http://alistairrossini.com Alistair

    Hey Jeff,

    Wanted to point out a video with instruction on how to turn the Windows command line into something a bit more familiar to Linux users.

    http://tv.cakephp.org/video/leighmac/2011/01/14/turn_windows_into_linux_and_watch_me_cook_a_pork_chop

    Very useful and platform unspecific.

    Thanks for the vid, might just jump into one of these soon.

  • http://webdesignertutorials.com web designer tutorials

    Liked rubies too :) Funny.

  • http://twitter.com/luker Luke Robinson

    Many thanks, Jeff. Personally, I really dislike working in the command line. I’m a Web designer! Using the Terminal to install and run SASS was a constant barrier and it had me briefly looking into LESS.

    Fortunately, John Hwang* started an open source project called Scout-App. In a nutshell, Scout-App is the missing GUI for installing and running SASS on Macs and PCs.

    Scout – Compass/Sass App 0.3.0
    http://mhs.github.com/scout-app

    Cheers,
    Luke

    *Full disclaimer: I’m friends with John Hwang.

  • http://www.graphicrating.com Andy Gongea

    First of all, I’m a designer rather than a dev and I don’t see that much of a value here.
    CSS is simple the way it is. Why do you want to add a new layer on top and extra learning curve ?

    Anyway, great tuts like always Jeff.
    Cheers!

    • http://www.webbrands.nl Robbert

      It’s faster to write sass/lesscss than normal css and it is more flexible. If you want to change all the yellows on a page with blues, than you only have to do that once, because you can use variables.

      If you are a freelance designer or working for a boss I can imagine you don’t want this learning curve (really there isn’t any), but my goal is to build websites quicker with every project. And this helps to achieve the goal.

  • http://www.brandensilva.com Branden Silva

    Haml + Sass is amazing at keeping views light weight. The only thing I can think of that perhaps is better is using Slim instead of Haml. It uses even less syntax than haml, believe it or not.

  • http://www.lavalleecreative.com Stephen

    Thanks…looking forward to trying this out!

  • Justin

    Jeffrey,

    This is off-topic, but what is that program that allows you to use Spotlight as a window overlay? Maybe it’s not even spotlight, I dunno. Tried searching for it on Google with no luck.

    Thanks!

  • http://www.exposecreative.net Mischa Colley

    Awesome. Thanks for giving such a simple explanation! I was worried Sass was going to be something complicated to get up an running with. Looking forward to the next videos . . .

  • http://coffeewiththeboogeyman.com Dan Robert

    I love this. Very straightforward and useful. I’m really excited to see the next couple lessons. Keep up the great work!

  • http://www.andrejtelle.com andrej

    You say in the beginning, that you have covered less in a different tutorial. Where can I find that?

    Great tutorial series btw, really enjoy the quality and depth of it.

  • gustavo

    Sorry, totally off topic here but the curiosity is killing me.

    Would you mind to tell me what’s that split arrow icon on your menu bar?

    Thanks!

  • http://inplainwriting.com Connor McNabb

    Great tutorial! Loving sass. Quick tip for those using this tutorial: when you’re installing your gems, you’ll need to install the sass gem separately from ham (sudo gem install sass)l—I may have missed something but I don’t think that is mentioned in the first tutorial (I think sass and haml used to be bundled but they aren’t anymore). Good Luck!

  • Palak

    Your tutorials are as if everybody already knows what you are teaching.
    And you are superfast which is not good for learners.

    • Daniel

      Exactly. I have no idea what macvim is and even after searching and installing it, I had absolutely no idea what he was doing. From 4:07 to 4:15 he creates a new file to the desktop but assumes everyone knows how to do it from that program. I don’t like being negative but for designers who aren’t used to command line tools, this tutorial is worthless.

  • http://webninjataylor.com Taylor

    FYI, I had to run this…

    $ sudo gem install sass

    after the “haml” install before “$ sass -h” would work.

    • http://www.davidhill.ie David Hill

      Yes, me too..

      you skipped/missed a step Jeffrey

  • Thoma

    Hi,

    Thanks for the tutorial. Indeed as Taylor said sass and haml are now separate project. I also had to run

    gem instal sass

    :)

  • http://jmonit.com Monit

    Hey Jeffery

    I always enjoy your tutorials. Saw you for the first time today in your gravatar. You are pretty young and your videos rock, sorry from your voice I thought your are in your mid 30s or something.

    I am trying ruby for the first time and this video will sure help setting up SASS. Keep up the good work mate.

  • http://teckstack.com/ TeckStack

    I want to use SASS for my next project.
    I have got upto creating folder structure into project-folder.

    But not getting “sass –watch style.scss:style.css”???
    What this will do exactly? And also confused about DIR path for the above statement.

  • http://teckstack.com/ TeckStack

    Hey Jeff,
    I got it. Actually I had created two directories but now complied both in same directory.
    Thanks.

  • Melissa Samworth

    When I close the terminal, the program stops running. Also, when I type in the command line to watch, it returns:

    “melissasamworth:testing melissasamworth$ sass –watch style.scss:style.css

    >>> Sass is watching for changes. Press Ctrl-C to stop.

    overwrite style.css”

    But there is no way to exit out of this so that I can use another option, like compress.

    Please help me!

  • dazzler

    Hi