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 CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

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.

            
              <h1>HEX <span class="color-Crimson">colors</span> with Sass map</h1>
<ul>
    <li class="color-AliceBlue"></li>
    <li class="color-AntiqueWhite"></li>
    <li class="color-Aqua"></li>
    <li class="color-Aquamarine"></li>
    <li class="color-Azure"></li>
    <li class="color-Beige"></li>
    <li class="color-Bisque"></li>
    <li class="color-Black negative"></li>
    <li class="color-BlanchedAlmond"></li>
    <li class="color-Blue"></li>
    <li class="color-BlueViolet"></li>
    <li class="color-Brown"></li>
    <li class="color-BurlyWood"></li>
    <li class="color-CadetBlue"></li>
    <li class="color-Chartreuse"></li>
    <li class="color-Chocolate"></li>
    <li class="color-Coral"></li>
    <li class="color-CornflowerBlue"></li>
    <li class="color-Cornsilk"></li>
    <li class="color-Crimson"></li>
    <li class="color-DarkBlue negative"></li>
    <li class="color-DarkCyan"></li>
    <li class="color-DarkGoldenRod"></li>
    <li class="color-DarkGray"></li>
    <li class="color-DarkGreen"></li>
    <li class="color-DarkKhaki"></li>
    <li class="color-DarkMagenta"></li>
    <li class="color-DarkOliveGreen"></li>
    <li class="color-DarkOrange"></li>
    <li class="color-DarkOrchid"></li>
    <li class="color-DarkRed"></li>
    <li class="color-DarkSalmon"></li>
    <li class="color-DarkSeaGreen"></li>
    <li class="color-DarkSlateBlue"></li>
    <li class="color-DarkSlateGray"></li>
    <li class="color-DarkTurquoise"></li>
    <li class="color-DarkViolet"></li>
    <li class="color-DeepPink"></li>
    <li class="color-DeepSkyBlue"></li>
    <li class="color-DimGray"></li>
    <li class="color-DodgerBlue"></li>
    <li class="color-FireBrick"></li>
    <li class="color-FloralWhite"></li>
    <li class="color-ForestGreen"></li>
    <li class="color-Gainsboro"></li>
    <li class="color-GhostWhite"></li>
    <li class="color-Gold"></li>
    <li class="color-GoldenRod"></li>
    <li class="color-Gray"></li>
    <li class="color-Green"></li>
    <li class="color-GreenYellow"></li>
    <li class="color-HoneyDew"></li>
    <li class="color-HotPink"></li>
    <li class="color-IndianRed"></li>
    <li class="color-Indigo negative"></li>
    <li class="color-Ivory"></li>
    <li class="color-Khaki"></li>
    <li class="color-Lavender"></li>
    <li class="color-LavenderBlush"></li>
    <li class="color-LawnGreen"></li>
    <li class="color-LemonChiffon"></li>
    <li class="color-LightBlue"></li>
    <li class="color-LightCoral"></li>
    <li class="color-LightCyan"></li>
    <li class="color-LightGoldenRodYellow"></li>
    <li class="color-LightGray"></li>
    <li class="color-LightGreen"></li>
    <li class="color-LightPink"></li>
    <li class="color-LightSalmon"></li>
    <li class="color-LightSeaGreen"></li>
    <li class="color-LightSkyBlue"></li>
    <li class="color-LightSlateGray"></li>
    <li class="color-LightSteelBlue"></li>
    <li class="color-LightYellow"></li>
    <li class="color-Lime"></li>
    <li class="color-LimeGreen"></li>
    <li class="color-Linen"></li>
    <li class="color-Magenta"></li>
    <li class="color-Maroon"></li>
    <li class="color-MediumAquaMarine"></li>
    <li class="color-MediumBlue negative"></li>
    <li class="color-MediumOrchid"></li>
    <li class="color-MediumPurple"></li>
    <li class="color-MediumSeaGreen"></li>
    <li class="color-MediumSlateBlue"></li>
    <li class="color-MediumSpringGreen"></li>
    <li class="color-MediumTurquoise"></li>
    <li class="color-MediumVioletRed"></li>
    <li class="color-MidnightBlue negative"></li>
    <li class="color-MintCream"></li>
    <li class="color-MistyRose"></li>
    <li class="color-Moccasin"></li>
    <li class="color-NavajoWhite"></li>
    <li class="color-Navy negative"></li>
    <li class="color-OldLace"></li>
    <li class="color-Olive"></li>
    <li class="color-OliveDrab"></li>
    <li class="color-Orange"></li>
    <li class="color-OrangeRed"></li>
    <li class="color-Orchid"></li>
    <li class="color-PaleGoldenRod"></li>
    <li class="color-PaleGreen"></li>
    <li class="color-PaleTurquoise"></li>
    <li class="color-PaleVioletRed"></li>
    <li class="color-PapayaWhip"></li>
    <li class="color-PeachPuff"></li>
    <li class="color-Peru"></li>
    <li class="color-Pink"></li>
    <li class="color-Plum"></li>
    <li class="color-PowderBlue"></li>
    <li class="color-Purple"></li>
    <li class="color-Red"></li>
    <li class="color-RosyBrown"></li>
    <li class="color-RoyalBlue"></li>
    <li class="color-SaddleBrown"></li>
    <li class="color-Salmon"></li>
    <li class="color-SandyBrown"></li>
    <li class="color-SeaGreen"></li>
    <li class="color-SeaShell"></li>
    <li class="color-Sienna"></li>
    <li class="color-Silver"></li>
    <li class="color-SkyBlue"></li>
    <li class="color-SlateBlue"></li>
    <li class="color-SlateGray"></li>
    <li class="color-Snow"></li>
    <li class="color-SpringGreen"></li>
    <li class="color-SteelBlue"></li>
    <li class="color-Tan"></li>
    <li class="color-Teal"></li>
    <li class="color-Thistle"></li>
    <li class="color-Tomato"></li>
    <li class="color-Turquoise"></li>
    <li class="color-Violet"></li>
    <li class="color-Wheat"></li>
    <li class="color-White"></li>
    <li class="color-WhiteSmoke"></li>
    <li class="color-Yellow"></li>
    <li class="color-YellowGreen"></li>
