cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class='grid'>
  <div class='sprite'>
  </div>
</div>
            
          
!
            
              $pixel: 10px;
$gridColor: #888;
$color: #000 #aaa #ddd #048 #07b #fff #800 #c00 #c88;

// Pixel parameters: <$pixel*x-pos> <$pixel*y-pos> <color>
$row1:
  ($pixel * 6) $pixel nth($color, 1),
  ($pixel * 7) $pixel nth($color, 1),
  ($pixel * 8) $pixel nth($color, 1),
  ($pixel * 9) $pixel nth($color, 1),
  ($pixel * 10) $pixel nth($color, 1),
  ($pixel * 11) $pixel nth($color, 1);

$row2:
  ($pixel * 4) ($pixel * 2) nth($color, 1),
  ($pixel * 5) ($pixel * 2) nth($color, 1),
  ($pixel * 6) ($pixel * 2) nth($color, 8),
  ($pixel * 7) ($pixel * 2) nth($color, 6),
  ($pixel * 8) ($pixel * 2) nth($color, 6),
  ($pixel * 9) ($pixel * 2) nth($color, 8),
  ($pixel * 10) ($pixel * 2) nth($color, 6),
  ($pixel * 11) ($pixel * 2) nth($color, 9),
  ($pixel * 12) ($pixel * 2) nth($color, 1),
  ($pixel * 13) ($pixel * 2) nth($color, 1);

$row3:
  ($pixel * 3) ($pixel * 3) nth($color, 1),
  ($pixel * 4) ($pixel * 3) nth($color, 6),
  ($pixel * 5) ($pixel * 3) nth($color, 6),
  ($pixel * 6) ($pixel * 3) nth($color, 9),
  ($pixel * 7) ($pixel * 3) nth($color, 6),
  ($pixel * 8) ($pixel * 3) nth($color, 6),
  ($pixel * 9) ($pixel * 3) nth($color, 6),
  ($pixel * 10) ($pixel * 3) nth($color, 6),
  ($pixel * 11) ($pixel * 3) nth($color, 6),
  ($pixel * 12) ($pixel * 3) nth($color, 6),
  ($pixel * 13) ($pixel * 3) nth($color, 3),
  ($pixel * 14) ($pixel * 3) nth($color, 1);

$row4:
  ($pixel * 2) ($pixel * 4) nth($color, 1),
  ($pixel * 3) ($pixel * 4) nth($color, 6),
  ($pixel * 4) ($pixel * 4) nth($color, 8),
  ($pixel * 5) ($pixel * 4) nth($color, 6),
  ($pixel * 6) ($pixel * 4) nth($color, 6),
  ($pixel * 7) ($pixel * 4) nth($color, 6),
  ($pixel * 8) ($pixel * 4) nth($color, 6),
  ($pixel * 9) ($pixel * 4) nth($color, 6),
  ($pixel * 10) ($pixel * 4) nth($color, 6),
  ($pixel * 11) ($pixel * 4) nth($color, 6),
  ($pixel * 12) ($pixel * 4) nth($color, 9),
  ($pixel * 13) ($pixel * 4) nth($color, 8),
  ($pixel * 14) ($pixel * 4) nth($color, 3),
  ($pixel * 15) ($pixel * 4) nth($color, 1);

$row5:
  ($pixel * 2) ($pixel * 5) nth($color, 1),
  ($pixel * 3) ($pixel * 5) nth($color, 6),
  ($pixel * 4) ($pixel * 5) nth($color, 6),
  ($pixel * 5) ($pixel * 5) nth($color, 6),
  ($pixel * 6) ($pixel * 5) nth($color, 6),
  ($pixel * 7) ($pixel * 5) nth($color, 5),
  ($pixel * 8) ($pixel * 5) nth($color, 5),
  ($pixel * 9) ($pixel * 5) nth($color, 5),
  ($pixel * 10) ($pixel * 5) nth($color, 5),
  ($pixel * 11) ($pixel * 5) nth($color, 6),
  ($pixel * 12) ($pixel * 5) nth($color, 6),
  ($pixel * 13) ($pixel * 5) nth($color, 6),
  ($pixel * 14) ($pixel * 5) nth($color, 3),
  ($pixel * 15) ($pixel * 5) nth($color, 1);

