Unocss， css原子化引擎 / nuxt#4

在CSS这块有时是按需手写的，效率不算高，毕竟需求低嘛。流行的LESS 、SASS 都没用过，真没太多时间花在这方面。这次，为了做AI应用，还是需要补一下这方面的技能。

在UI方面选了NaiveUI, CSS方面则有个挺时髦的解决方案：Tailwind CSS。它做了一件蛮有用的更新：就是将CSS语句原子化！我们听过数据库原子化，CSS语句原子化是个啥？

CSS原子化其实就是简化CSS语句，比如这样：padding-bottom: 1rem; -> pb-1, 这样的转换后，就可以直接在<div>中使用了，比如这样的语句：<div bg-pink-200 text-cyan>我的国家</div>

用了一段时间的Tailwind CSS，发现它有个很死板的规定：有些数字是不能使用的！比如： pb-4是合法语句，但pb-5却非法！这是什么鬼？！还有些其它奇葩的规定，累觉不爱。

后来转到了Unocss，发现Unocss是个新鲜、有活力的项目。Unocss兼具了TailwindCSS 和 Windicss的优点，同时还具有自身的定制性和灵活性。按需引入，体积小，速度快。用着用着，很快就爱上了。用了一段时间，也总结了一些方法。

使用方法

直接在 div 中使用

<div class="bg-blue-200"> Index Page</div>
<div bg-pink-200 text-cyan>我的国家</div>

在style中定义

<div class="text"> Index Page</div>
<style>
.text {
  @apply text-xs text-red-300 hover:bg-zinc-900;
}
.btn {
  @apply text-red-700  border border-red-500 !rounded-full;  // rounded-full !important 
}
</style>

混合的写法也是可以的

.test {
  color: white;
  font-size: 2rem;
  @apply bg-blue;
}

常用语法

bg-purple-100  背景颜色
text-purple-100 文本颜色
text-center   水平对齐 可用于字体和按键的中心对齐
align-middle  垂直对齐
!w-[80%]    //width: 80% !important;
shadow-sm  盒子阴影
cursor-pointer 指针样式
outline-none 无边框 
font-italic  斜体

hover:bg-purple-500 鼠标悬停时
focus:bg-purple-900  鼠标点击时
flex justify-center items-center  元素居中
flex justify-between  两端对齐
min-h-sceen / min-h-100vh 高度满屏
min-h-80vh 最小高度（可以延伸）
h-80vh / calc(100vh - 10px)
w-full / w-100vw 宽度满屏

w-[95%] lg:w-[85%] ~= w-95vw  lg:w-85vw

m-auto / mx-auto 居中
ml-auto 右对齐
mr-auto 左对齐
px-4 / py-4  左右/上下两边内边距（padding: 1rem;） 其它写法：px-[20px]
pt-4  上部内边距1rem(padding-top: 1rem;)
mx-4 / my-4  左右/上下两边外边距

animate-fade-in  渐入
<div border-t-dashed border-1></div>  虚线分割线

/* flex布局，两端对齐 */
<div flex mb-2 justify-between>  
  <p mr-2>自定义角色</p>
  <div w-65vw lg:w-42vw> xxx </div>
</div> 

 /* 响应式 */
根据常用的设备分辨率方案，默认内置了 5 个断点，sm、md、lg、xl、2xl ：
断点前缀    最小宽度    CSS
sm  640px   @media (min-width: 640px) { ... }
md  768px   @media (min-width: 768px) { ... }
lg  1024px  @media (min-width: 1024px) { ... }
xl  1280px  @media (min-width: 1280px) { ... }
2xl 1536px  @media (min-width: 1536px) { ... }

/* 定位手机屏幕 */
这种方式最令人们惊讶的地方是，要为移动设备设计样式，您需要使用无前缀的功能类，而不是带 sm: 前缀的版本。不要将 sm: 理解为”在小屏幕上”，而应将其视为”在小断点处”
请注意，我们不必为 sm 断点或 xl 断点指定背景色，您只需要指定一个功能类何时开始生效，而不是何时结束。

使用无前缀的功能类来定位移动设备，并在较大的断点处覆盖它们，下面是一些案例：
<div class="text-center sm:text-left"></div>  //在手机端居中，在屏幕变大时靠左
flex-1 flex justify-end lg:hidden  //手机端时显示，屏幕变大时隐藏
relative hidden lg:flex items-center ml-auto  //在电脑端的样式（在手机端时隐藏）
hidden lg:flex items-center px-4  //在电脑端的样式（在手机端时隐藏）
hidden lg:block ml-auto //在电脑端的样式（在手机端时隐藏）
ml-auto lg:hidden//在手机端时居中，电脑端隐藏

Unocss做了精简后的语法，在开发时确实可以加快速度。在所见即所得方面更是友好，一改就有，在前端方面真是不可多得的利器。其实日常最常用的估计也就20来条语句，有些不知道，仍然可以用回CSS。有包容性的工具真心不错。