编程语言编译器语言运行时【免费下载链接】imba The friendly full-stack language项目地址https://gitcode.com/gh_mirrors/im/imba点击查看免费下载Imba 将样式内置为语言核心能力在.imba文件中即可书写类 CSS 的声明式样式并完整支持所有标准 CSS 属性。在此基础上Imba 还提供了一套受 Tailwind 启发、可配置的内置设计系统——包含属性简写aliases、非标准属性如hue、非标准取值如display、box-shadow、border-radius、transition-timing-function的语义化值以及完整的命名调色板。读完本文你将掌握 Imba 样式属性体系的分类、设计系统各层级的底层数据来源主题变体、调色板、生成类型并能在自己的组件中熟练使用简写与设计系统值。本文以 style-properties.md 为骨架结合编译器中的样式实现styler.mjs、theme.mjs与生成的类型定义styles.generated.d.ts展开。标准 CSS 属性全量支持开箱即用Imba 支持所有常规 CSS 属性all regular css properties。无论width、height、margin、padding、background、position还是font、border、transition、animation都可以直接在 Imba 的样式块或内联样式中使用取值语法与 CSS 一致。css .card width: 320px background: #fff margin-top: 12px border: 1px solid #e2e8f0 transition: opacity 0.2s ease标准属性的完整参考列表由官方站点通过api-gridcss.own.properties.native/api-grid动态渲染见 style-properties.md。这个网格的数据并非手写而是从 css-data.json 这份结构化属性数据中生成它收录了每个属性的描述、语法、取值枚举与取值限制restrictions。类型定义与站点 API 页由 generate-typings.imba 统一驱动该脚本读取css-data.json跳过带-ms-/-moz-/-webkit-/-o-前缀的私有属性为每个属性生成一个 Imba 可识别的类型接口并最终产出 styles.generated.d.ts。例如其中的width接口/** alias w */ interface width extends _ { set(val: this | Ψlength | Ψpercentage): void; /** The width depends on the values of other properties. */ auto: fitΞcontent: maxΞcontent: minΞcontent: }每个接口都带有对应属性描述与alias标记使得 IDE 能够在书写样式时提供准确的补全与类型校验。渲染这些列表的api-grid/api-list组件实现在 api-entry.imba 中。对于单个属性的完整语法与浏览器支持细节官方文档建议查阅 MDN 等标准 CSS 参考资料Imba 自身保证语法与标准 CSS 一致。属性简写Aliases把 CSS 写得像 TailwindImba 内置了大量属性简写把常见 CSS 属性的书写长度大幅压缩。这些别名集中定义在 styler.mjs 的aliases表中编译时会被解析回对应标准属性。以下是核心分组分组简写 → 属性颜色与布局c→colord→displaypos→position内边距p→paddingpl/pr/pt/pb→各方向px/py→水平/垂直外边距m→marginml/mr/mt/mb→各方向mx/my→水平/垂直尺寸w/h→width/heights→sizet/b/l/r→top/bottom/left/rightmih/mah/miw/maw→min/max 宽高对齐ji/jc/js→justify-ai/ac/as→align-ja/jai/jac/jas→place-*Flexfl→flexflf→flex-flowfld→flex-directionflb→flex-basisflg→flex-growfls→flex-shrinkflw→flex-wrap字体ff→font-familyfs→font-sizefw→font-weightls→letter-spacinglh→line-height文本tt→text-transformta→text-alignva→vertical-aligntd→text-decoration 系列tdl/tdc/tds/tdt/tdsi/tuo边框bd→borderbdr/bdl/bdt/bdb→各方向bdx/bdy→横/纵向边框样式/宽度/颜色bs/bw/bc及其方向变体bsr/bwl/bct等圆角rd→border-radiusrdtl/rdtr/rdbl/rdbr→四个角例如 styles.md 中的对比示例常规写法css .btn display: block background: #b2f5ea padding-left: 4px padding-right: 4px css .btnhover background: #81e6d9用简写可以压缩成一行css .btn d:block px:1 bg:teal2 bghover:teal3其中d、px、bg都是简写hover是样式修饰符见下文teal2/teal3则是设计系统中的命名颜色。简写同时适用于声明式样式与内联样式例如div[d:block]。从类型定义可以确认每个别名接口都以proxy指向完整属性接口如 styles.generated.d.ts 中的interface w extends width保证别名与全名共享同一套取值类型。非标准属性Custom Properties除标准 CSS 属性外Imba 还定义了一批非标准属性站点通过api-gridcss.own.properties.custom/api-grid渲染它们见 style-properties.md。这些属性要么是 CSS 里没有的如同时设置宽高的size要么以更友好的方式封装了底层机制如hue。在类型生成脚本中这类属性会被打上custom标记generate-typings.imba对应的取值若为 Imba 特有也会标注custom以便在文档与 IDE 中与标准属性区分。以size为例其类型定义带有custom标记/** alias s custom */ interface size extends _ { set(val: this | Ψlength | Ψpercentage): void; auto: fitΞcontent: ... }其中最值得单独说明的是hue属性——它是 Imba 设计系统中处理主色调的入口详见下文hue色相属性一节。内置设计系统非标准取值Imba 内置的设计系统inspired by Tailwind为若干常见属性提供了语义化、可配置的非标准取值编译期会展开为真实 CSS 值。这些值全部来自 theme.mjs 的variants表并在 generate-typings.imba 中生成对应的Ψxxx类型接口。display面向布局的语义值display除了标准值外还支持 Imba 特有的布局简写值如hflex水平 flex、vflex垂直 flex。官方文档站自身的样式大量使用它们例如 api-entry.imba 中的d:hflex ja:centerdisplay 水平 flex justify 对齐居中、d:vflex、d:grid、d:inline-block、d:contents、d:none。这使得常见的横向排列、纵向堆叠布局意图一目了然。box-shadow命名阴影层级box-shadow提供了从xxs到xxl的渐进阴影层级外加inner内阴影、outline描边式阴影与nonetheme.mjs。所有阴影值都通过 CSS 变量如--bxs-md-color、--bxs-md-alpha参数化颜色与透明度方便在主题层面统一调整阴影色调css .modal box-shadow: md # - 0 4px 6px -1px hsla(var(--bxs-md-color,0,0%,0%), ...) css .btn box-shadow: inner # 内阴影 css .focus-ring box-shadow: outlineborder-radius圆角阶梯border-radius提供语义化圆角阶梯full9999px胶囊/圆形、xxs1px、xs2px、sm3px、md4px、lg6px、xl8pxtheme.mjs。数值类输入如rd:2则按NUMBER: 2px的基准映射。官方站点的.pill样式即使用rd:md.pill px:4px py:3px rd:md bg:hue1 c:hue7transition-timing-function命名缓动曲线transition-timing-function支持一组命名缓动easings全部由三阶贝塞尔曲线定义theme.mjssine-in/out/in-out、quad-*、cubic-*、quart-*、quint-*、expo-*、circ-*、back-*回弹效果贝塞尔 y 值超过 1。生成类型中对应ΨtimingΞfunction接口例如cubic-out展开为cubic-bezier(0.215, 0.61, 0.355, 1)。颜色调色板Imba 内置了手工调校的命名调色板见 colors.md 与 theme.mjs。共 22 组色相/中性色rose、pink、fuchsia、purple、violet、indigo、blue、sky、cyan、teal、emerald、green、lime、yellow、amber、orange、red以及中性色warmer、warm、gray、cool、cooler。每组包含0–9十个色阶color0最浅 →color9最深可以像普通颜色一样用在任何需要颜色值的位置css .notice color: red5 background: teal1 border-color: indigo3这些命名颜色由编译器在编译期解析为 HSLA 值。同时generate-typings.imba 会把每个色阶都写入Ψcolor类型接口并为每个色阶附上对应的color hsla(...)注释让 IDE 悬停即可看到实际色值。hue色相属性详解hue是 Imba 样式系统中最具特色的自定义属性它为某个元素及其子树定义主色相随后该作用域内的hue0–hue9色阶即可按同一色相自动生成实现整棵组件树一键换色。在编译器层面styler.mjs 中hue的处理会写入--hueCSS 变量并派生出--hue0…--hue9等色阶变量而hue命名空间下的颜色解析styler.mjs会基于调色板进行色阶插值当请求的色阶超出已有范围时编译器会在相邻色阶之间按比例混合出中间色。css .brand hue: blue background: hue5 # - blue5 color: hue1 # - blue1 css .brand.alt hue: rose # 同一结构自动切换为玫瑰色系在类型层面Ψhue接口包含了所有可用色相名取自各调色板同时覆盖hue0–hue9数值阶梯见 generate-typings.imba。官方文档站正是用hue实现各 API 模块的差异化配色例如 api-entry.imba 中的css hue:blue让整个属性条目区域呈现蓝色主题。主题变体与数值阶梯设计系统并非写死的常量而是集中在theme.variants中、可统一配置的数值阶梯。除了上文提到的radius、box-shadow、easings还有font-sizexxs–6xl语义字号以及1–16的数值字号每档同时给出推荐行高如sm: [14px, 1.5]配合fs:34px/1.4这样的字号/行高连写语法使用见 theme.mjssizing通用尺寸阶梯数值按0.25rem递增NUMBER: 0.25remletter-spacing字距阶梯数值按0.05em递增。这些变体在编译时把命名值展开为真实 CSS让间距、字号、圆角、阴影在整个项目中保持同一套比例语言这正是 styles.md 中所强调的consistent design language across your whole project。与修饰符Modifiers联动响应式与状态设计系统值可以与 style-modifiers.md 中的修饰符无缝组合hover、focus、dark等修饰符以及内置断点xs/sm/md/lg/xl/2xlmin-width与lt-xs…lt-2xlmax-width见 theme.mjs。此外还支持任意数值断点后跟数字表示min-width!表示max-widthcss div700 display:block # - media (min-width: 700px) css div!650 display:none # - media (max-width: 650px) css div width:100% 700:80% 1300:1200px结合简写与设计系统值即可写出高度紧凑的响应式样式css .container px:2 md:px:4 lg:px:6 fs:sm md:fs:lg bg:hue2 dark:hue8类型补全与 IDE 支持整个属性体系标准属性、别名、非标准属性、设计系统取值都有对应的 TypeScript 声明支撑styles.d.ts属性接口的公共基础_接口、Ψlength、Ψpercentage等取值类型styles.generated.d.ts由css-data.json 主题变体自动生成的全部属性接口、别名proxy与设计系统取值枚举共 9000 余行styles.modifiers.d.ts修饰符相关声明styles.generated.d.ts 中declare namespace imbacss统一收纳以上类型。配合语言服务仓库中的 imba-language-core / imba-typescript-plugin 等工具链开发者书写d:、bg:、rd:等简写时即可获得实时补全与取值校验误写不存在的色阶或阴影名会立即被类型系统拦截。深入阅读文档样式总览 styles.md、修饰符 style-modifiers.md、颜色 colors.md、类型数据 style-data-types.md实现属性简写与颜色解析 styler.mjs、主题变体与调色板 theme.mjs、属性数据 css-data.json生成与类型类型生成脚本 generate-typings.imba、生成的完整类型 styles.generated.d.ts示例官方站点样式代码片段可参考 api-entry.imba 与 examples/css 下的.imba示例赞分享编程语言编译器语言运行时【免费下载链接】imba The friendly full-stack language项目地址https://gitcode.com/gh_mirrors/im/imba点击查看免费下载相关推荐RuoYi-Vue-Plus登录服务认证处理逻辑RuoYi Vue Plus登录服务认证处理逻辑 概述 RuoYi Vue Plus作为一款功能强大的多租户后台管理系统其登录认证服务采用了现代化的架构设计开发工具Imba 类系统完全指南从 Class 定义、Meta 属性到 Mixin 与类扩展Imba 类系统完全指南从 Class 定义、Meta 属性到 Mixin 与类扩展 导读 本文以 Imba 官方文档《Classes》为骨架系统讲解 Im编程语言编译器语言运行时Primer CSS变量系统CSS自定义属性的完整指南Primer CSS变量系统CSS自定义属性的完整指南 Primer CSS变量系统是GitHub设计系统的核心它通过CSS自定义属性提供了一套完整的样式管前端设计系统UI组件上一篇video-use字幕样式定制从字体到位置的全方位调整下一篇3步打造智能抢红包助手iOS微信自动抢红包插件全攻略创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考