html
  head
    title Sass Sheets Effect
  body
    section.content
      .standard.sheets Standard
      .many.sheets Many Sheets
      .few.sheets Few Sheets
      .short.sheets Short Sheets
      .left-red.sheets Left Oriented Red Sheets
      .long-left.sheets Long Sheets
      .left.sheets Left Oriented Sheets
      .left-short-red.sheets Left Oriented Short Red Sheets
View Compiled
@import "bourbon"
@import "neat" 

@function sheets-effect($color:white, $orientation:right, $amount:3, $sheet-size:2px)
  $alpha: 0.3
  $bottom: 1px
  $side: null
  $modifier: null
  @if $orientation == left
    $side: -1px
    $modifier: -1
  @else
    $side: 1px
    $modifier: 1
  $ret: #{$side} #{$bottom} 0 #{rgba(darken($color,90%), $alpha)}
  @for $i from 1 through $amount
    $bottom: $bottom + $sheet-size
    $side: $side + $sheet-size * $modifier
    $alpha: $alpha + 0.025
    $ret: $ret, #{$side} #{$bottom} 0 #{$color}
    $bottom: $bottom + 1
    $side: $side + 1 * $modifier
    $ret: $ret, #{$side} #{$bottom} 0 #{rgba(darken($color,90%), $alpha)}
  @return $ret

section.content
  +outer-container()
  height: 100%
  background-color: lightblue
  padding: 20px
.sheets
  +span-columns(2)
  +omega(4n)
  margin-top: 30px
  height: 150px
  background-color: white
.standard
  box-shadow: sheets-effect()
.few
  box-shadow: sheets-effect(white, right, 1)
.left
  box-shadow: sheets-effect(white, left)
.many
  box-shadow: sheets-effect(white, right, 6)
.left-short-red
  box-shadow: sheets-effect(red, left, 3, 1px)
.left-red
  box-shadow: sheets-effect(red, left)
.long-left
  box-shadow: sheets-effect(white, left, 3, 4px)
.short
  box-shadow: sheets-effect(white, right, 3, 1px)
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.