Join Joe Marini for an in-depth discussion in this video Using operators, part of CSS with LESS and Sass.
- View Offline
One of the things missing from standard CSS is the ability to use mathematical operations…and other logic control inside your style sheets,…but Sass fixes this problem by letting you use math and other kinds of operations inside your styles.…So let's take a look at how this works.…You can see here in the code I've scrolled down to the Chapter 4 section on Operations,…and I'm going ahead and open up my ops_styles.scss file here.…And let's go ahead and copy the example over.…
So I'll copy this lines right here, and paste; alright.…So let's take a look at what's going on.…I have a couple of variables.…I've got myColor, which is red, and I have a basepadding, and a basethickness variable,…each of which are set to, let's see, we've got 10 pixels, and 4 pixels, respectively.…And then I have a rule defined, which is going to affect the paragraph with the mypara ID on it.…And I'm just starting off using the variables in a pretty straightforward way.…So far, nothing here is really different than the variable section that we saw earlier.…
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