index.slim

span class="outlined" OUTLINED
br
span class="engraved" ENGRAVED
br
span class="embossed" EMBOSSED
br
span class="rainbows" RAINBOWS
br
span class="stickers" STICKERS
br
span class="thickness" THICKNESS

SASS-Text-Style-Practice.markdown

SASS Text Style Practice

Forked from Matt Schneider III's Pen SASS Text Style Practice.

A Pen by Captain Anonymous on CodePen.

License.

style.sass

$back-color: darkslategrey
$font-color: #8AA
$font-stack: raleway

@function surround-shadow ($width, $fade, $color)
  $value: ''
  @for $i from 0 through $width
    @for $j from 0 through $width
      $value: $value + '#{$i}px #{$j}px #{$fade}px #{$color}, '
      $value: $value + '-#{$i}px #{$j}px #{$fade}px #{$color}, '
      $value: $value + '-#{$i}px -#{$j}px #{$fade}px #{$color}, '
      $value: $value + '#{$i}px -#{$j}px #{$fade}px #{$color}, '
  $value: $value + '0px 0px 0px hsla(0,0%,0%,0)'
  @return unquote($value)

@function engrave-shadow ($bevel, $depth)
  $value: ''
  @for $i from 0 through $bevel
    $value: $value + '-#{$i/2}px #{$i/2}px hsla(0,0%,100%,#{$depth/3}), '
    $value: $value + '#{$i/2}px -#{$i/2}px hsla(0,0%,0%,#{$depth*2}), '
  $value: $value + '0px 0px #{$bevel*10}px hsla(0,0%,100%,0.1)'
  @return unquote($value)

@function emboss-shadow ($bevel, $depth)
  $value: ''
  @for $i from 0 through $bevel
    $value: $value + '-#{$i/2}px #{$i/2}px hsla(0,0%,0%,#{$depth}), '
    $value: $value + '#{$i/2}px -#{$i/2}px hsla(0,0%,100%,#{$depth}), '
  $value: $value + '0px 0px #{$bevel*1.5}px hsla(0,0%,0%,1)'
  @return unquote($value)

@function rainbow-shadow ($cycle, $depth, $sat, $bri)
  $value: ''
  @for $i from 1 through $cycle
    $value: $value + '-#{$depth * $i}px #{$depth * $i}px 0 hsla(#{$i * (360/$cycle)}, #{$sat}, #{$bri}, 1), '
  $value: $value + '0px 0px 0px hsla(0,0%,0%,0)'
  @return unquote($value)

@function thicken-shadow ($depth, $color)
  $value: ''
  @for $i from 1 through $depth
    $shadedcolor: darken($color, 20 + ($i*5))
    $value: $value + '0px #{$i}px 0 #{$shadedcolor}, '
  $value: $value + '0px 0px 0px hsla(0,0%,0%,0)'
  @return unquote($value)

body
  background-color: $back-color
  font: 45px $font-stack
  color: $font-color
  letter-spacing: 10px
  text-align: center

.outlined
  color: $back-color
  text-shadow: surround-shadow(2, 0.1, black)
  
.engraved
  color: darken($back-color, 2)
  text-shadow: engrave-shadow(4, 0.1)
  
.embossed
  color: lighten($back-color, 1)
  text-shadow: emboss-shadow(3, 0.2)
  
.rainbows
  color: white
  text-shadow: rainbow-shadow(50, 0.2, 60%, 45%)
  
.stickers
  color: indigo
  text-shadow: surround-shadow(2, 0, #FFD), -4px 2px 2px black
  
.thickness
  color: #8AA
  text-shadow: thicken-shadow(3, #8AA), -4px 4px 6px black