Join Joe Marini for an in-depth discussion in this video Using operators, part of CSS with LESS and Sass.
So far we've seen LESS used to basically reorganize existing CSS.…So we've used variables, we've used mixins, we've used nested classes, but LESS also adds…the ability to do things like mathematical calculations inside your CSS.…Let's take a look at that in action.…Here you can see I've opened my ExampleSnippets file.…I have scrolled down to the section on Operations, and I'm using the same HTML file that we're…using for our examples.…
And here, I've got my ops_styles.less example file open.…Let's just copy over the lines from this section here in the Snippets; all of them this time,…and we'll copy them, and we'll just bring them on over.…So far, things look pretty much familiar if you've been following the course along to this point.…We have variables for color, I have a variable for some padding, and I have a variable for some thickness.…And then down here on a style rule for the paragraph with the ID of mypara, I'm using those variables.…
Let's take a look at how this works before we do our operations.…
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