Pug + SCSS simple

index.pug

h1 horsin' around

-var n = 0
-var things = ["🐧", "🌈","🎯", "🐴"]
ul
  while n < 8 
   li
      a(href="http://www.google.com")= - (n > 3) ? things[n-(n-3)] : things[n]
      
   -n++
  

pug-scss-simple.markdown

Pug + SCSS simple

A Pen by Matthew Orndoff on CodePen.

License.

style.scss

$green: #bada55;

html,body {
   height: 100%;
   background-image: linear-gradient(to right, #92fe9d 0%, #00c9ff 100%);
}

h1 {
   text-align: center;
   text-decoration: underline;
   color: #eee;
   text-transform: uppercase;
   text-shadow: black 2px 5px;
}

li {
   width: 100px;
   height: 100px;
   //background-color: $green;
   background: rgba(255, 255, 255, 0.2);
   box-shadow: 0 0 5px rgba(0, 2, 0, 0.3);
   list-style: none;
   font-family: "Helvetica Neue";
   font-size: 4rem;
   //text-align: center;
   display: flex; 
   justify-content: center; 
   align-items: center; 
   border: 0px solid;
   border-radius: 50%; 
   padding: 5px;
   margin: 5px;
      
}

li a {
   text-decoration: none;
}


ul {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-around;
   height: 50%;   
   align-items: center;
}