安装sass(css预处理语言)

nodejs安装

npm i node-sass sass-loader -S

语法

参考sass使用方法

组件中使用

<style lang="scss" scoped>
@import "@/assets/styles/mixin.scss";
.header-box {
  width: 100%;
  background-image: -webkit-linear-gradient(#000, #121212);
  background-image: linear-gradient(#000, #121212);
  .black-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    // position: relative;
    .logo {
      height: 100%;
      h1 {
        height: 100%;
        display: flex;
        align-items: center;
        a {
          background: url(/static/images/global-logo-red@2x.png) no-repeat 50%;
          background-size: cover;
          background-position: 0 0;
          width: 50px;
          height: 40px;
          display: inline-block;
        }
      }
    }
    .right-box {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      width: 800px;
      .input-search {
        width: 305px;
      }
      > a {
        color: #c8c8c8;
        margin-left: 40px;
        margin-right: 30px;
        &:hover {
          color: #fff;
        }
      }
      .user-and-cart {
        height: 100%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        &:before {
          background: hsla(0, 0%, 100%, 0.2);
          content: " ";
          width: 1px;
          height: 20px;
          position: absolute;
          display: flex;
          align-items: center;
          // top: 4px;
          left: 0;
          margin-left: 20px;
        }
        > div {
          margin-left: 40px;
        }
        .user {
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;

          .user-warpper {
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
            width: 168px;
            background: #fff;
            border-radius: 8px;
            position: absolute;
            left: -71px;
            top: 37px;
            z-index: 32;
            display: none;
            ul li {
              border-top: 1px solid #f5f5f5;
              height: 50px;
              line-height: 50px;
              text-align: center;
            }
            ul li:nth-child(1) {
              border-top: none;
              height: 90px;
              .user-avatar {
                > div {
                  height: 46px;
                  width: 46px;
                  margin: 20px auto -5px;
                }
                .avatar {
                  display: block;
                  border-radius: 50%;
                  background-repeat: no-repeat;
                  width: 100%;
                  height: 100%;
                  background-size: cover;
                }
              }
            }
            ul li a {
              color: black;
              display: block;

              &:hover {
                background: rgba($color: #000000, $alpha: 0.03);
              }
            }
            // 小白箭头
            &:before {
              @include white-corner(-12px, 71px);
            }
          }
          > a {
            display: inline-block;
            height: 20px;
            width: 20px;
            background: url(/static/images/account-icon@2x.32d87deb02b3d1c3cc5bcff0c26314ac.png);
            background-repeat: no-repeat;
            background-position: -155px 0;
            transition: none 0.15s ease-out;
          }
          &:hover {
            .user-warpper {
              display: block;
            }
            a {
              background-position: -5px 0;
            }
          }
        }
        .cart {
          position: relative;
          > a {
            display: inline-block;
            height: 20px;
            width: 20px;
            background: url(/static/images/account-icon@2x.32d87deb02b3d1c3cc5bcff0c26314ac.png)
              no-repeat -156px -20px;
            transition: none 0.15s ease-out;
            &:hover {
              background-position: -6px -20px;
            }
          }
          .cart-num {
            height: 20px;
            width: 20px;
            display: inline-block;
            position: absolute;
            background-image: radial-gradient(#eb746b, #e25147);
            border-radius: 50%;
            line-height: 20px;
            text-align: center;
            color:#fff;
          }
          .cart-wrapper {
            display: block;
            width: 360px;
            background: #fff;
            position: absolute;
            z-index: 32;
            border-radius: 8px;
            left: -326px;
            top: 38px;
            box-shadow:0 20px 40px rgba(0, 0, 0, 0.15);
            &:before {
              @include white-corner(-12px,326px);
            }
            .cart-detail{
              
            }
          }
        }
      }
    }
  }
  //   .white-header {  }
}
</style>