123

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.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              .grid.clearfix
  .row
    %span.number.color1 WOOHOO!
    %span.number.color2 WOOHOO!
    %span.number.color3 WOOHOO!
    %span.number.color4 WOOHOO!
    %span.number.color5 WOOHOO!
    %span.number.color6 WOOHOO!
    %span.number.color7 WOOHOO!
    %span.number.color8 WOOHOO!
    %span.number.color9 WOOHOO!
    %span.number.color10 WOOHOO!
  
  .row
    %span.number.color11 WOOHOO!
    %span.number.color12 WOOHOO!
    %span.number.color13 WOOHOO!
    %span.number.color14 WOOHOO!
    %span.number.color15 WOOHOO!
    %span.number.color16 WOOHOO!
    %span.number.color17 WOOHOO!
    %span.number.color18 WOOHOO!
    %span.number.color19 WOOHOO!
    %span.number.color20 WOOHOO!

  .row
    %span.number.color21 WOOHOO!
    %span.number.color22 WOOHOO!
    %span.number.color23 WOOHOO!
    %span.number.color24 WOOHOO!
    %span.number.color25 WOOHOO!
    %span.number.color26 WOOHOO!
    %span.number.color27 WOOHOO!
    %span.number.color28 WOOHOO!
    %span.number.color29 WOOHOO!
    %span.number.color30 WOOHOO!

  .row
    %span.number.color31 WOOHOO!
    %span.number.color32 WOOHOO!
    %span.number.color33 WOOHOO!
    %span.number.color34 WOOHOO!
    %span.number.color35 WOOHOO!
    %span.number.color36 WOOHOO!
    %span.number.color37 WOOHOO!
    %span.number.color38 WOOHOO!
    %span.number.color39 WOOHOO!
    %span.number.color40 WOOHOO!

  .row
    %span.number.color41 WOOHOO!
    %span.number.color42 WOOHOO!
    %span.number.color43 WOOHOO!
    %span.number.color44 WOOHOO!
    %span.number.color45 WOOHOO!
    %span.number.color46 WOOHOO!
    %span.number.color47 WOOHOO!
    %span.number.color48 WOOHOO!
    %span.number.color49 WOOHOO!
    %span.number.color50 WOOHOO!

  .row
    %span.number.color51 WOOHOO!
    %span.number.color52 WOOHOO!
    %span.number.color53 WOOHOO!
    %span.number.color54 WOOHOO!
    %span.number.color55 WOOHOO!
    %span.number.color56 WOOHOO!
    %span.number.color57 WOOHOO!
    %span.number.color58 WOOHOO!
    %span.number.color59 WOOHOO!
    %span.number.color60 WOOHOO!

  .row
    %span.number.color61 WOOHOO!
    %span.number.color62 WOOHOO!
    %span.number.color63 WOOHOO!
    %span.number.color64 WOOHOO!
    %span.number.color65 WOOHOO!
    %span.number.color66 WOOHOO!
    %span.number.color67 WOOHOO!
    %span.number.color68 WOOHOO!
    %span.number.color69 WOOHOO!
    %span.number.color70 WOOHOO!

  .row
    %span.number.color71 WOOHOO!
    %span.number.color72 WOOHOO!
    %span.number.color73 WOOHOO!
    %span.number.color74 WOOHOO!
    %span.number.color75 WOOHOO!
    %span.number.color76 WOOHOO!
    %span.number.color77 WOOHOO!
    %span.number.color78 WOOHOO!
    %span.number.color79 WOOHOO!
    %span.number.color80 WOOHOO!

  .row
    %span.number.color81 WOOHOO!
    %span.number.color82 WOOHOO!
    %span.number.color83 WOOHOO!
    %span.number.color84 WOOHOO!
    %span.number.color85 WOOHOO!
    %span.number.color86 WOOHOO!
    %span.number.color87 WOOHOO!
    %span.number.color88 WOOHOO!
    %span.number.color89 WOOHOO!
    %span.number.color90 WOOHOO!

  .row
    %span.number.color91 WOOHOO!
    %span.number.color92 WOOHOO!
    %span.number.color93 WOOHOO!
    %span.number.color94 WOOHOO!
    %span.number.color95 WOOHOO!
    %span.number.color96 WOOHOO!
    %span.number.color97 WOOHOO!
    %span.number.color98 WOOHOO!
    %span.number.color99 WOOHOO!
    %span.number.color100 WOOHOO!

  .row
    %span.number.color101 WOOHOO!
    %span.number.color102 WOOHOO!
    %span.number.color103 WOOHOO!
    %span.number.color104 WOOHOO!
    %span.number.color105 WOOHOO!
    %span.number.color106 WOOHOO!
    %span.number.color107 WOOHOO!
    %span.number.color108 WOOHOO!
    %span.number.color109 WOOHOO!
    %span.number.color110 WOOHOO!

  .row
    %span.number.color111 WOOHOO!
    %span.number.color112 WOOHOO!
    %span.number.color113 WOOHOO!
    %span.number.color114 WOOHOO!
    %span.number.color115 WOOHOO!
    %span.number.color116 WOOHOO!
    %span.number.color117 WOOHOO!
    %span.number.color118 WOOHOO!
    %span.number.color119 WOOHOO!
    %span.number.color120 WOOHOO!

  .row
    %span.number.color121 WOOHOO!
    %span.number.color122 WOOHOO!
    %span.number.color123 WOOHOO!
    %span.number.color124 WOOHOO!
    %span.number.color125 WOOHOO!
    %span.number.color126 WOOHOO!
    %span.number.color127 WOOHOO!
    %span.number.color128 WOOHOO!
    %span.number.color129 WOOHOO!
    %span.number.color130 WOOHOO!
            
          
