Reassurance that splitting our single SASS files into multiple partials is not over-engineering New!
Our project, thus far, is not terribly complicated. It might seem that splitting out our SASS into multiple files is overkill, and if that's what you're thinking, you would be right if our project wasn't destined to become more complicated as we move forward. Most modern web projects, especially at the enterprise level, requires a structure that scales well for multiple front-end contributors and rapid CSS pre-processing, and using partials can help make that happen.
How CSS source maps work and how they allow us to inspect the SASS source of CSS properties New!
(This one's FREE!)
I'm so excited you've made it to the video where I get to show you how you can use the browser inspector to find the exact location in your SASS where a CSS rule is created. This is made possible through the use of CSS source maps, and it's a beautiful, beautiful thing.
How to use CSS source maps in Firefox New!
(This one's FREE!)
While we use Chrome throughout this series, Firefox also supports source maps, so we do a quick demonstration of how to use them here.
How to navigate to SASS variable definitions in the browser New!
Not only can you delve into your SASS directly in the browser, but you can track down where variables are defined. In this video we show you how.
Why it makes sense to use the SASS Globbing extension for automatically including partials New!
Now that we've separated out our SASS into files that correspond to components, we now have several manual steps we have to take to add a new component in. Luckily, we can automate one part of this with the SASS glowing extension, and in this video we talk about how it works.
How to install a SASS extension and automatically include partials from a folder New!
One of the benefits of SASS is the rich library of extensions developed by the SASS community. Here we walk through installing the 'SASS globbing' extension to automatically pull in all partials in a specific folder.
The benefits and costs of using the SASS Globbing extension New!
SASS Globbing is awesome, but it's important to understand how it works so you don't get bit by it later on. In this video we summarize why it's so useful but also in what situations you might want to steer clear and just manually add your partials.
The pros and cons of using local software like SASS and Bower for front end development New!
Throughout this series we've introduced a number of pieces of software, including Ruby, Bower, SASS and SASS extensions. Hopefully you're sold on the usefulness of these tools, but you also might get a sinking feeling when you think about how you're going to help a fellow developer set up their local environment. Here we talk about the potential issues of using local software for front-end development, in a large part so we can address how to resolve them in later videos.
Map of local software needed for front end development and how the parts relate to one another New!
(This one's FREE!)
It may seem like there's an endless chain of software components that we need in order to accomplish what used to be simple HTML and CSS. In this video we explain that there's a limit to the software components that we'll need, and also use a handy visualization to see how the different components connect and support each other.
Why there are so many individual pieces of front end software New!
(This one's FREE!)
Wouldn't it be nice if there was just one piece of software you could turn on to get all the tools you need for front end development? It would, but there's a good reason that isn't happening right now. Here we discuss briefly why.
How to learn more about SASS with the SASS documentation New!
So far we've talked about how to use variables, partials and includes in SASS, but not about how we learned how to do that. Here we step back for a minute to go to the source and show you where you can learn more about SASS conventions and syntax.
Why we're choosing not to use Compass just yet New!
When many front end developers learn how to use SASS, they use it in tandem with a tool called Compass. However, unless your project really needs Compass, there are some compelling reasons to use straight-up SASS. In this video we talk about what those reasons are.
How to install Bundler New!
Bundler allows you to install specific versions of gems (like SASS and SASS Globbing) for each project. Here we take the first step and install Bundler.
How to generate a Gemfile with Bundler New!
Once we have bundler installed, we need to create a Gemfile - which is just a file without an extension called 'Gemfile' - and in this video we use Bundler to do just that.
How to add dependencies to a Bundler Gemfile New!
Just like we did with Bower, we're going to list out the dependencies our project has and run a command line command to install them. With Bower, it was packages bundled through Packagist. With Bundler, it will be with gems supplied by any online source that makes gems available.
How to use project-specific versions of gems with 'bundle exec' New!
Bundler doesn't affect the gems installed in your local system, so to use them, you have to prefix your commands with 'bundle exec'. Sounds simple, but we walk through it in this video as well as demonstrating how to test if 'bundle exec' is actually working.
How the Bundler Gemfile.lock file works New!
While we can specify version ranges in our Gemfile, our Gemfile.lock file keeps a record of the specific versions being used in a project. Here we talk through the purpose of the lock file and how to work with it.
How to use 'bundle exec' with 'sass watch' and 'sass globbing' New!
We know now that the 'bundle exec' command is how to route our commands through bundler, and in this video we demonstrate how that works.
How to specify a version range in Bundler that updates to the latest patch version New!
Earlier in this series we used the Bower package manager to manage which versions of third party libraries we were going to use. In Bundler we can do the same thing, but the syntax is a little different. In this video we demonstrate how to set up a version range with a tilde and greater-than symbol.
Setting up a README.md file and how we're automating documentation New!
Because we're using package managers for our third party libraries, we have a lot less documentation do manually compose in order to ensure that our future selves and fellow teammates can work on the project. However, when we do have something that's not clear from our project's structure, we should add some notes. Here we create a README file to hold these.