$row6:
  $pixel ($pixel * 6) nth($color, 1),
  ($pixel * 2) ($pixel * 6) nth($color, 8),
  ($pixel * 3) ($pixel * 6) nth($color, 9),
  ($pixel * 4) ($pixel * 6) nth($color, 6),
  ($pixel * 5) ($pixel * 6) nth($color, 6),
  ($pixel * 6) ($pixel * 6) nth($color, 5),
  ($pixel * 7) ($pixel * 6) nth($color, 6),
  ($pixel * 8) ($pixel * 6) nth($color, 4),
  ($pixel * 9) ($pixel * 6) nth($color, 4),
  ($pixel * 10) ($pixel * 6) nth($color, 5),
  ($pixel * 11) ($pixel * 6) nth($color, 5),
  ($pixel * 12) ($pixel * 6) nth($color, 6),
  ($pixel * 13) ($pixel * 6) nth($color, 6),
  ($pixel * 14) ($pixel * 6) nth($color, 8),
  ($pixel * 15) ($pixel * 6) nth($color, 7),
  ($pixel * 16) ($pixel * 6) nth($color, 1);

$row7:
  $pixel ($pixel * 7) nth($color, 1),
  ($pixel * 2) ($pixel * 7) nth($color, 6),
  ($pixel * 3) ($pixel * 7) nth($color, 6),
  ($pixel * 4) ($pixel * 7) nth($color, 6),
  ($pixel * 5) ($pixel * 7) nth($color, 5),
  ($pixel * 6) ($pixel * 7) nth($color, 6),
  ($pixel * 7) ($pixel * 7) nth($color, 4),
  ($pixel * 8) ($pixel * 7) nth($color, 1),
  ($pixel * 9) ($pixel * 7) nth($color, 1),
  ($pixel * 10) ($pixel * 7) nth($color, 4),
  ($pixel * 11) ($pixel * 7) nth($color, 5),
  ($pixel * 12) ($pixel * 7) nth($color, 5),
  ($pixel * 13) ($pixel * 7) nth($color, 6),
  ($pixel * 14) ($pixel * 7) nth($color, 3),
  ($pixel * 15) ($pixel * 7) nth($color, 2),
  ($pixel * 16) ($pixel * 7) nth($color, 1);

$row8:
  $pixel ($pixel * 8) nth($color, 1),
  ($pixel * 2) ($pixel * 8) nth($color, 6),
  ($pixel * 3) ($pixel * 8) nth($color, 6),
  ($pixel * 4) ($pixel * 8) nth($color, 6),
  ($pixel * 5) ($pixel * 8) nth($color, 5),
  ($pixel * 6) ($pixel * 8) nth($color, 4),
  ($pixel * 7) ($pixel * 8) nth($color, 1),
  ($pixel * 8) ($pixel * 8) nth($color, 1),
  ($pixel * 9) ($pixel * 8) nth($color, 1),
  ($pixel * 10) ($pixel * 8) nth($color, 1),
  ($pixel * 11) ($pixel * 8) nth($color, 4),
  ($pixel * 12) ($pixel * 8) nth($color, 5),
  ($pixel * 13) ($pixel * 8) nth($color, 6),
  ($pixel * 14) ($pixel * 8) nth($color, 3),
  ($pixel * 15) ($pixel * 8) nth($color, 2),
  ($pixel * 16) ($pixel * 8) nth($color, 1);

