scss的妙用小技巧提高css的复用性!

很长一段时间没写过微信小程序, 最近想使用tailwindcss来开发简直是一场灾难

因为不支持 * 或者 > p元素等其他选择器, 往往需要自己去写但是写的又不规范, 新项目又要去新写之类

duck不必

可以使用 scss语法 来实现复用性, 如果之前没用过现在你看到了就是使用的好时机!

下面简单的语法可以提高复用性,也可以增加更多的其他class根据自己的需求

/* margin 类 */
/* margin-left 1px - 100px */
@for $i from 1 through 100 {
  .ml-#{$i} {
    margin-left: #{$i}px !important;
  }
}

/* padding 类 */
/* padding-left 1px - 100px */
@for $i from 1 through 100 {
  .pl-#{$i} {
    padding-left: #{$i}px !important;
  }
}

/* 圆角 */
@for $i from 1 through 50 {
  .rounded-#{$i} {
    border-radius: #{$i}px !important;
  }
}

/* 文字类 */
@for $i from 10 through 50 {
  .text-#{$i} {
    font-size: #{$i}px;
  }
}