【unocss】apply聚合语法，unocss配置

最新推荐文章于 2024-06-16 16:48:29 发布
最新推荐文章于 2024-06-16 16:48:29 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： 前端 文章标签： uni-app unocss 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MinfCONS/article/details/132898800
版权

前言

最近在使用unocss时，我感觉原子化CSS把这些类名堆在一个标签里，实在谈不上精致美观，那我们有没有办法将这些样式类名搬到style里呢？有的，unocss、tailwindCSS都给出了一种语法 #apply

操作方法

这个不可以直接在项目使用，需要根据文档里来走一遍配置流程，下面是我的配置过程

在这里插入图片描述
照葫芦画瓢，把包npm下来

在这里插入图片描述

我的ts一片飘红，不过没关系，完成这一步后就会看到效果了。

我的是uniapp，可能涉及移动端，之前用的是转rpx，现在使用聚合语法失效了；

照着这个来 # rem-to-px

少年歌行s
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp+vue3+unocss示例，解压即用 已经各种配置好了的模板，导入Hbuilder课直接运行
02-22
除去的安装配置繁琐操作，直接解压导入HbuilderX就可以用，完全可以直接当初始unocss项目。 vite.config.js、unocss.config.js、main.js已经配置好，其中主题在unocss.config.js可以随意更改成自己喜欢的样式。 项目class已经分好类，涵盖了大部分class无需在官网搜索，可以直接复制当参考文档使用。
javascript callApply代码示例
02-18
javascript callApply代码示例
unoCSS（整合文章）
weixin_45282357的博客
05-07 1326
我们平时写的普通样式而原子化CSS原子化 CSS定义： 一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。由此可见，定义一些细粒度，离散化，独立的class，这就是原子化 CSS框架的设计方式。
uniapp+unocss报错Error [ERR_REQUIRE_ESM]: require() of ES Module
最新发布
海风依旧
06-16 497
uniapp+unocss报错Error [ERR_REQUIRE_ESM]: require() of ES Module
基于原子化思想的 Vue3 组件库 UnoCSS UI
萌宅鹿的技术小屋
05-22 3096
UnocssUI 是一个基于 UnoCSS 带有原子化思想的现代化 Vue3 组件库，它的特点是简单，每个组件的实现之间没有任何依赖（只在 一个 .vue 文件实现），非常适合用来学习组件库的封装，同时它也在快速的迭代与建设中。
UnoCSS 原子化开发初体验
天问博客-专注于大前端技术
12-11 1203
UnoCSS 是一个即时的原子化 CSS 引擎，旨在灵活和可扩展。核心是不拘一格的，所有的 CSS 工具类都是通过预设提供的。再也不用为了取一个 classname 类名而烦恼了。
解决Unocss/Windcss/Tailwind样出现‘Unknown at rule @applyscss(unknownAtRules)’警告
china-quanda
04-17 1616
@apply 是 CSS 中的一个功能，它允许您将一组样式规则应用于一个选择器。这是一种实验性质的功能，并非所有的 CSS 解析器都支持它，特别是当你使用 PostCSS 和一些Unocss/Windcss/Tailwind CSS工作时。 在 VSCode 中遇到 Unknown at rule @applyscss(unknownAtRules) 的信息，可能是因为您的编辑器或其内置的 SCSS Linter 并不识别这一规则。
vue3细节的改变以及unocss 原子化
汉堡请不要欺负面条
07-11 1899
vue3在vue2中细节的变化
Pythont特殊语法filter,map,reduce,apply使用方法
09-21
在Python中，`lambda` 函数可以用于定义一个单行的、简单的函数，其语法是： ```python lambda arguments: expression ``` 例如，定义一个将两个数字相加的函数： ```python add = lambda x, y: x + y print...
Pandas的Apply函数具体使用
09-16
`apply()`函数的基本语法如下： ```python DataFrame.apply(func, axis=0, broadcast=False, raw=False, reduce=None, args=(), **kwds) ``` - `func`: 这是最重要的参数，需要传递一个函数（通常是你自己定义的）...
Js apply方法详解
10-20
本文主要介绍了Js apply方法的相关知识，具有很好的参考价值，下面跟着小编一起来看下吧
Android读写配置文件
10-29
在Android开发中，读写配置文件是常见的任务，主要用于存储应用程序的设置、用户偏好或者其他持久化数据。配置文件通常以XML或JSON格式存在，因为它们结构清晰，易于解析。本实例将详细介绍如何在Android中进行读取...
UnoCSS给了我一个不用tailwindcss的理由
Senar的博客
06-15 3588
原子化CSS的理念早已不是新鲜事物了，UnoCSS这类解决方案把这个理念有了一个很好的实践和实现，可以真正的提升开发者体验和编码效率，都是很值得一学的技术。
UnoCss使用
weixin_60053942的博客
12-07 2662
UnoCSS: The instant on-demand Atomic CSS engine 样式文档来源：UnoCSS给了我一个不用tailwindcss的理由 - 掘金 集成 UnoCSS 1. 修改 ,添加 unocss plugin 2. 修改 和 Presets 预设 Attributify preset例如：presetAttributify 可以在标签上直接写 CSS 样式 Icon（图标） Icons preset安装： 安装 时会自带 ，所以安装 图标就可以了所有可用
unocss在vue-cli中的使用
qq_42372534的博客
09-27 1553
presetUno的预设是继承于。，卸载上面的依赖，再重新装试试。只在vite工程中起作用，在。.支持流行的css框架如。
第三章 使用UnoCSS原子化CSS
天界程序员的博客
11-20 7874
UnoCSS的GitHub地址UnoCSS的文档地址原子样式也有很多选择，最著名的就是 。 虽然好，但是性能上有一些不足。由于 会生成大量样式定义。全量的 文件往往体积会多至数 。这个对于页面性能是完全不可接受的。如果在开发时进行动态的按需剪裁，又会影响编译性能，降低开发体验。为了解决性能问题，开源界一个叫做 的大神设计了 。 是一个拥有高性能且具灵活性的即时原子化 引擎，可以兼顾产物体积和开发性能。引入 样式实现组件属性定制按钮样式实现【Icon图标按钮】 其中的 是字体图标库文件名： 下面就
在 uniapp 里面使用 unocss
阿臻
11-06 2737
为什么要这样配置呢, 我们想一下, 在小程序里面使用的单位是 rpx, 在 h5 里面使用的是 rem, 为什么我们在使用 uniapp 的时候可以直接写 rpx, 因为 uniapp 的插件在内部处理了, 在编译小程序或者 h5 的时候是做了对应的处理的.这个时候我们就要想一下为什么添加了指令之后 rpx 就无法被转换了为 rem 了呢, 因为 unocss 里面的 transformers 执行顺序是后置与 uniapp 插件的, 所以指令生成的 rpx 是无法被 uniapp 插件处理到的。
【uniapp引入unocss】
qq_50767141的博客
04-09 2044
uniapp引入unicss
uniapp+unocss
weixin_45322623的博客
12-22 1463
在小程序(UniApp 和 Taro)中使用UnoCSS，兼容不支持的语法。，在h5中会转换成rem,在小程序中为rem。通过这个语句判断启动的是不是小程序。在index.vue中使用。
pandas groupby apply聚合
08-08
pandas的groupby方法可以用于将数据按照特定的条件进行分组，而apply方法则可以对每个分组应用自定义的聚合函数。这样可以对分组后的数据进行各种操作和计算。下面是一个示例： 假设我们有一个包含学生信息的数据集，其中包括学生姓名、科目和成绩。我们想要按照科目分组，并计算每个科目的平均成绩。可以使用groupby和apply方法来实现： ```python import pandas as pd # 创建示例数据集 data = {'姓名': ['张三', '李四', '王五', '张三', '李四', '王五'], '科目': ['数学', '数学', '数学', '英语', '英语', '英语'], '成绩': [80, 90, 75, 85, 95, 70]} df = pd.DataFrame(data) # 按照科目分组，并应用自定义的聚合函数（计算平均值） result = df.groupby('科目').apply(lambda x: x['成绩'].mean()) print(result) ``` 输出结果为： ``` 科目 数学 81.666667 英语 83.333333 dtype: float64 ``` 这样，我们就按照科目分组，并计算了每个科目的平均成绩。你也可以根据具体需求编写自定义的聚合函数来应用于分组后的数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值