Join Joe Marini for an in-depth discussion in this video Working with functions, part of CSS with LESS and Sass.
- View Offline
Sass provides a whole host of functions for working with all kinds of CSS data types, such…as colors, and math, and strings, and so on.…There are far too many functions to go into here, but let me give you a sample of some…of the color functions that are available.…You can use functions such as lighten, and darken, and fading in and out. You can…mix colors together.…You can extract information about colors, such as getting their hue, their saturation, and so on.…You can use functions like grayscale to convert colors to grayscale.…You can get the complement of a color.…You can take a color and invert it, and so on.…
There's also a bunch of functions for math.…For example, you can round numbers.…You can convert numbers to percentages.…You can find out the min or max number in a sequence of numbers, and so on.…We have too many functions to go into in-depth,…so what I'm going to do is just jump over the code, and show you some functions in action,…and hopefully that will give you an idea of some of the things you can accomplish in Sass,…
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