在了解了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
,所以这更方便我们操作了。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;
}
}
保存,然后最终会生成一个压缩过的min.css文件
我们尝试一下,首先这是原本的效果
icon和文字挨太紧了明显不行,我们给icon加一个mr-3
生效,证明前边思路莫得问题
如果你对于这种公有类的css框架有一定好感的话,不妨动手试试,tailwindcss的@apply
可以组合原子类让我们使用的时候的自定义程度明显提高,这才符合我的代码审美(不要被示例中大量组合类给吓到,那看起来确实很像内联样式)