highlight.sass

    html,
    body,
    ul,
    ol
      margin:  0
      padding: 0

    @import reset
    body
      font: 100% Helvetica, sans-serif
      background-color: #efefef

    $font-stack:    Helvetica, sans-serif
    $primary-color: #333

    body
      font: 100% $font-stack
      color: $primary-color
    .container
      width: 100%

    article[role="main"]
      float: left
      width: 600px / 960px * 100%

    %message-shared
      border: 1px solid #ccc
      padding: 10px
      color: #333

    .message
      @extend %message-shared

    .success
      @extend %message-shared
      border-color: green

    =transform($property)
      -webkit-transform: $property
      -ms-transform: $property
      transform: $property
    .box
      +transform(rotate(30deg))

      // This comment won't be included in the CSS.
       This is also commented out.
      #a
    /* But this comment will, except in compressed mode.

    /* It can also contain interpolation:
       1 + 1 = #{1 + 1}
      1 + 1 = #{1 + 1}
     1 + 1 = #{1 + 1}
    #a

    // But this comment will, except in compressed mode.

    // It can also contain interpolation:
       1 + 1 = #{1 + 1}
      1 + 1 = #{1 + 1}
     1 + 1 = #{1 + 1}
    #a

    /*! This comment will be included even in compressed mode.

    #a

    /**/

    p .sans
      font: Helvetica, /* Inline comments must be closed. */ sans-serif

    p .sans
      font/*comment*/: Helvetica, /* Inline comments must be closed. */ sans-serif // comment

    /// Computes an exponent.
    ///
    /// @param {number} $base
    ///   The number to multiply by itself.
    /// @param {integer (unitless)} $exponent
    ///   The number of `$base`s to multiply together.
    /// @return {number} `$base` to the power of `$exponent`.
    @function pow($base, $exponent)
      $result: 1
      @for $_ from 1 through $exponent
        $result: $result * $base

      @return $result

    $roboto-font-path: "../fonts/roboto"

    @font-face
        // This is parsed as a normal function call that takes a quoted string.
        src: url("#{$roboto-font-path}/Roboto-Thin.woff2") format("woff2")
        src: url($roboto-font-path + "/Roboto-Light.woff2") format("woff2")
        src: url(#{$roboto-font-path}/Roboto-Regular.woff2) format("woff2")

        font-family: "Roboto"
        font-weight: 100

    .logo
      $width: 800px
      width: $width
      position: absolute
      left: calc(50% - #{$width / 2})
      top: 0

    $padding: 12px

    .post
      // Since these max() calls don't use any Sass features other than
      // interpolation, they're compiled to CSS max() calls.
      padding-left: max(#{$padding}, env(safe-area-inset-left))
      padding-right: max(#{$padding}, env(safe-area-inset-right))

    .sidebar
      // Since these refer to a Sass variable without interpolation, they call
      // Sass's built-in max() function.
      padding-left: max($padding, 20px)
      padding-right: max($padding, 20px)

    .circle
      $size: 100px
      width: $size
      height: $size
      border-radius: $size / 2

    @mixin prefix($property, $value, $prefixes)
      @each $prefix in $prefixes
        -#{$prefix}-#{$property}: $value

      #{$property}: $value

    .gray
      @include prefix(filter, grayscale(50%), moz webkit)

    .enlarge
      font-size: 14px
      transition:
        property: font-size
        duration: 4s
        delay: 2s

      &:hover
        font-size: 36px

    .info-page
      margin: auto
        bottom: 10px
        top: 2px

    $rounded-corners: false

    .button
      border: 1px solid black
      border-radius: if($rounded-corners, 5px, null)

    $primary: #81899b
    $accent: #ab2e
    $warn: #dfa612aa

    :root
      --primary: #{$primary}
      --accent: #{$accent}
      --warn: #{$warn}

      // Even though this looks like a Sass variable, it's valid CSS so it's not
      // evaluated.
      --consumed-by-js: $primary

    $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto
    $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas

    :root
      --font-family-sans-serif: #{inspect($font-family-sans-serif)}
      --font-family-monospace: #{inspect($font-family-monospace)}

    .alert
      // The parent selector can be used to add pseudo-classes to the outer
      // selector.
      &:hover
        font-weight: bold

      // It can also be used to style the outer selector in a certain context, such
      // as a body set to use a right-to-left language.
      [dir=rtl] &
        margin-left: 0
        margin-right: 10px

      // You can even use it as an argument to pseudo-class selectors.
      :not(&)
        opacity: 0.8

    @mixin unify-parent($child)
      @at-root #{selector-unify(&, $child)}
        @content

    .wrapper .field
      @include unify-parent("input")

    @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)

    .accordion
      max-width: 600px
      margin: 4rem auto

      &__copy
        display: none
        padding: 1rem 1.5rem 2rem 1.5rem
        line-height: 1.6
        font-size: 14px

        &--open
          display: block

    .alert:hover, %strong-alert
      font-weight: bold

    %strong-alert:hover
      color: red

    %toolbelt
      box-sizing: border-box
      border-top: 1px rgba(#000, .12) solid

      &:hover
        border: 2px rgba(#000, .5) solid

    .action-buttons
      @extend %toolbelt
      color: #4285f4

    $border-dark: rgba($base-color, 0.88)
    $black: #000 !default
    $border-radius: 0.25rem !default
    $box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default
    $box-shadow: 0 0.5rem 1rem rgba($black, blue($black)) !default
    $border-radius: 0.1rem

    @import 'library'

    $global-variable: global value

      // This would fail, because $local-variable isn't in scope:
      // local: $local-variable

    $theme-colors: ("success": #28a745, "info": #17a2b8, "warning": #ffc107)

    .alert
      // Instead of $theme-color-#{warning}
      background-color: map-get($theme-colors, "warning")

    @mixin corner-icon($name, $top-or-bottom, $left-or-right)
      .icon-#{$name}
        background-image: url("/icons/#{$name}.svg")
        position: absolute
        #{$top-or-bottom}: 0
        #{$left-or-right}: 0

    @include corner-icon("mail", top, right)

    @mixin inline-animation($duration)
      $name: inline-#{unique-id()}

      @keyframes #{$name}
        @content

      animation-name: $name
      animation-duration: $duration
      animation-iteration-count: infinite

    .pulse
      @include inline-animation(2s)
        from
          background-color: yellow
        to
          background-color: red

    .example
      unquoted: #{"string"}

      & &
        padding:
          bottom: 0
          left: 0

    // style.sass
    @import 'foundation/code', 'foundation/lists'

    @import "theme.css"
    @import "http://fonts.googleapis.com/css?family=Droid+Sans"
    @import url(theme)
    @import "landscape" screen and (orientation: landscape)

    @mixin google-font($family)
      @import url("http://fonts.googleapis.com/css?family=#{$family}")

    @include google-font("Droid Sans")

    @mixin horizontal-list
      @include reset-list

      li
        display: inline-block
        margin:
          left: -2px
          right: 2em

    nav ul
      @include horizontal-list

    @mixin rtl($property, $ltr-value, $rtl-value)
      #{$property}: $ltr-value

      [dir=rtl] &
        #{$property}: $rtl-value

    .sidebar
      @include rtl(float, left, right)

    @mixin replace-text($image, $x: 50%, $y: 50%)
      text-indent: -99999em
      overflow: hidden
      text-align: left

      background:
        image: $image
        repeat: no-repeat
        position: $x $y

    .mail-icon
      @include replace-text(url("/images/mail.svg"), 0)

    @include order(150px, "input.name", "input.address", "input.zip")

    @mixin syntax-colors($args...)
      @debug keywords($args)  // (string: #080, comment: #800, $variable: $60b)

      @each $name, $color in keywords($args)
        pre span.stx-#{$name}
          color: $color

    @include syntax-colors($string: #080, $comment: #800, $variable: #60b)

    @mixin media($types...)
      @each $type in $types
        @media #{$type}
          @content($type)

    @include media(screen, print) using ($type)
      h1
        font-size: 40px
        @if $type == print
          font-family: Calluna

    =reset-list
      margin: 0
      padding: 0
      list-style: none

    =horizontal-list
      +reset-list

      li
        display: inline-block
        margin:
          left: -2px
          right: 2em

    nav ul
      +horizontal-list
    @function pow($base, $exponent)
      $result: 1
      @for $_ from 1 through $exponent
        $result: $result * $base

      @return $result

    .sidebar
      float: left
      margin-left: pow(4, 3) * 1px

    @function sum($numbers...)
      $sum: 0
      @each $number in $numbers
        $sum: $sum + $number

      @return $sum

    .micro
      width: sum(50px, 30px, 100px)
    @function str-insert($string, $insert, $index)
      // Avoid making new strings if we don't need to.
      @if str-length($string) == 0
        @return $insert

      $before: str-slice($string, 0, $index)
      $after: str-slice($string, $index)
      @return $before + $insert + $after

    .error
      border: 1px #f00
      background-color: #fdd

      &--serious
        @extend .error
        border-width: 3px

    @mixin reflexive-position($property, $value)
      @if $property != left and $property != right
        @error "Property #{$property} must be either left or right."

      $left-value: if($property == right, initial, $value)
      $right-value: if($property == right, $value, initial)

      left: $left-value
      right: $right-value
      [dir=rtl] &
        left: $right-value
        right: $left-value

    $known-prefixes: webkit, moz, ms, o

    @mixin prefix($property, $value, $prefixes)
      @each $prefix in $prefixes
        @if not index($known-prefixes, $prefix)
          @warn "Unknown prefix #{$prefix}."

        -#{$prefix}-#{$property}: $value

      #{$property}: $value

    .tilt
      // Oops, we typo'd "webkit" as "wekbit"!
      @include prefix(transform, rotate(15deg), wekbit ms)

    @mixin inset-divider-offset($offset, $padding)
      $divider-offset: (2 * $padding) + $offset
      @debug "divider offset: #{$divider-offset}"

      margin-left: $divider-offset
      width: calc(100% - #{$divider-offset})

    @mixin unify-parent($child)
      @at-root #{selector-unify(&, $child)}
        @content

    .square-av
      @include avatar(100px, $circle: false)
    .circle-av
      @include avatar(100px, $circle: true)

    @mixin theme-colors($light-theme: true)
      @if $light-theme
        background-color: $light-background
        color: $light-text
      @else
        background-color: $dark-background
        color: $dark-text

    .banner
      @include theme-colors($light-theme: true)
      body.dark &
        @include theme-colors($light-theme: false)

    @mixin triangle($size, $color, $direction)
      height: 0
      width: 0

      border-color: transparent
      border-style: solid
      border-width: $size / 2

      @if $direction == up
        border-bottom-color: $color
      @else if $direction == right
        border-left-color: $color
      @else if $direction == down
        border-top-color: $color
      @else if $direction == left
        border-right-color: $color
      @else
        @error "Unknown direction #{$direction}."

    @each $size in $sizes
      .icon-#{$size}
        font-size: $size
        height: $size
        width: $size

    $icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f")

    @each $name, $glyph in $icons
      .icon-#{$name}:before
        display: inline-block
        font-family: "Icon Font"
        content: $glyph

    $icons: "eye" "\f112" 12px, "start" "\f12e" 16px, "stop" "\f12f" 10px

    @each $name, $glyph, $size in $icons
      .icon-#{$name}:before
        display: inline-block
        font-family: "Icon Font"
        content: $glyph
        font-size: $size

    @for $i from 1 through 3
      ul:nth-child(3n + #{$i})
        background-color: lighten($base-color, $i * 5%)

    /// Divides `$value` by `$ratio` until it's below `$base`.
    @function scale-below($value, $base, $ratio: 1.618)
      @while $value > $base
        $value: $value / $ratio
      @return $value

    @namespace svg url(http://www.w3.org/2000/svg)

    @font-face
      font-family: "Open Sans"
      src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2")

    @counter-style thumbs
      system: cyclic
      symbols: "\1F44D"

    @mixin sticky-position
      position: fixed
      @supports (position: sticky)
        position: sticky

    @media (hover: hover)
      .button:hover
        border: 2px solid black

        @media (color)
          border-color: #036

    @keyframes slide-in
      from
        margin-left: 100%
        width: 300%

      70%
        margin-left: 90%
        width: 150%

      to
        margin-left: 0%
        width: 100%

    @debug 100  // 100
    @debug 0.8  // 0.8
    @debug 16px  // 16px
    @debug 5px * 2px  // 10px*px (read "square pixels")
    @debug 5.2e3  // 5200
    @debug 6e-2  // 0.06
    @debug 4px * 6px  // 24px*px (read "square pixels")
    @debug 5px / 2s  // 2.5px/s (read "pixels per second")
    @debug 5px * 30deg / 2s / 24em  // 3.125px*deg/s*em
    //                                 (read "pixel-degrees per second-em")

    $degrees-per-second: 20deg/1s
    @debug $degrees-per-second  // 20deg/s
    @debug 1 / $degrees-per-second  // 0.05s/deg
    $transition-speed: 1s/50px

    @debug unquote(".widget:hover")  // .widget:hover
    @debug quote(bold)  // "bold"
    @debug 0.012345678912345  // 0.0123456789
    @debug 0.01234567891 == 0.01234567899  // true
    @debug 1.00000000009  // 1
    @debug 0.99999999991  // 1
    @debug "\""  // '"'
    @debug \.widget  // \.widget
    @debug "\a"  // "\a" (a string containing only a newline)
    @debug "line1\a line2"  // "line1\a line2" (foo and bar are separated by a newline)
    @debug "Nat + Liz \1F46D"  // "Nat + Liz 👭"
    @debug "Helvetica Neue"  // "Helvetica Neue"
    @debug "C:\\Program Files"  // "C:\\Program Files"
    @debug "\"Don't Fear the Reaper\""  // "\"Don't Fear the Reaper\""
    @debug "line1\a line2"  // "line1\a line2"

    $roboto-variant: "Mono"
    @debug "Roboto #{$roboto-variant}"  // "Roboto Mono"
    @debug bold  // bold
    @debug -webkit-flex  // -webkit-flex
    @debug --123  // --123

    $prefix: ms
    @debug -#{$prefix}-flex  // -ms-flex
    @debug \1F46D  // 👭
    @debug \21  // \!
    @debug \7Fx  // \7f x
    @debug str-length(\7Fx)  // 5
    @debug str-index("Helvetica Neue", "Helvetica")  // 1
    @debug str-index("Helvetica Neue", "Neue")  // 11
    @debug str-slice("Roboto Mono", -4)  // "Mono"
    @debug #f2ece4 // #f2ece4
    @debug #b37399aa // rgba(179, 115, 153, 67%)
    @debug midnightblue // #191970
    @debug rgb(204, 102, 153) // #c69
    @debug rgba(107, 113, 127, 0.8) // rgba(107, 113, 127, 0.8)
    @debug hsl(228, 7%, 86%) // #dadbdf
    @debug hsla(20, 20%, 85%, 0.7) // rgb(225, 215, 210, 0.7)
    $venus: #998099

    @debug scale-color($venus, $lightness: +15%) // #a893a8
    @debug mix($venus, midnightblue) // #594d85
    @debug nth(10px 12px 16px, 2)  // 12px
    @debug nth([line1, line2, line3], -1)  // line3
    $prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms)

    @function prefixes-for-browsers($browsers)
      $prefixes: ()
      @each $browser in $browsers
        $prefixes: append($prefixes, map-get($prefixes-by-browser, $browser))

      @return $prefixes

    @debug prefixes-for-browsers("firefox" "ie")  // moz ms
    @mixin syntax-colors($args...)
      @debug keywords($args)  // (string: #080, comment: #800, $variable: $60b)

      @each $name, $color in keywords($args)
        pre span.stx-#{$name}
          color: $color

    @include syntax-colors($string: #080, $comment: #800, $variable: #60b);
    $font-weights: ("regular": 400, "medium": 500, "bold": 700)

    @debug map-get($font-weights, "medium")  // 500
    @debug map-get($font-weights, "extra-bold")  // null
    $icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f")

    @each $name, $glyph in $icons
      .icon-#{$name}:before
        display: inline-block
        font-family: "Icon Font"
        content: $glyph

    $prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms)

    @mixin add-browser-prefix($browser, $prefix)
      $prefixes-by-browser: map-merge($prefixes-by-browser, ($browser: $prefix))

    @include add-browser-prefix("opera", o)
    @debug $prefixes-by-browser
    // ("firefox": moz, "safari": webkit, "ie": ms, "opera": o)
    @debug 1px == 2px  // false
    @debug 1px == 1px  // true
    @debug 10px < 3px  // false
    @debug comparable(100px, 3in)  // true

    @debug str-index("Helvetica Neue", "Roboto")  // null
    @debug map-get(("large": 20px), "small")  // null
    @debug &  // null
    $fonts: ("serif": "Helvetica Neue", "monospace": "Consolas")

    h3
      font: 18px bold map-get($fonts, "sans")

    $fonts: ("serif": "Helvetica Neue", "monospace": "Consolas")

    h3
      font:
        size: 18px
        weight: bold
        family: map-get($fonts, "sans")

    copy of $list with all elements for which $condition returns `true`
    /// removed.
    @function remove-where($list, $condition)
      $new-list: ()
      $separator: list-separator($list)
      @each $element in $list
        @if not call($condition, $element)
          $new-list: append($new-list, $element, $separator: $separator)

      @return $new-list

    $fonts: Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif

    content
      @function contains-helvetica($string)
        @return str-index($string, "Helvetica")

      font-family: remove-where($fonts, get-function("contains-helvetica"))

    @debug 1px == 1px  // true
    @debug 1px != 1em  // true
    @debug 1 != 1px  // true
    @debug 96px == 1in  // true

    @debug "Helvetica" == Helvetica  // true
    @debug "Helvetica" != "Arial"  // true

    @debug hsl(34, 35%, 92.1%) == #f2ece4  // true
    @debug rgba(179, 115, 153, 0.5) != rgba(179, 115, 153, 0.8)  // true

    @debug (5px 7px 10px) == (5px 7px 10px)  // true
    @debug (5px 7px 10px) != (10px 14px 20px)  // true
    @debug (5px 7px 10px) != (5px, 7px, 10px)  // true
    @debug (5px 7px 10px) != [5px 7px 10px]  // true

    $theme: ("venus": #998099, "nebula": #d2e1dd)
    @debug $theme == ("venus": #998099, "nebula": #d2e1dd)  // true
    @debug $theme != ("venus": #998099, "iron": #dadbdf)  // true

    @debug true == true  // true
    @debug true != false  // true
    @debug null != false  // true

    @debug get-function("rgba") == get-function("rgba")  // true
    @debug get-function("rgba") != get-function("hsla")  // true

    @debug 10s + 15s  // 25s
    @debug 1in - 10px  // 0.8958333333in
    @debug 5px * 3px  // 15px*px
    @debug (12px/4px)  // 3
    @debug 1in % 9px  // 0.0625in
    @debug 15px / 30px  // 15px/30px
    @debug (10px + 5px) / 30px  // 0.5

    $result: 15px / 30px
    @debug $result  // 0.5

    @function fifteen-divided-by-thirty()
      @return 15px / 30px

    @debug fifteen-divided-by-thirty()  // 0.5

    @debug (15px/30px)  // 0.5
    @debug (bold 15px/30px sans-serif)  // bold 15px/30px sans-serif
    @debug 15px/30px + 1  // 1.5

    @debug 4px * 6px  // 24px*px (read "square pixels")
    @debug 5px / 2s  // 2.5px/s (read "pixels per second")
    @debug 5px * 30deg / 2s / 24em  // 3.125px*deg/s*em
    //                                 (read "pixel-degrees per second-em")

    $degrees-per-second: 20deg/1s
    @debug $degrees-per-second  // 20deg/s
    @debug 1 / $degrees-per-second  // 0.05s/deg
    @debug 100 > 50  // true
    @debug 10px < 17px  // true
    @debug 96px >= 1in  // true
    @debug 1000ms <= 1s  // true
    @debug "Helvetica" + " Neue"  // "Helvetica Neue"
    @debug sans- + serif  // sans-serif
    @debug #{10px + 5px} / 30px  // 15px/30px
    @debug sans - serif  // sans-serif

    @debug "Elapsed time: " + 10s  // "Elapsed time: 10s";
    @debug true + " is a boolean value"  // "true is a boolean value";

    @debug / 15px  // /15px
    @debug - moz  // -moz
    @debug not true  // false
    @debug not false  // true

    @debug true and true  // true
    @debug true and false  // false

    @debug true or false  // true
    @debug false or false  // false
    @debug var(--main-bg-color)  // var(--main-bg-color)

    $primary: #f2ece4
    $accent: #e1d7d2
    @debug radial-gradient($primary, $accent)  // radial-gradient(#f2ece4, #e1d7d2)
    @debug str-index("Helvetica Neue", "Helvetica")  // 1
    @debug str-index("Helvetica Neue", "Neue")  // 11
    @debug comparable(2px, 1px)  // true
    @debug comparable(100px, 3em)  // false
    @debug comparable(10cm, 3mm)  // true
    @debug append(10px 20px, 30px)  // 10px 20px 30px
    @debug append((blue, red), green)  // blue, red, green
    @debug append(10px 20px, 30px 40px)  // 10px 20px (30px 40px)
    @debug append(10px, 20px, $separator: comma)  // 10px, 20px
    @debug append((blue, red), green, $separator: space)  // blue red green
    @mixin syntax-colors($args...)
      @debug keywords($args)  // (string: #080, comment: #800, $variable: $60b)

      @each $name, $color in keywords($args)
        pre span.stx-#{$name}
          color: $color

    @include syntax-colors($string: #080, $comment: #800, $variable: #60b);

    $font-weights: ("regular": 400, "medium": 500, "bold": 700)

    @debug map-values($font-weights)  // 400, 500, 700

    .icon-#{$name}
      position: absolute
      #{$top-or-bottom}: 0
      -#{$prefix}-#{$property}: $value
      .icon-#{$name}
        position: absolute
        #{$top-or-bottom}: 0
        -#{$prefix}-#{$property}-image: $value