</ul>
            
          
!
            
              //list assigned to the variable: Map
$colors: (
  AliceBlue:#F0F8FF,
  AntiqueWhite:#FAEBD7,
  Aqua:#00FFFF,
  Aquamarine:#7FFFD4,
  Azure:#F0FFFF,
  Beige:#F5F5DC,
  Bisque:#FFE4C4,
  Black:#000000,
  BlanchedAlmond:#FFEBCD,
  Blue:#0000FF,
  BlueViolet:#8A2BE2,
  Brown:#A52A2A,
  BurlyWood:#DEB887,
  CadetBlue:#5F9EA0,
  Chartreuse:#7FFF00,
  Chocolate:#D2691E,
  Coral:#FF7F50,
  CornflowerBlue:#6495ED,
  Cornsilk:#FFF8DC,
  Crimson:#DC143C,
  DarkBlue:#00008B,
  DarkCyan:#008B8B,
  DarkGoldenRod:#B8860B,
  DarkGray:#A9A9A9,
  DarkGreen:#006400,
  DarkKhaki:#BDB76B,
  DarkMagenta:#8B008B,
  DarkOliveGreen:#556B2F,
  DarkOrange:#FF8C00,
  DarkOrchid:#9932CC,
  DarkRed:#8B0000,
  DarkSalmon:#E9967A,
  DarkSeaGreen:#8FBC8F,
  DarkSlateBlue:#483D8B,
  DarkSlateGray:#2F4F4F,
  DarkTurquoise:#00CED1,
  DarkViolet:#9400D3,
  DeepPink:#FF1493,
  DeepSkyBlue:#00BFFF,
  DimGray:#696969,
  DodgerBlue:#1E90FF,
  FireBrick:#B22222,
  FloralWhite:#FFFAF0,
  ForestGreen:#228B22,
  Gainsboro:#DCDCDC,
  GhostWhite:#F8F8FF,
  Gold:#FFD700,
  GoldenRod:#DAA520,
  Gray:#808080,
  Green:#008000,
  GreenYellow:#ADFF2F,
  HoneyDew:#F0FFF0,
  HotPink:#FF69B4,
  IndianRed:#CD5C5C,
  Indigo:#4B0082,
  Ivory:#FFFFF0,
  Khaki:#F0E68C,
  Lavender:#E6E6FA,
  LavenderBlush:#FFF0F5,
  LawnGreen:#7CFC00,
  LemonChiffon:#FFFACD,
  LightBlue:#ADD8E6,
  LightCoral:#F08080,
  LightCyan:#E0FFFF,
  LightGoldenRodYellow:#FAFAD2,
  LightGray:#D3D3D3,
  LightGreen:#90EE90,
  LightPink:#FFB6C1,
  LightSalmon:#FFA07A,
  LightSeaGreen:#20B2AA,
  LightSkyBlue:#87CEFA,
  LightSlateGray:#778899,
  LightSteelBlue:#B0C4DE,
  LightYellow:#FFFFE0,
  Lime:#00FF00,
  LimeGreen:#32CD32,
  Linen:#FAF0E6,
  Magenta:#FF00FF,
  Maroon:#800000,
  MediumAquaMarine:#66CDAA,
  MediumBlue:#0000CD,
  MediumOrchid:#BA55D3,
  MediumPurple:#9370DB,
  MediumSeaGreen:#3CB371,
  MediumSlateBlue:#7B68EE,
  MediumSpringGreen:#00FA9A,
  MediumTurquoise:#48D1CC,
  MediumVioletRed:#C71585,
  MidnightBlue:#191970,
  MintCream:#F5FFFA,
  MistyRose:#FFE4E1,
  Moccasin:#FFE4B5,
  NavajoWhite:#FFDEAD,
  Navy:#000080,
  OldLace:#FDF5E6,
  Olive:#808000,
  OliveDrab:#6B8E23,
  Orange:#FFA500,
  OrangeRed:#FF4500,
  Orchid:#DA70D6,
  PaleGoldenRod:#EEE8AA,
  PaleGreen:#98FB98,
  PaleTurquoise:#AFEEEE,
  PaleVioletRed:#DB7093,
  PapayaWhip:#FFEFD5,
  PeachPuff:#FFDAB9,
  Peru:#CD853F,
  Pink:#FFC0CB,
  Plum:#DDA0DD,
  PowderBlue:#B0E0E6,
  Purple:#800080,
  Red:#FF0000,
  RosyBrown:#BC8F8F,
  RoyalBlue:#4169E1,
  SaddleBrown:#8B4513,
  Salmon:#FA8072,
  SandyBrown:#F4A460,
  SeaGreen:#2E8B57,
  SeaShell:#FFF5EE,
  Sienna:#A0522D,
  Silver:#C0C0C0,
  SkyBlue:#87CEEB,
  SlateBlue:#6A5ACD,
  SlateGray:#708090,
  Snow:#FFFAFA,
  SpringGreen:#00FF7F,
  SteelBlue:#4682B4,
  Tan:#D2B48C,
  Teal:#008080,
  Thistle:#D8BFD8,
  Tomato:#FF6347,
  Turquoise:#40E0D0,
  Violet:#EE82EE,
  Wheat:#F5DEB3,
  White:#FFFFFF,
  WhiteSmoke:#F5F5F5,
  Yellow:#FFFF00,
  YellowGreen:#9ACD32
);

//Loop over the map
@each $colorname, $bgcolor  in $colors {
  .color-#{$colorname}{
    background: $bgcolor;
    &:after{
      content:"#{$colorname}";
    }
  }
}

//Styling the pen
body {
  margin: 0;
  padding: 3em;
  background: #222;
  font-family: lato, sans-serif;
}
h1{
  color:#fff;
  font-size: 3rem;
  margin-bottom: 1em;
  span{
    font-family: lato-light, sans-serif;
    padding: 0 10px;
    &:after{
      content:"" !important;//sorry for this ;)
    }
  }
}
ul {
 
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  text-align: center;
}

li {
  margin-bottom: 0.5em;
  padding: .5em;
  width:calc(100% / 8);
  height: 1em;
  display: inline-block;  
  background: pink;
  border-radius:2px;
  overflow:hidden;
  text-overflow:ellipsis;
}

.negative{
  color: #fff;
}
            
          
!
999px
Loading ..................

Console