example.scss

@import "assets/styles/reset.scss";
$padding: 20px 20px;
$border-color: #eee;
$main-color: #1890ff;
$shadow: 0 2px 8px #f0f1f2;
.site-page {
  background: #fff;
  min-height: 100vh;
}
.site-header {
  box-shadow: $shadow;
  min-height: 60px;
  width: 100%;
  .vui-logo {
    display: flex;
    justify-content: left;
    align-items: center;
    min-height: 60px;
    padding: 10px 20px;
    img {width: 100px;}
    h1 {color: #314659; margin-left: 10px; }
    &::after {
      width: 1px;
      height: 26px;
      background-color: #ccc;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(50%);
    }
  }
}
.site-sider {
  //border-right: 1px solid $border-color;
  padding: 60px 0;
  h2 {
    margin: $padding;
    font-size: 18px;
    border-bottom: 1px solid $border-color;
  }
  ul {
    min-width: 12em;
    li {
      > a {
        display: block;
        padding: 8px 20px;
        color: #314659;
        &:hover { color: #314659; }
        &.active {
          background-color: #e6f7ff;
          color: darken(#8eb6c0, 20%);
        }
      }
    }
  }
}
.site-content {
  padding: $padding;
}
.site-footer {
  text-align: center;
  font-size: 12px;
  color: #666;
  padding: 16px 0;
  box-shadow: $shadow;
}
pre {
  font-family: "Fira Code Medium", Consolas, monospace;
  font-size: 14px;
}