!
            
              @import "compass/css3";

/**=== Variables ===**/
$color1: AliceBlue;
$color2: AntiqueWhite;
$color3: Aqua;
$color4: Aquamarine;
$color5: Azure;
$color6: Beige;
$color7: Bisque;
$color8: Black;
$color9: BlanchedAlmond;
$color10: Blue;

$color11: BlueViolet;
$color12: Brown;
$color13: BurlyWood;
$color14: CadetBlue;
$color15: Chartreuse;
$color16: Chocolate;
$color17: Coral;
$color18: CornflowerBlue;
$color19: Cornsilk;
$color20: Crimson;

$color21: Cyan;
$color22: DarkBlue;
$color23: DarkCyan;
$color24: DarkGoldenrod;
$color25: DarkGray;
$color26: DarkGreen;
$color27: DarkKhaki;
$color28: DarkGray;
$color29: DarkMagenta;
$color30: DarkOliveGreen;

$color31: DarkOrange;
$color32: DarkOrchid;
$color33: DarkRed;
$color34: DarkSalmon;
$color35: DarkSeaGreen;
$color36: DarkSlateBlue;
$color37: DarkSlateGray;
$color38: DarkTurquoise;
$color39: DarkViolet;
$color40: DeepPink;

$color41: DeepSkyBlue;
$color42: DimGray;
$color43: DodgerBlue;
$color44: Firebrick;
$color45: FloralWhite;
$color46: ForestGreen;
$color47: Fuchsia;
$color48: Gainsboro;
$color49: GhostWhite;
$color50: Gold;

$color51: Goldenrod;
$color52: Gray;
$color53: Green;
$color54: GreenYellow;
$color55: Honeydew;
$color56: HotPink;
$color57: IndianRed;
$color58: Indigo;
$color59: Ivory;
$color60: Khaki;

$color51: Lavender;
$color52: LavenderBlush;
$color53: LawnGreen;
$color54: LemonChiffon;
$color55: LightBlue;
$color56: LightCoral;
$color57: LightCyan;
$color58: LightGoldenrodYellow;
$color59: LightGray;
$color60: LightGreen;

$color61: lightpink;
$color62: lightsalmon;
$color63: lightseagreen;
$color64: lightskyblue;
$color65: lightslategray;
$color66: lightsteelblue;
$color67: lightyellow;
$color68: lime;
$color69: magenta;
$color70: maroon;

