标签：预处理 sass height width background position 20px display 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>

标签：预处理,sass,height,width,background,position,20px,display,css
来源： https://www.cnblogs.com/fxm12138/p/13742799.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。