是否可以将Scss转换为Material-UI样式格式？

Question

我有一个SCSS文件，我想将其转换为Material-UI样式。但是，我不知道如何将这些代码行更改为Material样式理解的方式。

div {
  $var: 25;

  @for $i from 1 through 25 {
    &:nth-child(#{$i}) {
      -webkit-transform: translate(#{$var}px, 0);
      -moz-transform: translate(#{$var}px, 0);
      $var: $var + 5;
    }
  }
}

Answer 1

我认为您需要为此转换为纯CSS。如果您无法安装SASS / SCSS，则可以使用Codepen。

将代码粘贴到CSS框中（将其设置为SCSS），然后可以通过右侧的下拉菜单查看编译的CSS。

您的代码是一个输出以下内容的简单循环：

div:first-child {
    -webkit-transform: translate(25px);
    -moz-transform: translate(25px)
}

div:nth-child(2) {
    -webkit-transform: translate(30px);
    -moz-transform: translate(30px)
}

div:nth-child(3) {
    -webkit-transform: translate(35px);
    -moz-transform: translate(35px)
}

div:nth-child(4) {
    -webkit-transform: translate(40px);
    -moz-transform: translate(40px)
}

div:nth-child(5) {
    -webkit-transform: translate(45px);
    -moz-transform: translate(45px)
}

div:nth-child(6) {
    -webkit-transform: translate(50px);
    -moz-transform: translate(50px)
}

div:nth-child(7) {
    -webkit-transform: translate(55px);
    -moz-transform: translate(55px)
}

div:nth-child(8) {
    -webkit-transform: translate(60px);
    -moz-transform: translate(60px)
}

div:nth-child(9) {
    -webkit-transform: translate(65px);
    -moz-transform: translate(65px)
}

div:nth-child(10) {
    -webkit-transform: translate(70px);
    -moz-transform: translate(70px)
}

div:nth-child(11) {
    -webkit-transform: translate(75px);
    -moz-transform: translate(75px)
}

div:nth-child(12) {
    -webkit-transform: translate(80px);
    -moz-transform: translate(80px)
}

div:nth-child(13) {
    -webkit-transform: translate(85px);
    -moz-transform: translate(85px)
}

div:nth-child(14) {
    -webkit-transform: translate(90px);
    -moz-transform: translate(90px)
}

div:nth-child(15) {
    -webkit-transform: translate(95px);
    -moz-transform: translate(95px)
}

div:nth-child(16) {
    -webkit-transform: translate(100px);
    -moz-transform: translate(100px)
}

div:nth-child(17) {
    -webkit-transform: translate(105px);
    -moz-transform: translate(105px)
}

div:nth-child(18) {
    -webkit-transform: translate(110px);
    -moz-transform: translate(110px)
}

div:nth-child(19) {
    -webkit-transform: translate(115px);
    -moz-transform: translate(115px)
}

div:nth-child(20) {
    -webkit-transform: translate(120px);
    -moz-transform: translate(120px)
}

div:nth-child(21) {
    -webkit-transform: translate(125px);
    -moz-transform: translate(125px)
}

div:nth-child(22) {
    -webkit-transform: translate(130px);
    -moz-transform: translate(130px)
}

div:nth-child(23) {
    -webkit-transform: translate(135px);
    -moz-transform: translate(135px)
}

div:nth-child(24) {
    -webkit-transform: translate(140px);
    -moz-transform: translate(140px)
}

div:nth-child(25) {
    -webkit-transform: translate(145px);
    -moz-transform: translate(145px)
}