V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
3dwelcome
V2EX  ›  前端开发

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

  •  
  •   3dwelcome · 219 天前 · 1578 次点击
    这是一个创建于 219 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近在学 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
    wolfie
        2
    wolfie  
       219 天前
    复用是不是还得统一管理
    3dwelcome
        3
    3dwelcome  
    OP
       219 天前
    @kingwl #define 不仅仅是保存 CSS 变量,还可以应用在 HTML 或者 JS 或者 VUE 上,一切代码 /文字皆可定义成宏。

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

    我就是想不太通,那么多前端编译器,为什么没人用过,也没人提到宏编译。
    3dwelcome
        5
    3dwelcome  
    OP
       219 天前
    @wolfie 设计宏就是为了复用代码,深挖下去有很多可能性,不比模板编译差很多。

    可惜宏被所有人给遗忘了。
    wunonglin
        6
    wunonglin  
       219 天前
    你这不就是样式本身的使用方法么?

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

    不就是

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

    有啥区别?
    woodensail
        7
    woodensail  
       219 天前   ❤️ 1
    你好,这个功能是有的。webpack DefinePlugin 了解一下。

    当然你可能会说这个是编译时的不是运行时的。不过 c 语言的 define 也是编译时的。
    3dwelcome
        8
    3dwelcome  
    OP
       219 天前
    @woodensail 果然还是有轮子,不太好找,但的确是宏编译。赞~
    Mithril
        9
    Mithril  
       219 天前   ❤️ 1
    @3dwelcome 可以了解一下 SCSS,但这也不过是 CSS 的预编译方言。
    你可以认为 HTML,JS,TS 都是独立的系统,你在 C++里 Define 的在 Java 里也用不了。。。
    3dwelcome
        10
    3dwelcome  
    OP
       219 天前
    @wunonglin 这就是传统 css class 和 inline css 的区别。

    偶尔写几句<div style='BG_BLUE_600'>这种 inline css, 但是既不希望污染全局 CSS (因为仅仅一小部分代码里用到),又希望不把 RGB 值给写死。
    yaphets666
        11
    yaphets666  
       219 天前
    因为这种需求根本不存在。
    专职前端不会用这些样式库,或者说公司的商业项目极少用样式库。
    tailwind 这种东西以前叫原子类,其实是已经被淘汰的东西了。
    whileFalse
        12
    whileFalse  
       219 天前
    你看现代编程语言有多少支持#define ?
    这个玩意儿容易产生 bug,而且影响 IDE 的实时检查。
    Jirajine
        13
    Jirajine  
       219 天前
    css-in-js 定义个变量不就行了?
    rain0002009
        14
    rain0002009  
       219 天前
    tailwind 开启 jit 模式 就有你说的功能了 你可以写 bg-[#fefefe]
    或者使用 windicss 也有相同的功能
    Mozshaw
        15
    Mozshaw  
       219 天前
    关键词 css-in-js
    Mutoo
        16
    Mutoo  
       219 天前
    @yaphets666 tailwindcss 2.0 是 2020 年 State of css 最火的框架了,现在不叫原子类了,改名叫 utilities-first 了
    参考: https://2020.stateofcss.com/en-US/technologies/css-frameworks/
    IvanLi127
        17
    IvanLi127  
       219 天前 via Android
    你为啥要把这两个联系起来。。。想联系起来的话你看样式来源就好了啊。。。devtoots 又不是看不到
    wenzichel
        18
    wenzichel  
       219 天前
    现在 CSS 已经有变量这个东西了,虽然没有像其他语言 define 那么高级!

    :root {
    --bg-blue-600: rgb(37, 99, 235); // 定义
    }
    . BG_BLUE_600 {
    background-color: var(--bg-blue-600); // 通过 var 获取值
    }
    3dwelcome
        19
    3dwelcome  
    OP
       219 天前
    @IvanLi127 你没懂我的意思,现在 tailwindcss 这种框架,已经完全把 HTML 原本的 CSS 改造成了另外一种全新的语言。

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

    这样的话,相当于把所有的 CSS 关键词都 redefine 了一次。这和预编译宏作用,有点殊途同归的感觉。
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2034 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 16:17 · PVG 00:17 · LAX 08:17 · JFK 11:17
    ♥ Do have faith in what you're doing.