Sass Data Types and Value Operations
Sass supports several value types:
- Numbers: Integers, decimals, and values with units such as
16px,1rem, and90deg. - Strings: Quoted or unquoted text values.
- Colors: Named colors, hexadecimal values, and supported color functions.
- Booleans:
trueandfalse. - Null: Represents the absence of a value.
- Lists: Ordered collections of values.
- Maps: Key-value collections.
- Functions and calculation expressions: Values and computations used to derive stylesheet output.
Sass arithmetic and unit handling can be helpful for deriving values, but units must be compatible. Adding 1rem and 2rem is meaningful; adding 1rem and 2seconds is not.
Modern CSS also supports its own runtime calculations through calc(), min(), max(), and clamp(). Use Sass arithmetic for compile-time calculations and CSS calculations when the browser needs to combine runtime values such as viewport dimensions and custom properties.
Working with Values and Units
$base-size: 1rem;
$scale: 1.25;
$heading-size: $base-size * $scale;
$spacing: 8px;
$double-spacing: $spacing * 2;
$optional-border: null;
.card {
font-size: $heading-size;
padding: $double-spacing;
border: $optional-border;
}💡 Sass calculates
$heading-size and $double-spacing during compilation. The null value does not produce a useful CSS border declaration, so Sass omits that declaration.
Arithmetic involving CSS units and numeric values follows Sass's calculation rules. When combining units, ensure the operation is dimensionally meaningful and supported by the compiler.Knowledge Check
Which Sass value represents the absence of a value and can cause a declaration to be omitted?