1.7.g — Functions & Operators

In one sentence: SCSS functions compute and return values (unlike mixins, which emit declarations), and operators let you do math, string concatenation, and logic directly in your stylesheets.

Navigation: ← 1.7.f — Inheritance & Extends · 1.7.h — Control Directives →

---

1. Custom functions

@function rem($px, $base: 16) {
  @return calc($px / $base * 1rem);
}

h1 {
  font-size: rem(32);    // 2rem
}

p {
  font-size: rem(18);    // 1.125rem
}

Part	Role
@function	Declares the function
Arguments	$px required, $base optional with default
@return	Sends a value back — required (every code path must return)

Functions vs mixins reminder

	@function	@mixin
Produces	A single value	CSS declarations
Used as	Part of a property value	Standalone via @include
Returns	Via @return	No return — emits CSS

---

2. Arithmetic operators

Operator	Meaning	Example	Result
+	Addition	10px + 5px	15px
-	Subtraction	100% - 20px	use calc() for mixed units
*	Multiplication	1.5 * 16px	24px
/	Division	math.div(100, 3)	33.333…
%	Modulo	10 % 3	1

The / operator change

In modern Dart Sass, / is deprecated for division. Use the math.div() function instead:

@use 'sass:math';

.column {
  width: math.div(100%, 3);    // 33.3333%
}

Plain / now only works in CSS contexts (font: 16px/1.5) or inside calc().

---

3. Comparison operators

Operator	Meaning	Example
==	Equal	$size == 'lg'
!=	Not equal	$theme != 'dark'
<	Less than	$width < 768px
>	Greater than	$cols > 12
<=	Less or equal	$index <= $total
>=	Greater or equal	$size >= 1rem

Used primarily in @if conditionals and @while loops.

---

4. Logical operators

Operator	Meaning	Example
and	Both true	$a > 0 and $b > 0
or	Either true	$theme == 'dark' or $theme == 'dim'
not	Negate	not $disabled

@mixin theme-color($theme, $element) {
  @if $theme == 'dark' and $element == 'bg' {
    background: #1e293b;
  } @else if $theme == 'dark' and $element == 'text' {
    color: #f1f5f9;
  }
}

---

5. String operations

$path: '/images/';
$file: 'hero.jpg';

.hero {
  background-image: url($path + $file);   // url("/images/hero.jpg")
}

String interpolation with #{}:

$side: 'left';

.panel {
  margin-#{$side}: 1rem;    // margin-left: 1rem
}

Interpolation is needed when using variables in selectors, property names, or @media queries.

---

6. Built-in function modules

Dart Sass organizes built-in functions into modules loaded with @use:

Module	Examples	Purpose
sass:math	math.div(), math.round(), math.ceil(), math.floor(), math.clamp(), math.abs()	Numeric operations
sass:string	string.to-upper-case(), string.slice(), string.index(), string.length()	String manipulation
sass:color	color.adjust(), color.scale(), color.mix()	Color manipulation (see 1.7.i)
sass:list	list.append(), list.nth(), list.length(), list.join()	List operations
sass:map	map.get(), map.merge(), map.keys(), map.values(), map.has-key()	Map operations
sass:meta	meta.type-of(), meta.inspect()	Introspection and debugging

@use 'sass:math';
@use 'sass:string';

.container {
  width: math.clamp(300px, 50%, 1200px);
}

---

7. Practical examples

Calculate column widths

@use 'sass:math';

@function col-width($cols, $total: 12) {
  @return math.div(100%, $total) * $cols;
}

.col-4  { width: col-width(4);  }   // 33.333%
.col-6  { width: col-width(6);  }   // 50%
.col-8  { width: col-width(8);  }   // 66.667%

Strip unit

@use 'sass:math';

@function strip-unit($value) {
  @return math.div($value, $value * 0 + 1);
}

// strip-unit(16px) → 16

Responsive font size

@function fluid-font($min-size, $max-size, $min-vw: 320px, $max-vw: 1200px) {
  $slope: math.div($max-size - $min-size, $max-vw - $min-vw);
  @return clamp(#{$min-size}, #{$min-size} + #{$slope} * (100vw - #{$min-vw}), #{$max-size});
}

h1 {
  font-size: fluid-font(1.5rem, 3rem);
}

---

8. Key takeaways

1. @function computes and returns a value; @mixin emits declarations. Know which to use.
2. Use math.div() for division — the / operator is deprecated for math in Dart Sass.
3. Comparison (==, <, >) and logical (and, or, not) operators power conditionals.
4. #{$var} interpolation embeds variables in selectors, property names, and media queries.
5. Built-in modules (sass:math, sass:color, sass:list, sass:map) are loaded with @use — do not rely on global function names in new code.

---

Explain-It Challenge

Explain without notes:

1. Why does SASS distinguish between functions and mixins — what does each produce?
2. Why is math.div(100%, 3) preferred over 100% / 3 in modern Dart Sass?
3. Write a simple @function from memory that converts pixels to rem.

---

Navigation: ← 1.7.f — Inheritance & Extends · 1.7.h — Control Directives →