Join Joe Marini for an in-depth discussion in this video A quick tour of LESS and Sass, part of CSS with LESS and Sass.
Alright, so we have our tools installed; we have everything we need to get started working…with Sass and LESS.…Let's take a quick tour through the kinds of things that LESS and Sass allows us to do.…Now, I don't expect that you're going to understand everything I'm about to show you. The whole…purpose of this particular demonstration is just to give you an idea of the kinds of things…that you can do when you're using LESS and/or Sass with your CSS.…So I'm going to start off with a LESS example.…So in my Exercise Files, I'm going to open up the first LESS example, and you can see…that this is just a basic HTML file with not a lot of content in it.…
There's a title, I've got a header here in the page, and I have a div with some content.…What I'm going to do is open up the LESS style sheet, and you can see that for the most part,…LESS looks a lot like CSS, with a couple of things that probably don't look very familiar to you.…At the top of the file, I have this weird looking thing called @baseColor, and I'm assigning it a color value.…
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