$color71: mediumaquamarine;
$color72: mediumblue;
$color73: mediumorchid;
$color74: mediumpurple;
$color75: mediumseagreen;
$color76: mediumslateblue;
$color77: mediumspringgreen;
$color78: mediumturquoise;
$color79: mediumvioletred;
$color80: midnightblue;

$color81: mintcream;
$color82: mistyrose;
$color83: moccasin;
$color84: navajowhite;
$color85: navy;
$color86: oldlace;
$color87: olive;
$color88: olivedrab;
$color89: Orange;
$color90: Orangered;

$color91: orchid;
$color92: palegoldenrod;
$color93: palegreen;
$color94: paleturquoise;
$color95: palevioletred;
$color96: papayawhip;
$color97: peachpuff;
$color98: peru;
$color99: pink;
$color100: plum;

$color101: powderblue;
$color102: purple;
$color103: red;
$color104: rosybrown;
$color105: royalblue;
$color106: saddlebrown;
$color107: salmon;
$color108: sandybrown;
$color109: seagreen;
$color110: seashell;

$color111: sienna;
$color112: silver;
$color113: skyblue;
$color114: slateblue;
$color115: slategray;
$color116: snow;
$color117: springgreen;
$color118: steelblue;
$color119: tan;
$color120: teal;

$color121: thistle;
$color122: tomato;
$color123: turquoise;
$color124: violet;
$color125: wheat;
$color126: white;
$color127: whitesmoke;
$color128: yellow;
$color129: yellowgreen;
$color130: #BadA55;

$dark-text-default: #000 !default;
$light-text-default: #fff !default;

// For loop inumerator
$num: 0;

// Calculeate brightness of a given color.
@function brightness($color) {
  @return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)) / 255 * 100%;
}

// Compares contrast of a given color to the light/dark arguments and returns whichever is most "contrasty"
@function color-contrast($color, $dark: $dark-text-default, $light: $light-text-default) {
  @if $color == null {
    @return null;
  }
  @else {
    $color-brightness: brightness($color);  
    $light-text-brightness: brightness($light);
    $dark-text-brightness: brightness($dark);
    
    @return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark);  
  }
}

// Main styles
body * {
  box-sizing: border-box;
}
.grid {
  .number {
    float: left;
    width: 10%;
    padding: 25px 0 50px;
    position: relative;
    text-align: center;
    font-weight: bold;
    font-family: sans-serif;
  }
  // clearfix
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
}
.color-block {
  padding: 3px 6px;
  margin: 0;
}
@each $color in $color1, $color2, $color3, $color4, $color5, $color6, $color7, $color8, $color9, $color10, $color11, $color12, $color13, $color14, $color15, $color16, $color17, $color18, $color19, $color20, $color21, $color22, $color23, $color24, $color25, $color26, $color27, $color28, $color29, $color30, $color31, $color32, $color33, $color34, $color35, $color36, $color37, $color38, $color39, $color40, $color41, $color42, $color43, $color44, $color45, $color46, $color47, $color48, $color49, $color50, $color51, $color52, $color53, $color54, $color55, $color56, $color57, $color58, $color59, $color60, $color61, $color62, $color63, $color64, $color65, $color66, $color67, $color68, $color69, $color70, $color71, $color72, $color73, $color74, $color75, $color76, $color77, $color78, $color79, $color80, $color81, $color82, $color83, $color84, $color85, $color86, $color87, $color88, $color89, $color90, $color91, $color92, $color93, $color94, $color95, $color96, $color97, $color98, $color99, $color100, $color101, $color102, $color103, $color104, $color105, $color106, $color107, $color108, $color109, $color110, $color111, $color112, $color113, $color114, $color115, $color116, $color117, $color118, $color119, $color120, $color121, $color122, $color123, $color124, $color125, $color126, $color127, $color128, $color129, $color130 {
  $num: $num + 1;
  .color#{$num} {
    background: $color;
    color: color-contrast($color);
    &:after {
      content: "#{$color}";
      position: absolute;
      bottom: 22px;
      font-weight: normal;
      font-size: 14px;
      left: 50%;
      width: 100%;
      margin-left: -50%;
      line-height: 11px;
      white-space: pre;
    }
  }
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console