CodePen

HTML

            
                <h1>[Sass] <code>()</code> and <code>null</code> are different</h1>
<p class="sum"><code>null</code> is quite equivalent to <code>(null)</code> or <code>unquote('')</code> resulting in an empty string as the first item of the list. In most cases, you should probably go with a clean declaration: <code>()</code>.<br/> See below for demonstration.</p>
  <p>Initializing 2 variables:</p>
  <pre class="language-css"><code>$a: ();
$b: null;</code></pre>
<p>Let's start by checking the type of variables.</p>
  <pre class="language-css"><code>type-of($a) -> list
type-of($b) -> null</code></pre>
  <p><code>length()</code> outputs different values.</p>
  <pre class="language-css"><code>length($a) -> 0
length($b) -> 1</code></pre>
  <p>Check value of first item in lists.</p>
  <pre class="language-css"><code>nth($a, 1) -> throws error
nth($b, 1) -> </code></pre>
  <p>Let's <code>append()</code> an item to each list.</p>
  <pre class="language-css"><code>$a: append($a, "test");
$b: append($b, "test");</code></pre>
  <p>Let's try <code>length()</code> again.</p>
  <pre class="language-css"><code>length($a) -> 1
length($b) -> 2</code></pre>
  <p>Check <code>index()</code> of "test" item in lists.</p>
  <pre class="language-css"><code>index($a, "test") -> 1
index($b, "test") -> 2</code></pre>
  <p>Check value of first item in lists again.</p>
  <pre class="language-css"><code>nth($a, 1) -> "test"
nth($b, 1) -> </code></pre>
            
          
!
via HTML Inspector

CSS

            
              html {
  font: 1em/1.55 "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  padding: 1.5em;
}

pre, .sum {
  border: 1px solid #ddd;
  border-radius: .2em;
  line-height: 1.4;
}

.sum {
  padding: 1em;
  background: #EFEFEF;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................