Sass Interactive Shell

You can work easily with SassScript by using the interactive shell: a REPL (Read-Eval-Print Loop) that lets you type SassScript expressions and see their results immediately, without compiling a file.

This is useful for experimenting with arithmetic, color functions, variables, and built-in modules before committing them to a stylesheet.

Starting the Shell

Run the shell with the Sass command line and the --interactive flag (abbreviated -i):

$ sass --interactive
# or shorthand:
$ sass -i

You are dropped into a prompt (>>) where each expression you type is evaluated and its result is printed:

>> 1px + 1in
97px

Type exit or press Ctrl+D to leave the shell.

Basic Arithmetic

The shell evaluates SassScript arithmetic with full unit handling:

>> 2px + 2px + 2px
6px

>> 1in + 1in
2in

>> 1in
96px

>> 10px * 2
20px

>> 100px / 2
50px

Variables

The interactive shell supports variables. You can assign a value and reference it later in the same session:

>> $primary: #3498db
#3498db

>> $padding: 20px
20px

>> $padding + 10px
30px

>> darken($primary, 10%)
#2481c8

Using Built-in Modules

The shell also supports @use rules, so you can load Sass's built-in modules and call their functions:

>> @use "sass:map"

>> $map: ("width": 100px, "height": 70px)
("width": 100px, "height": 70px)

>> map.get($map, "width")
100px

>> @use "sass:math"

>> math.div(100, 3)
33.3333333333

>> math.ceil(3.2)
4

String functions

>> @use "sass:string"

>> string.length("hello world")
11

>> string.to-upper-case("hello")
"HELLO"

>> string.index("hello world", "o")
5

List functions

>> @use "sass:list"

>> $colors: red, green, blue

>> list.length($colors)
3

>> list.nth($colors, 2)
green

Color Operations

The legacy color math in your original example looked like this:

>> #555 + #555
#aaaaaa

This adds each RGB channel: 0x55 + 0x55 = 0xAA for red, green, and blue, producing #aaaaaa. The shell is a quick way to see the result, but, for new code, prefer the sass:color module:

>> @use "sass:color"

>> color.adjust(#555555, $lightness: 20%)
#888888

>> color.mix(#ff0000, #00ff00)
#808000

>> color.invert(#3498db)
#cb6724

Why the REPL is great for colors

Practical Examples in the REPL

Computing a layout value

>> $container: 1200px
1200px

>> $columns: 3
3

>> $gap: 20px
20px

>> math.div($container - ($gap * ($columns - 1)), $columns)
386.6666666667px

That's the width of each column in a 3-column grid inside a 1200px container with 20px gaps.

Testing a theme palette

>> @use "sass:color"

>> $primary: #2196f3
#2196f3

>> $primary-dark: color.adjust($primary, $lightness: -10%)
#0a8be9

>> $primary-light: color.adjust($primary, $lightness: 10%)
#3aa7f6

Tips

• Multi-line expressions: you can write expressions that span the same conceptual line; the REPL evaluates each prompt line as a single statement.
• Persisting work: the shell doesn't save anything. When you find a value or function call you like, copy it into your .scss file.
• Combine with @use: load any built-in module (sass:math, sass:color, sass:string, sass:list, sass:map, sass:meta, sass:selector) to access its functions interactively.
• Debugging: use the REPL to verify the output of a function before embedding it in a mixin. It's faster than recompiling a file each time.

Summary

The interactive shell is a hidden gem in the Sass toolchain: it's the fastest way to test a calculation, preview a color function, or verify a unit conversion without round-tripping through a stylesheet file.