用tailwindcss的思想+scss手撸公有样式

源心锁

发布于 2022-08-12 11:27:56

7400

发布于 2022-08-12 11:27:56

文章被收录于专栏：前端魔法指南

前言

在了解了cssinjs之后，我对css框架的发展不由得产生了一些兴趣。浏览之下找到了tailwindcss，这设计非常惊艳，虽然咋一看非常非常丑陋，但是对于已经熟记规则的开发者，再借助vscode插件，带来的开发体验非常之棒

而稍加尝试之后，我想试着把tailwindcss引入到我现有的项目中，但是引入过程中，我发现对于一些微型项目，引入tailwindcss似乎不太划得来，尤其是我之前也喜欢写公有类以至于出现了css污染（撞得美满），已有的设计规范和微型项目不值得专门引入tailwindcss，所以我想着，对于这些玩意儿能否参照tailwindcss的思想手搓一些公有类出来

搓它吖的

那么我们现在将鼠标对准tailwindcss的外边距，我们认知中的margin在实际场景中做微调是非常有用的，而它显然包括四个属性，要想生成丰富的组合只靠css那只能无能狂怒了。所以下边用scss来完成这一目标

分析

看一下tailwindcss提供的这些类，持续往下翻我们就可以轻易明确外边距功能类的编写特点

m-1对应margin:0.25rem
-m-1对应margin:-0.25rem
mx-1对应margin:0 0.25rem
my-1对应margin:0.25rem 0
ml-1对应margin-left:0.25rem

嗷这么一看不是清晰明了：

要实现负号
要有四个方向任意组合
显然tailwindcss规定m-1换算成0.25rem，所以这更方便我们操作了。
头尾粒度，毕竟不可能做到面面俱到是伐，因为假设我们的margin的从0rem到24rem,然后每0.25rem分7个类出来，我们最终会出现672个类，其中可能很多类根本不会被用到，所以呢，适当得控制粒度是有必要的

代码

沿用tailwindcss的规则，我们在负号类的前边加-

@for $i from 1 through 12 {
  .m-#{$i}{
    margin: #{$i * 0.25}rem;
  }
  .-m-#{$i}{
    margin: #{$i * -0.25}rem;
  }
}

于是我们现在可以得到

接下来给四个方向任意组合

@for $i from 1 through 12 {
  .m-#{$i}{
    margin: #{$i * 0.25}rem;
  }
  .-m-#{$i}{
    margin: #{$i * -0.25}rem;
  }
  .my-#{$i}{
    margin: #{$i * 0.25}rem 0;
  }
  .mx-#{$i}{
    margin: 0 #{$i * 0.25}rem;
  }
  .-my-#{$i}{
    margin: #{$i * -0.25}rem 0;
  }
  .-mx-#{$i}{
    margin: 0 #{$i * -0.25}rem;
  }
  .-mt-#{$i}{
    margin-top: #{$i * -0.25}rem;
  }
  .mt-#{$i}{
    margin-top: #{$i * 0.25}rem;
  }
  .mb-#{$i}{
    margin-bottom: #{$i * 0.25}rem;
  }
  .-mb-#{$i}{
    margin-bottom: #{$i * -0.25}rem;
  }
  .mr-#{$i}{
    margin-right: #{$i * 0.25}rem;
  }
  .-mr-#{$i}{
    margin-right: #{$i * -0.25}rem;
  }
  .-ml-#{$i}{
    margin-left: #{$i * -0.25}rem;
  }
  .ml-#{$i}{
    margin-left: #{$i * 0.25}rem;
  }
}

再控制一下首尾的粒度

//这里包含一些原本的.m-0.5类似的类，但是发现就是.m-0.5是不符合css规范的，于是我这里用_代替.
@for $i from 1 through 3 {
  @if($i % 2 == 1){
    .m-#{floor($i/2)}_5{
      margin: #{$i / 2 * 0.25}rem;
    }
    .my-#{floor($i/2)}_5{
      margin: #{$i / 2 * 0.25}rem 0;
    }
    .mx-#{floor($i/2)}_5{
      margin: 0 #{$i / 2 * 0.25}rem;
    }
    .-my-#{floor($i/2)}_5{
      margin: #{$i / 2 * -0.25}rem 0;
    }
    .-mx-#{floor($i/2)}_5{
      margin: 0 #{$i / 2 * -0.25}rem;
    }
    .-m-#{floor($i/2)}_5{
      margin: #{$i / 2 * -0.25}rem;
    }
    .-mt-#{floor($i/2)}_5{
      margin-top: #{$i / 2 * -0.25}rem;
    }
    .mt-#{floor($i/2)}_5{
      margin-top: #{$i / 2 * 0.25}rem;
    }
    .mb-#{floor($i/2)}_5{
      margin-bottom: #{$i / 2 * 0.25}rem;
    }
    .-mb-#{floor($i/2)}_5{
      margin-bottom: #{$i / 2 * -0.25}rem;
    }
    .mr-#{floor($i/2)}_5{
      margin-right: #{$i / 2 * 0.25}rem;
    }
    .-mr-#{floor($i/2)}_5{
      margin-right: #{$i / 2 * -0.25}rem;
    }
    .-ml-#{floor($i/2)}_5{
      margin-left: #{$i / 2 * -0.25}rem;
    }
    .ml-#{floor($i/2)}_5{
      margin-left: #{$i / 2 * 0.25}rem;
    }
  }
}
//更多的也不麻烦了
@for $i from 4 through 24 {
  .m-#{floor($i*4)}{
    margin: #{$i}rem;
  }
  .-m-#{floor($i*4)}{
    margin: #{-$i}rem;
  }
  .my-#{floor($i*4)}{
    margin: #{$i}rem 0;
  }
  .mx-#{floor($i*4)}{
    margin: 0 #{$i}rem;
  }
  .-my-#{floor($i*4)}{
    margin: #{-$i}rem 0;
  }
  .-mx-#{floor($i*4)}{
    margin: 0 #{-$i}rem;
  }
  .-m-#{floor($i*4)}{
    margin: #{-$i}rem;
  }
  .-mt-#{floor($i*4)}{
    margin-top: #{-$i}rem;
  }
  .mt-#{floor($i*4)}{
    margin-top: #{$i}rem;
  }
  .mb-#{floor($i*4)}{
    margin-bottom: #{$i}rem;
  }
  .-mb-#{floor($i*4)}{
    margin-bottom: #{-$i}rem;
  }
  .mr-#{floor($i*4)}{
    margin-right: #{$i}rem;
  }
  .-mr-#{floor($i*4)}{
    margin-right: #{-$i}rem;
  }
  .-ml-#{floor($i*4)}{
    margin-left: #{-$i}rem;
  }
  .ml-#{floor($i*4)}{
    margin-left: #{$i}rem;
  }
}