An Introduction To Sass Data Types, Operators, and Functions

Posted: 05 Jul 2016 05:30 AM PDT

I'm the last person to call myself a programmer, but I have learned the basics of a handful of programming languages over the years. One topic important to all of them is the different data types you can work with and how the language allows you to manipulate them.

As a scripting language, Sass is no different. It offers support for different types of data and it provides ways to manipulate each of them. I want to spend the next couple of months talking about data types in Sass and how you can manipulate them with different operators and functions.

Today I'll offer an overview and then talk about a couple of data types that don't have built-in functions and minimal operators. In the coming weeks I'll cover more data types in greater detail and I'll close the series talking about control structures and how to create your own custom functions.

Data Types in CSS

We don't usually think of data types in CSS. We think more in terms of selector {property: value}, but all the values will be of one of the allowed data types for the specific property.

For example when you set a font-family, the value will be a string. The flexbox order property accepts integers, while the line-height property accepts real numbers.

The W3C lists seven basic data types for CSS.

Integers and real numbers
Lengths
Percentages
URLs and URIs
Counters
Colors
Strings

While we use these data types to set property values, CSS doesn't provide much to manipulate any of them. For example there's no way to combine two strings into one property value without using some other language like Javascript or Sass.

CSS does offer the calc() function so we can do some basic math such as:

1	width: calc(100% - 120px);

If you haven't used it before calc() comes in handy at times such as when you want a fixed gutter in a responsive grid. It's not something I use a lot, though.

Data Types and Operations

Sass allows you to work with any CSS data type as well as some additional data types of its own. It also offers operators for manipulating its own data types and it provides several functions to do even more with most of them.

Sass supports seven main data types.

Numbers
Strings
Colors
Booleans
Nulls
Lists
Maps

I'll talk about nulls and booleans in a moment and I'll cover the other data types in more detail over the next few weeks.

All of Sass's data types support equality operations.

equals (==)
not equals (!=)

Both can be used to compare values to determine if the values are the same or different. With one exception each data type also has support for its own set of operations, which I'll get to when we talk more in depth about the data types.

You can also use parenthesis to affect the order of operations. I'll show an example next week when we talk about numbers.

Functions

Functions consist of code to perform a specific task. They're similar to mixins, except that where mixins output lines of code, functions return a value that will be used elsewhere. Like mixins, functions can accept variables and they help you write DRYer code by abstracting reusable logic.

Sass provides quite a few built-in functions to help you work with the different data types. For example there are functions that let you darken or lighten a color by 10% or 28% or whatever you choose.

You can create your own custom functions and if you've ever used a library like Compass or Bourbon, you've likely used some custom functions before. I'll close this series talking about custom functions, but first we need to set the foundation by talking about data types, their operators, and the built-in functions of Sass that work with them.

However, the first two data types I'll talk about today have no built-in functions and only one has any operators associated with it.

The Null Data Type

The null data type has one value, which is null. It's a data type that doesn't have its own operators or built-in functions. The most common use of the null data type is to define an empty state, nothing, or unknown. You might use it when initializing empty variables in a mixin for instance.

1	$color: null;

Note that null is all lowercase. NULL is not the same as null in Sass and will instead be interpreted as a string.

When compiling to CSS any property with a value of null will be ignored.

1  2  3  4

h1 {      background: #fff;      color: null;    }

compiles to:

1  2  3

h1 {      background: #fff;    }

Despite null representing nothing or an empty state, it has a length of 1 when passed to the length function. The reason has to do with how Sass stores variables, but that's something I'll get to more when talking about lists.

Booleans

Boolean values are either true or false. They come into play mostly with control directives. Sass supports three operators on boolean values (in addition to equals and not equals).

and evaluates to true when both values are true, otherwise it evaluates to false.
or evaluates to true when either value is true and evaluates to false when both values are false.
not negates the current value so true becomes false and false becomes true.

Note that like null each operator is lowercase. AND, OR, NOT, are not valid boolean operators in Sass.

There aren't any functions specific to booleans and again they come into play mostly to compare one value to another in conditional statements, which is something I'll talk more about toward the end of this series.

Closing Thoughts

Hopefully this serves as a very quick and simple introduction to data types, operators, and functions in Sass. I'll cover the remaining data types in more detail as we work through the series. The main thing to take away today is that Sass supports all CSS data types (the allowable property value types) and it supports some additional data types of its own.

Sass also provides ways to manipulate data through operators specific to each data type and through the use of functions, some of which are native to Sass and some of which are available through 3rd party libraries like Compass. You can even create your own custom functions.

Next week I'll look at numbers and and the following week I'll look at strings two types of data you work with all the time in CSS. In the weeks after I'll dig into the other data types. I'll close the series looking at control directives and then show you how to write your own custom functions.

Download a free sample from my book Design Fundamentals.

Join me as I share my creative process and journey as a writer.