Join Joe Marini for an in-depth discussion in this video Importing external files, part of CSS with LESS and Sass.
- View Offline
Just like in regular CSS, Sass provides a way to import one style sheet into another,…and this is a great little organizational tool, because it allows you to take commonly…defined things, like variables, and mixins, and such and such that you want to use throughout…the rest of your site, and organize them into individual files that can be included when…and where they are needed.…So let's take a look at how this works. I'm going to open up two things.…First I'm going to open up import_styles.scss, and you probably recognize this as one half…of the variables example that we saw earlier in the course.…
And I'm going to open up this other file here called import_me, and this is the first half…of the variables example that we saw in the previous chapter.…I've taken that example and split it into two things.…This file here uses the variable definitions that are defined inside of import_me.scss.…In order to use them, I have to import this file into this file here,…and the way that we do that is by typing @import, and I'll just write import_me.scss.…
The first section focuses on LESS (Leaner CSS) and how it can be used on both the client and the server. The lessons show how to work with variables, mixins, nested rules, and other features to easily create maintainable CSS.
The second section introduces Sass (Syntactically awesome stylesheets), which contains many of the same features as LESS, along with a few new ones. Joe also compares and contrasts the two tools, and explains how your platform and needs may influence which tool you choose.
- What are LESS and Sass?
- Using variables in your CSS
- Working with reusable and parameterized mixins
- Implementing nested rules
- Combining CSS rules with operations
- Using the built-in functions in LESS and Sass
- Controlling the CSS output formatting
- Importing external files