null
null Contents Syntax Overview Parsing a Stylesheet Structure of a Stylesheet Comments Special Functions Style Rules Overview Property Declarations Parent Selector Placeholder Selectors Variables Interpolation At-Rules Overview @use @forward @import @mixin and @include @function @extend @error @warn @debug @at-root Flow Control Overview @if and @else @each @for @while From CSS Values Overview Numbers Strings Colors Lists Maps true and false null Calculations Functions Operators Overview Equality Relational Numeric String Boolean Built-In Modules Overview sass:color sass:list sass:map sass:math sass:meta sass:selector sass:string Breaking Changes Overview / as Division Color Units Extending Compound Selectors CSS Variable Syntax Command Line Overview Dart Sass Ruby Sass Migrator JavaScript API
The value null is the only value of its type. It represents the absence of a value, and is often returned by functions to indicate the lack of a result.
SCSS Sass SCSS Syntax @use ‘sass:map’; @use ‘sass:string’; @debug string.index(‘Helvetica Neue’, ‘Roboto’); // null @debug map.get((‘large’: 20px), ‘small’); // null @debug &; // null Sass Syntax @use ‘sass:map’ @use ‘sass:string’ @debug string.index(‘Helvetica Neue’, ‘Roboto’) // null @debug map.get((‘large’: 20px), ‘small’) // null @debug & // null
If a list contains a null, that null is omitted from the generated CSS.
SCSS Sass CSS SCSS Syntax $fonts: (‘serif’: ‘Helvetica Neue’, ‘monospace’: ‘Consolas’); h3 { font: 18px bold map-get($fonts, ‘sans’); } Sass Syntax $fonts: (‘serif’: ‘Helvetica Neue’, ‘monospace’: ‘Consolas’) h3 font: 18px bold map-get($fonts, ‘sans’) CSS Output h3 { font: 18px bold; }
If a property value is null, that property is omitted entirely.
SCSS Sass CSS SCSS Syntax $fonts: (‘serif’: ‘Helvetica Neue’, ‘monospace’: ‘Consolas’); h3 { font: { size: 18px; weight: bold; family: map-get($fonts, ‘sans’); } } Sass Syntax $fonts: (‘serif’: ‘Helvetica Neue’, ‘monospace’: ‘Consolas’) h3 font: size: 18px weight: bold family: map-get($fonts, ‘sans’) CSS Output h3 { font-size: 18px; font-weight: bold; }
null is also falsey, which means it counts as false for any rules or operators that take booleans. This makes it easy to use values that can be null as conditions for @if and if().
SCSS Sass CSS SCSS Syntax @mixin app-background($color) { #{if(&, ‘&.app-background’, ‘.app-background’)} { background-color: $color; color: rgba(#fff, 0.75); } } @include app-background(#036); .sidebar { @include app-background(#c6538c); } Sass Syntax @mixin app-background($color) #{if(&, ‘&.app-background’, ‘.app-background’)} background-color: $color color: rgba(#fff, 0.75) @include app-background(#036) .sidebar @include app-background(#c6538c) CSS Output .app-background { background-color: #036; color: rgba(255, 255, 255, 0.75); } .sidebar.app-background { background-color: #c6538c; color: rgba(255, 255, 255, 0.75); } Current Releases: Dart Sass 1.52.1 LibSass 3.6.5 Ruby Sass ⚰ Implementation Guide
Holiday -