less提取公共内容

304 阅读1分钟

公共组件书写方式
`.container-mixin() { .siteDrawerRenderInCurrentWrapper{ position: relative; height: 800px; padding: 48px; overflow: hidden; text-align: center;

    :global {
      .ant-drawer-mask {
        background: none;
      }

      .ant-drawer-content-wrapper .ant-drawer-content .ant-drawer-wrapper-body .ant-drawer-body {
        background-color: rgba(0, 0, 0, 0.2);
      }

      .ant-form-item>.ant-form-item-row>.ant-form-item-label>label {
        color: #ffffff;
      }

      // .ant-form-item .ant-form-item-control .ant-form-item-control-input .ant-form-item-control-input-content .ant-input {
      //   background: none;
      //   border-color: rgba(71, 71, 71, 1)
      // }

      .ant-form-item-control-input-content .ant-btn-default {
        background: none;

        span {
          color: #ffffff
        }
      }

      .ant-drawer-content {
        background: none;
      }

      .ant-table {
        background: rgba(255,255,255,0.2);
      }

      .ant-table-thead>tr>th {
        background: none;
      }

      .ant-table-tbody>tr.ant-table-row:hover>td {
        background: none !important;
      }

      .ant-pagination .ant-pagination-prev .ant-pagination-item-link,
      .ant-pagination-next .ant-pagination-item-link,
      .ant-pagination-item {
        background: none;
        background-color: none;
        color: #ffffff;
      }

    }
}

}`

引入代码的方式 @import (reference) url('../../../components/common.less'); 引入后应用代码的方式 .container-mixin()