$row9:
  $pixel ($pixel * 9) nth($color, 1),
  ($pixel * 2) ($pixel * 9) nth($color, 8),
  ($pixel * 3) ($pixel * 9) nth($color, 6),
  ($pixel * 4) ($pixel * 9) nth($color, 6),
  ($pixel * 5) ($pixel * 9) nth($color, 5),
  ($pixel * 6) ($pixel * 9) nth($color, 4),
  ($pixel * 7) ($pixel * 9) nth($color, 1),
  ($pixel * 8) ($pixel * 9) nth($color, 1),
  ($pixel * 9) ($pixel * 9) nth($color, 1),
  ($pixel * 10) ($pixel * 9) nth($color, 1),
  ($pixel * 11) ($pixel * 9) nth($color, 4),
  ($pixel * 12) ($pixel * 9) nth($color, 5),
  ($pixel * 13) ($pixel * 9) nth($color, 6),
  ($pixel * 14) ($pixel * 9) nth($color, 3),
  ($pixel * 15) ($pixel * 9) nth($color, 7),
  ($pixel * 16) ($pixel * 9) nth($color, 1);

$row10:
  $pixel ($pixel * 10) nth($color, 1),
  ($pixel * 2) ($pixel * 10) nth($color, 6),
  ($pixel * 3) ($pixel * 10) nth($color, 6),
  ($pixel * 4) ($pixel * 10) nth($color, 6),
  ($pixel * 5) ($pixel * 10) nth($color, 5),
  ($pixel * 6) ($pixel * 10) nth($color, 5),
  ($pixel * 7) ($pixel * 10) nth($color, 4),
  ($pixel * 8) ($pixel * 10) nth($color, 1),
  ($pixel * 9) ($pixel * 10) nth($color, 1),
  ($pixel * 10) ($pixel * 10) nth($color, 4),
  ($pixel * 11) ($pixel * 10) nth($color, 5),
  ($pixel * 12) ($pixel * 10) nth($color, 5),
  ($pixel * 13) ($pixel * 10) nth($color, 6),
  ($pixel * 14) ($pixel * 10) nth($color, 3),
  ($pixel * 15) ($pixel * 10) nth($color, 2),
  ($pixel * 16) ($pixel * 10) nth($color, 1);

$row11:
  $pixel ($pixel * 11) nth($color, 1),
  ($pixel * 2) ($pixel * 11) nth($color, 8),
  ($pixel * 3) ($pixel * 11) nth($color, 9),
  ($pixel * 4) ($pixel * 11) nth($color, 6),
  ($pixel * 5) ($pixel * 11) nth($color, 6),
  ($pixel * 6) ($pixel * 11) nth($color, 5),
  ($pixel * 7) ($pixel * 11) nth($color, 5),
  ($pixel * 8) ($pixel * 11) nth($color, 4),
  ($pixel * 9) ($pixel * 11) nth($color, 4),
  ($pixel * 10) ($pixel * 11) nth($color, 5),
  ($pixel * 11) ($pixel * 11) nth($color, 5),
  ($pixel * 12) ($pixel * 11) nth($color, 6),
  ($pixel * 13) ($pixel * 11) nth($color, 6),
  ($pixel * 14) ($pixel * 11) nth($color, 3),
  ($pixel * 15) ($pixel * 11) nth($color, 2),
  ($pixel * 16) ($pixel * 11) nth($color, 1);

$row12:
  ($pixel * 2) ($pixel * 12) nth($color, 1),
  ($pixel * 3) ($pixel * 12) nth($color, 6),
  ($pixel * 4) ($pixel * 12) nth($color, 6),
  ($pixel * 5) ($pixel * 12) nth($color, 6),
  ($pixel * 6) ($pixel * 12) nth($color, 6),
  ($pixel * 7) ($pixel * 12) nth($color, 5),
  ($pixel * 8) ($pixel * 12) nth($color, 5),
  ($pixel * 9) ($pixel * 12) nth($color, 5),
  ($pixel * 10) ($pixel * 12) nth($color, 5),
  ($pixel * 11) ($pixel * 12) nth($color, 6),
  ($pixel * 12) ($pixel * 12) nth($color, 6),
  ($pixel * 13) ($pixel * 12) nth($color, 9),
  ($pixel * 14) ($pixel * 12) nth($color, 3),
  ($pixel * 15) ($pixel * 12) nth($color, 1);

