在三者中，Sass 是使用最广泛的，其次是 Less，最后是 Stylus。

🔶 1. Sass（.scss / .sass）

• 最广泛使用的 CSS 预处理器
• 拥有最大社区和生态，文档丰富
• 被主流框架广泛支持（如：Bootstrap 默认使用 SCSS，Vue、React 等）
• 多数前端 UI 库也优先支持 SCSS 格式的主题自定义

- 阅读剩余部分 -

最近一个项目在用 tabler，tabler 是一款开源免费的并且看起来蛮正经的 UI 库，适用于以后端为主的 web 开发者。

最新版 tabler-v1.0.0-beta20 表单里的选择组件默认使用的是 tom-select，之前用的是 Selectize，但由于该项目停止开发，后来才换了 tom-select。

以上信息来源是官方的 issue。

由于官方没有提供对 select2 的支持，所以 select2 的样式在 tabler 里用不了，并且即使是引入了 bootstrap5 的样式，仍然不 work。

于是我就写了一段 css，解决了 select2 在 tabler 下适配的问题。

创建 select2-tabler-theme.css 文件：

- 阅读剩余部分 -

有时候经常需要做一些简单的页面展示一些信息，不需要什么交互，也不需要复杂的组件，这时候就需要一些简单的 CSS 样式库。

今天找了几个，记录一下，方便以后使用。

MVP.css

一个仅有6kb大小的基本CSS文件,不含任何类、ID或其他模块化代码，确实非常简洁。

• 官网
• 官方 Demo

- 阅读剩余部分 -

新项目开始使用 bootstrap 5 之后，相关依赖的样式也得跟着升级。

找了一下 select2 的 bootstrap5 样式，找到这个项目 select2-bootstrap-5-theme，使用了一下，感觉不错，推荐一下。

使用方法

- 阅读剩余部分 -

ChatGPT 写的彩虹渐变动态背景，效果不错。

效果（gif 图太大就不传了，传个静态的图片吧）：

源码如下：

- 阅读剩余部分 -

网页中使用 WeUI 可以直接引入官方的 CDN 链接：

- 阅读剩余部分 -

使用模态框，一般都会自动带上一个属性，tabindex="-1"。

- 阅读剩余部分 -

废话不多说，直接上代码：

- 阅读剩余部分 -

笔者使用的是滴滴的 mpx 框架开发小程序的，使用 WebStorm 的时候，format 代码总是将 24rpx 变成 24 rpx，中间多个空格，导致样式失效。

搜了一下，找到一个解决方案：

- 阅读剩余部分 -

.login-container {
    background: url(/static/img/001.png) 200px no-repeat,linear-gradient(90deg,             
#10ad89 0%, #1ca4be 100%);
}

在做登录页面时，UI给的背景图是分为背景渐变 和背景图片，在一个元素标签上展示，实践过以上写法可以实现。从网上搜索时，搜到的结果是，

1.渐变属性与图片属性中间用逗号隔开；
2.渐变属性要在图片属性之前。

但这种没有出现想要的结果，所以我自己写到一个属性里就可以了，注意图片一定是png格式的。

原文：https://blog.csdn.net/lilyheart1/article/details/107563872