Archived video

This video is archived and won't be updated. We're keeping it online for now as a courtesy.

Introduction to the Sass and Compass Series

Video loading...

  • 0:00
    [Drupalize.Me: Learn Drupal]
  • 0:03
    [♪ music ♪]
  • 0:06
    [Introduction to the Series Learning Sass and Compass, Chapter 1]
  • 0:08
    [with Kyle Hofmeyer and Addison Berry]
  • 0:12
    In this series, we're going to be covering CSS preprocessors.
  • 0:16
    Mainly we're going to be covering Sass, and along with Sass,
  • 0:19
    we're going to be covering Compass, because they pretty much go hand in hand.
  • 0:23
    We're doing this series—It's really not necessarily Drupal specific,
  • 0:27
    but a lot of themes are starting to embed and build on Sass and Compass inside them.
  • 0:32
    It's also just a really good thing to have in your arsenal of skills,
  • 0:36
    especially if you do front-end design work.
  • 0:39
    Now, CSS preprocessors are not a new thing.
  • 0:43
    But they're kind of what I would call the new kid on the block.
  • 0:46
    So, this series we're going to be covering them,
  • 0:48
    we're going to dive into them and start to understand the basics of them.
  • 0:51
    This is kind of a beginner series, but we really wanted
  • 0:54
    to get you started learning Sass and Compass.
  • 0:56
    >>Before we dive into actually working with Sass, first we want to give some context.
  • 1:02
    So we're going to be looking at what exactly is a CSS preprocessor,
  • 1:06
    what is Sass and how does that relate, and we're also going to compare
  • 1:10
    Sass with another very popular CSS preprocessor that's out there today,
  • 1:15
    called LESS, just so that you have some sense
  • 1:17
    of what the differences are and what the real features are.
  • 1:19
    And then we're going to wrap up our context by figuring out how Compass
  • 1:24
    fits in with all of these concepts.
  • 1:26
    >>Yes, so not only are we going to learn what a CSS preprocessor is,
  • 1:30
    why Sass, Sass versus LESS,
  • 1:33
    but we're also going to start to dive into the terminology of Sass.
  • 1:36
    And we're going to start learning things like mixins and variables
  • 1:40
    and functions, nesting, and what you can do with those things.
  • 1:44
    We're also going to start and learn how Compass works along with Sass.
  • 1:48
    Now Sass itself is a standalone that you can use.
  • 1:51
    Compass requires Sass and basically just enhances Sass.
  • 1:54
    I don't really see a reason at this point not to use Compass if you're using Sass.
  • 1:59
    But we're also going to start learning the terminology
  • 2:01
    and some other stuff that we're going to do with those.
  • 2:03
    >>So after we have Sass pretty well figured out and nailed down,
  • 2:07
    we're going to turn our attention to Compass.
  • 2:09
    Make sure you have configured properly and your config.rb file.
  • 2:13
    Look at how you can use some commands with Compass.
  • 2:16
    And then we're going to start to play around with just a couple of the
  • 2:19
    Compass mixins, so you can get a sense of what Compass
  • 2:22
    is offering you, versus what Sass was giving you.
  • 2:24
    To wrap everything up, we're going to go ahead and take a look
  • 2:29
    at how you can extend beyond what we've covered
  • 2:32
    in just the Sass and Compass basics.
  • 2:34
    So we'll be looking at other libraries that you can use with Sass.
  • 2:38
    There are many libraries aside from Compass.
  • 2:40
    So we'll take a quick tour of what those are and how you might want to use those.
  • 2:45
    And then we'll also look at just some other tools out there,
  • 2:47
    other pieces of software that use Sass or other ways that you can
  • 2:51
    make yourself more efficient when working with Sass on your next project.
  • 2:55
    So, let's go ahead and get started.
  • 2:59
    [Drupalize.me: Learn Drupal]
Loading ...

Introduction to the Sass and Compass Series

Loading...

In this series, we're going to be covering CSS preprocessors. Mainly we're going to be covering Sass, along with a related library, called Compass. While not used only on Drupal sites, it's a good thing to have in your arsenal of skills, especially if you do front-end design work.

To wrap everything up, we're going to show you how to extend beyond what we've covered in just the Sass and Compass basics, with other libraries that you can use with Sass.

Downloads: 
Log in or sign up to download companion files.

Additional resources:
There are no resources for this video. If you believe there should be, please contact us.