Skip to content

Instantly share code, notes, and snippets.

@vaevictis
Created February 8, 2016 22:56
Show Gist options
  • Save vaevictis/cbcce60ba674f3dc18f4 to your computer and use it in GitHub Desktop.
Save vaevictis/cbcce60ba674f3dc18f4 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<nav>
<ul class="css-workshop-nav">
<li class="css-workshop-nav__item">The Workshop</li>
<li class="css-workshop-nav__item">2016 Schedule</li>
<li class="css-workshop-nav__item">About CSS Wizardry</li>
<li class="css-workshop-nav__item">Contact</li>
</ul>
</nav>
// ----
// libsass (v3.2.5)
// ----
html
box-sizing: border-box
*, *:before, *:after
box-sizing: inherit
.css-workshop-nav
display: flex
flex-direction: row
justify-content: space-between
background-color: green
font-family: comic-sans
color: pink
padding: 0
margin: 0
.css-workshop-nav__item
list-style-type: none
text-transform: uppercase
font-size: 20px
text-shadow: 1px 1px 1px #000
padding: 0 10px
border-right: 1px solid purple
&:last-child
border-right: none
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.css-workshop-nav {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: green;
font-family: comic-sans;
color: pink;
padding: 0;
margin: 0;
}
.css-workshop-nav__item {
list-style-type: none;
text-transform: uppercase;
font-size: 20px;
text-shadow: 1px 1px 1px #000;
padding: 0 10px;
border-right: 1px solid purple;
}
.css-workshop-nav__item:last-child {
border-right: none;
}
<nav>
<ul class="css-workshop-nav">
<li class="css-workshop-nav__item">The Workshop</li>
<li class="css-workshop-nav__item">2016 Schedule</li>
<li class="css-workshop-nav__item">About CSS Wizardry</li>
<li class="css-workshop-nav__item">Contact</li>
</ul>
</nav>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment