ellie css test

elliecsstest

.header
  .logo
  .links
  nav
   ul
    li abc
    li 123

@mixin size($w, $h: $w) {
  height: $h;
  width: $w;
}
.header {
  background: #acc;
  &::after {
    clear: both;
    content: "";
    display: block;
  }
}
.logo {
  @include size(200px, 40px);
  background: #ccc;
  float: left;
}
.links {
  @include size(100px, 40px);
  background: #000;
  float: right;
}
nav {
  float: left;
  text-align: center;
  width: calc(100% - 300px);
  & li {
    display: inline-block;
  }
}

@media screen and (max-width: 800px) {
  nav {
    background: #caa;
    width: 100%;
  }
}