$row13:
  ($pixel * 2) ($pixel * 13) nth($color, 1),
  ($pixel * 3) ($pixel * 13) nth($color, 6),
  ($pixel * 4) ($pixel * 13) nth($color, 8),
  ($pixel * 5) ($pixel * 13) nth($color, 6),
  ($pixel * 6) ($pixel * 13) nth($color, 6),
  ($pixel * 7) ($pixel * 13) nth($color, 6),
  ($pixel * 8) ($pixel * 13) nth($color, 6),
  ($pixel * 9) ($pixel * 13) nth($color, 6),
  ($pixel * 10) ($pixel * 13) nth($color, 6),
  ($pixel * 11) ($pixel * 13) nth($color, 6),
  ($pixel * 12) ($pixel * 13) nth($color, 3),
  ($pixel * 13) ($pixel * 13) nth($color, 8),
  ($pixel * 14) ($pixel * 13) nth($color, 2),
  ($pixel * 15) ($pixel * 13) nth($color, 1);

$row14:
  ($pixel * 3) ($pixel * 14) nth($color, 1),
  ($pixel * 4) ($pixel * 14) nth($color, 3),
  ($pixel * 5) ($pixel * 14) nth($color, 3),
  ($pixel * 6) ($pixel * 14) nth($color, 3),
  ($pixel * 7) ($pixel * 14) nth($color, 3),
  ($pixel * 8) ($pixel * 14) nth($color, 3),
  ($pixel * 9) ($pixel * 14) nth($color, 3),
  ($pixel * 10) ($pixel * 14) nth($color, 8),
  ($pixel * 11) ($pixel * 14) nth($color, 3),
  ($pixel * 12) ($pixel * 14) nth($color, 3),
  ($pixel * 13) ($pixel * 14) nth($color, 2),
  ($pixel * 14) ($pixel * 14) nth($color, 1);

$row15:
  ($pixel * 4) ($pixel * 15) nth($color, 1),
  ($pixel * 5) ($pixel * 15) nth($color, 1),
  ($pixel * 6) ($pixel * 15) nth($color, 2),
  ($pixel * 7) ($pixel * 15) nth($color, 7),
  ($pixel * 8) ($pixel * 15) nth($color, 2),
  ($pixel * 9) ($pixel * 15) nth($color, 2),
  ($pixel * 10) ($pixel * 15) nth($color, 7),
  ($pixel * 11) ($pixel * 15) nth($color, 2),
  ($pixel * 12) ($pixel * 15) nth($color, 1),
  ($pixel * 13) ($pixel * 15) nth($color, 1);

$row16:
  ($pixel * 6) ($pixel * 16) nth($color, 1),
  ($pixel * 7) ($pixel * 16) nth($color, 1),
  ($pixel * 8) ($pixel * 16) nth($color, 1),
  ($pixel * 9) ($pixel * 16) nth($color, 1),
  ($pixel * 10) ($pixel * 16) nth($color, 1),
  ($pixel * 11) ($pixel * 16) nth($color, 1);

$sprite:
  $row1,
  $row2,
  $row3,
  $row4,
  $row5,
  $row6,
  $row7,
  $row8,
  $row9,
  $row10,
  $row11,
  $row12,
  $row13,
  $row14,
  $row15,
  $row16;

.grid {
  //background-image: linear-gradient(transparent ($pixel - 1), $gridColor $pixel, $gridColor), linear-gradient(90deg, transparent ($pixel - 1), $gridColor $pixel, $gridColor);
  //background-size: $pixel $pixel;
  //border: 1px solid $gridColor;
  overflow: hidden;
  width: $pixel * 16;
  height: $pixel * 16;
}

.sprite {
  width: $pixel;
  height: $pixel;
  transform: translate(-$pixel, -$pixel);
  box-shadow: $sprite;
}
            
          
!
999px
Loading ..................

Console