前端为什么不加个#define 语句呢？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1304 天前的主题，其中的信息可能已经有所发展或是发生改变。

最近在学 tailwindcss, 里面有个叫 bg-blue-600 的颜色定义，实际编译进 class 的代码，是 background-color: rgb(37, 99, 235);

可是用 chrome 调试页面的时候，光看 background-color: rgb(37, 99, 235), 怎么也没办法和 bg-blue-600 去关联起来。那为什么不直接在代码里，加一个#define 语句？

比如把

<div class="bg-blue-600">

改成

#define BG_BLUE_600   background-color: rgb(37, 99, 235)
<div class="BG_BLUE_600">

这样不是好理解多了？

19 条回复 • 2021-04-27 21:40:08 +08:00

kingwl

2021-04-27 13:49:44 +08:00

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

wolfie

2021-04-27 13:49:52 +08:00

复用是不是还得统一管理

3dwelcome

2021-04-27 13:53:43 +08:00

@kingwl #define 不仅仅是保存 CSS 变量，还可以应用在 HTML 或者 JS 或者 VUE 上，一切代码 /文字皆可定义成宏。

宏内部还可以加表达式，加条件判断语句。

我就是想不太通，那么多前端编译器，为什么没人用过，也没人提到宏编译。

kingwl

2021-04-27 13:55:07 +08:00

https://github.com/microsoft/TypeScript/issues/4892

3dwelcome

2021-04-27 13:56:00 +08:00

@wolfie 设计宏就是为了复用代码，深挖下去有很多可能性，不比模板编译差很多。

可惜宏被所有人给遗忘了。

wunonglin

2021-04-27 14:01:51 +08:00

你这不就是样式本身的使用方法么？

#define BG_BLUE_600 background-color: rgb(37, 99, 235)

不就是

.BG_BLUE_600{ background-color: rgb(37, 99, 235) }

有啥区别？

woodensail

2021-04-27 14:02:55 +08:00

你好，这个功能是有的。webpack DefinePlugin 了解一下。

当然你可能会说这个是编译时的不是运行时的。不过 c 语言的 define 也是编译时的。

3dwelcome

2021-04-27 14:06:53 +08:00

@woodensail 果然还是有轮子，不太好找，但的确是宏编译。赞～

Mithril

2021-04-27 14:08:27 +08:00

@3dwelcome 可以了解一下 SCSS，但这也不过是 CSS 的预编译方言。
你可以认为 HTML，JS，TS 都是独立的系统，你在 C++里 Define 的在 Java 里也用不了。。。

3dwelcome

2021-04-27 14:10:00 +08:00

@wunonglin 这就是传统 css class 和 inline css 的区别。

偶尔写几句<div style='BG_BLUE_600'>这种 inline css, 但是既不希望污染全局 CSS （因为仅仅一小部分代码里用到），又希望不把 RGB 值给写死。

yaphets666

2021-04-27 15:00:17 +08:00

因为这种需求根本不存在。
专职前端不会用这些样式库，或者说公司的商业项目极少用样式库。
tailwind 这种东西以前叫原子类，其实是已经被淘汰的东西了。

whileFalse

2021-04-27 15:16:08 +08:00

你看现代编程语言有多少支持#define ？
这个玩意儿容易产生 bug，而且影响 IDE 的实时检查。

Jirajine

2021-04-27 15:37:14 +08:00

css-in-js 定义个变量不就行了？

rain0002009

2021-04-27 16:10:47 +08:00

tailwind 开启 jit 模式就有你说的功能了你可以写 bg-[#fefefe]
或者使用 windicss 也有相同的功能

Mozshaw

2021-04-27 19:28:48 +08:00

关键词 css-in-js

Mutoo

2021-04-27 19:35:49 +08:00

@yaphets666 tailwindcss 2.0 是 2020 年 State of css 最火的框架了，现在不叫原子类了，改名叫 utilities-first 了
参考： https://2020.stateofcss.com/en-US/technologies/css-frameworks/

IvanLi127

2021-04-27 20:07:46 +08:00 via Android

你为啥要把这两个联系起来。。。想联系起来的话你看样式来源就好了啊。。。devtoots 又不是看不到

wenzichel

2021-04-27 20:16:50 +08:00

现在 CSS 已经有变量这个东西了，虽然没有像其他语言 define 那么高级！

:root {
--bg-blue-600: rgb(37, 99, 235); // 定义
}
. BG_BLUE_600 {
background-color: var(--bg-blue-600); // 通过 var 获取值
}

3dwelcome

2021-04-27 21:40:08 +08:00

@IvanLi127 你没懂我的意思，现在 tailwindcss 这种框架，已经完全把 HTML 原本的 CSS 改造成了另外一种全新的语言。

原则上本来语义全部用专用缩写替代，能不用原生 CSS，就必然不去用。

这样的话，相当于把所有的 CSS 关键词都 redefine 了一次。这和预编译宏作用，有点殊途同归的感觉。