Question

我只是创建.scss文件来设置网站样式。在此.scss中将使用具有不同类名的4个差异网页。这是我的样品。

.my-login {
  .my-login__aside {
    width: 605px;
    padding: 3rem 3.5rem;
    background-repeat: no-repeat;
    background-size: cover;

    .my-login__logo {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
  }
}

我的问题是“是否可以在不创建更多语句的情况下将我当前的.scss复制到其他名称？”

webpack编译我的.scss文件时，我想要这样的结果。

.my-login {
  .my-login__aside {
    width: 605px;
    padding: 3rem 3.5rem;
    background-repeat: no-repeat;
    background-size: cover;

    .my-login__logo {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
  }
}

.my-register {
  .my-register__aside {
    width: 605px;
    padding: 3rem 3.5rem;
    background-repeat: no-repeat;
    background-size: cover;

    .my-register__logo {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
  }
}

.my-verify {
  .my-verify__aside {
    width: 605px;
    padding: 3rem 3.5rem;
    background-repeat: no-repeat;
    background-size: cover;

    .my-verify__logo {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
  }
}

.my-reset {
  .my-reset__aside {
    width: 605px;
    padding: 3rem 3.5rem;
    background-repeat: no-repeat;
    background-size: cover;

    .my-reset__logo {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
  }
}

Answer 1

最后，我可以使用循环功能来做到这一点。

$pages: login register verify reset;
@each $page in $pages {
  .my-#{$page} {
    .my-#{$page}__aside {
      width: 605px;
      padding: 3rem 3.5rem;
      background-repeat: no-repeat;
      background-size: cover;

      .my-#{$page}__logo {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
      }
    }
  }
}

我可以创建多个CSS类名称作为一条语句吗？

1 个答案: