使用 UnoCSS shortcuts 简化 class
UnoCSS 确实简化了不少样式书写、也降低了 CSS 打包体积,提升了样式使用率。但样式太多的话,class 也写得多,比较费眼。所幸,UnoCSS 提供了 shortcuts 来简化 class,并且可以通过 js 来控制样式的输出,灵活度非常高。
shortcuts 与 rules 不同的是,rules 只可以写 CSS 属性/值,shortcuts 是提高 rules 的利用率,且降低写太多重复的 class。
shortcuts 有动态和静态,我推荐多用动态的。我就直接丢上官方文档给出的静态 shortcuts 例子:
shortcuts: {
// shortcuts to multiple utilities
'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
'btn-green': 'text-white bg-green-500 hover:bg-green-700',
// single utility alias
'red': 'text-red-100'
}
下面是我写的动态 shortcuts,目的是简化 flex、items-xxx、content-xxx、justify-xxx 的使用:
const shortcuts = <UserShortcuts>[
[
/^f-((c|s|e)(-(c|s|e|b))*)$/,
([, g1, g2, g3, g4]) => {
const matches = [
{ prefix: "c", value: "center" },
{ prefix: "s", value: "start" },
{ prefix: "e", value: "end" },
{ prefix: "b", value: "between" }
];
let style = ``;
let corr = matches.find(ele => ele.prefix === g2);
style += `flex items-${corr.value} content-${corr.value}`;
if (g4) {
corr = matches.find(ele => ele.prefix === g4);
style += ` justify-${corr.value}`;
}
return style;
}
]
];
动态 shortcuts 包含多个数组元素,元素包含两个子元素。第一个元素是正则表达式;第二个是正则表达式匹配的结果。正则表达式匹配至少一个组,比如我写的正则表达式可视化图:
这个正则表达式匹配了四个组,shortcuts 获取匹配的值与正则表达式匹配的组是一一对应的关系。我需要的是 组2 和 组4。下面是使用案例,在 class 中写 f-c-s
就可以用上 flex 相关的样式:
使用 UnoCSS shortcuts 简化 class的更多相关文章
- UnoCSS 简化 CSS 的书写,Nice!
CSS 样式太多,重复写 在学习 UnoCSS 之前,我提出几个问题: 你是否有过写完了 HTML 之后,跳转到 style 写 CSS 这样来回跳转的痛苦? 你是否有过不知道如何给节点取类名的痛苦( ...
- Jupyter Notebook 27绝技——27 Jupyter Notebook tips, tricks and shortcuts
转载自:https://www.dataquest.io/blog/jupyter-notebook-tips-tricks-shortcuts/ Jupyter notebook, formerly ...
- Kotlin的Lambda表达式以及它们怎样简化Android开发(KAD 07)
作者:Antonio Leiva 时间:Jan 5, 2017 原文链接:https://antonioleiva.com/lambdas-kotlin/ 由于Lambda表达式允许更简单的方式建模式 ...
- Android 7.1 - App Shortcuts
Android 7.1 - App Shortcuts 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Shortcuts 文中如有纰漏,欢迎大家留言 ...
- OEL上使用yum install oracle-validated 简化主机配置工作
环境:OEL 5.7 + Oracle 10.2.0.5 RAC 如果你正在用OEL(Oracle Enterprise Linux)系统部署Oracle,那么可以使用yum安装oracle-vali ...
- 使用MonoTouch.Dialog简化iOS界面开发
MonoTouch.Dialog简称MT.D,是Xamarin.iOS的一个RAD工具包.它提供易于使用的声明式API,不需要使用导航控制器.表格等ViewController来定义复杂的应用程序UI ...
- C#开发中使用配置文件对象简化配置的本地保存
C#开发中使用配置文件对象简化配置的本地保存 0x00 起因 程序的核心是数据和逻辑,开发过程中免不了要对操作的数据进行设置,而有些数据在程序执行过程中被用户或程序做出的修改是应该保存下来的,这样程序 ...
- 使用 Code Snippet 简化 Coding
在开发的项目的时候,你是否经常遇到需要重复编写一些类似的代码,比如是否经常会使用 for.foreach ? 在编写这两个循环语句的时候,你是一个字符一个字符敲还是使用 Visual Studio 提 ...
- WCF学习之旅—WCF4.0中的简化配置功能(十五)
六 WCF4.0中的简化配置功能 WCF4.0为了简化服务配置,提供了默认的终结点.绑定和服务行为.也就是说,在开发WCF服务程序的时候,即使我们不提供显示的 服务终结点,WCF框架也能为我们的服务提 ...
- 匹夫细说C#:委托的简化语法,聊聊匿名方法和闭包
0x00 前言 通过上一篇博客<匹夫细说C#:庖丁解牛聊委托,那些编译器藏的和U3D给的>的内容,我们实现了使用委托来构建我们自己的消息系统的过程.但是在日常的开发中,仍然有很多开发者因为 ...
随机推荐
- 使用mysqldump备份与还原的mysql数据库
使用mysqldump备份与还原的mysql数据库 一.mysqldump命令介绍 1.mysqldump -help 查看命令介绍: mysqldump --help 2.mysqldump登录选项 ...
- 彻底理解Python中的闭包和装饰器(下)
上篇讲了Python中的闭包,本篇要讲的装饰器就是闭包的一个重要应用. 如果你还不知道什么是闭包,猛戳这里阅读:彻底理解Python中的闭包和装饰器(上) 什么是装饰器 装饰器的作用是在不修改函数定义 ...
- jmeter Foreach 控制器与json提取器/正则表达式
适用场景:对某些业务数据依次操作 如:删除某个用户下的所有人员数据,无批量删除接口时,只能循环调用删除人员接口,直到删除完成 返回数据格式: 1. 使用json提取器或正则表达式提取业务数据(jso ...
- Web应用怎样获取Access Token?
1.在联盟创建服务器应用 参考文档:开发准备 2.获取用户级Access Token 2.1 获取code 参考文档:接入华为帐号获取凭证 2.1.1 先按照跳转链接进行配置url https://o ...
- 网络监测工具之Zabbix的搭建与测试方法(一)
简介 Zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案,它能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系统管理员快速定位/解决存在的 ...
- 【转载】SQL SERVER 将多行数据合并成一行
昨天遇到一个SQL Server的问题:需要写一个储存过程来处理几个表中的数据,最后问题出在我想将一个表的一个列的多行内容拼接成一行 比如表中有两列数据 : ep_classes ep_name A ...
- [python] 圆形嵌套图Circular Packing
圆形嵌套图Circular Packing 文章目录 圆形嵌套图Circular Packing 1 具有一级层次的圆形嵌套图绘制 1.1 绘图数据与circlify计算 1.2 图形绘制 1.2.1 ...
- node设置下载源
// 设置镜像源 npm config set registry https://registry.npm.taobao.org // 查看当前源 npm config get registry
- Java正则表达式全局匹配
今天想用Java的正则在字符串中匹配特定内容,但是当我代码写好运行后却发现正则表达式并没有起作用 试了很多方法,也去Js里试了正则表达式可以走通,就是Java不行 很纳闷 (:′⌒`) Java里正则 ...
- [C++Primer] 第二章 变量和基本类型
第二章 变量和基本类型 引用 引用定义的时候必须初始化. 引用初始化之后无法重新绑定到其它对象上. 引用本身并不是对象,所以没有指向引用的引用(不管如何多层引用,引用的还是源对象) 下面用一个简单的例 ...