Join Joe Marini for an in-depth discussion in this video Using variables, part of CSS with LESS and Sass.
- View Offline
Okay, let's begin our investigation of Sass by taking a look at how Sass uses variables,…and if you've already watched the first part of the course, where we covered LESS variables,…this is probably going to look pretty familiar to you, because the syntax is almost the same.…Sass variables are declared using a dollar sign character, and are defined like CSS values,…and they could be one of six different types.…There are numbers, so I can declare a variable that, say, contains a pixel value, or perhaps…an em value, or a unit, like inches.…There are strings, so I can make a variable that contains some string content.…
There are color variables, so I can define a variable that contains a hex value for…a color, or even a named color.…There are booleans, so I can declare a variable, and give it a value of either true or false…as a boolean value.…There are null variables, so I'll just assign a value of null to a variable.…And there are list variables.…Now, a list variable contains more than one 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