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, LESS allows you to import files into other LESS style sheets,…and this really helps organizationally when, for example, you're trying to factor out variables…from different LESS style sheets that may make use of them, or if you've got functions…that are used in more than one place, or mixins that are used across you're your Web site.…You can just define them in one file, and then import them in two files where they're used.…And that's what we are going to look at in this particular movie.…Here I have my snippets scrolled down to the Importing Files section, and I've got my Sample Document,…which you are no doubt familiar with by now.…
I'm going to go over and open up my import_styles.less file.…This is a style sheet that makes use of certain variables.…You can see I've got my color, my font size, border; in fact, you probably recognize it…as part of the example we looked at earlier when we were using variables.…This is the part where the variables are used, so let's take a look at where the variables are defined.…
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