WC 样式工作表
WC Style Sheets(WCSS)是一款反应灵敏,移动第一的样式和工具集,旨在让开发者使用Auro Design Language快速而简单地创建网络体验.
包括什么
这个寄存器是一个核心关卡样式,功能,和混音的库,可用于一致的前端UI开发. 这将包括对CSS选择器,混音器和任何其他辅助功能或工具的完整描述.
文档
请看 文档网站 用于所有与 WC 样式表有关的信息.
升级到 v12( Sass 模块)
世界社保协会 v12.0.0 从腐朽的萨斯人迁徙 @import 系统到
Sass 模块系统
(单位:千美元)@use 编号 : @forward) (中文(简体) ). 这对消费者来说是一个突破性的变化。 见
移徙指南 所需员额 @use 语法和新
@use ... with (...) 范围、前缀和 !important 配置 .
设计标志和遗留部分支助
升级为世界基督教团结会 v5.x 需求 @aurodesignsystem/[email protected]。 。 。 .
当您的项目升级时,可能需要保留 @aurodesignsystem/[email protected] 用于支持 Auro 自定义元素的 新设计标志命名公约。 。 。 .
请参看奥罗设计标志 从3.x迁移到4.x 用于补充信息.
安装
预处理的捆绑资源
在有限的尺度上,一些文件被预处理到CSS,以便通过CDN交付,并用于需要这种资源的环境.
API 注释: 第一个支持版本 v2.9.0
注意点! 使用 @latest 冒险。这不会限制更新并允许立即访问 大师 将包含 破坏变化你被警告过!
| 资源 | CDN URL (简体中文) |
|---|---|
| 基本内容 字体.scs | https://cdn.jsdelivr.net/npm/@aurodesignsystem/ (中文(简体) ) 网芯样式表@latest/dist/bandled/ 必需.css |
| 焦点可见. scs 基本内容 字体.scs | https://cdn.jsdelivr.net/npm/@aurodesignsystem/ (中文(简体) ) 网芯样式表@latest/dist/bandled/ 必需+fv.css |
使用 npm 资源中的 Sass 文件
$ npm i @aurodesignsystem/webcorestylesheets
没有核心文件可以导入,相反,WCSS是一个à la carte 解决方案,允许用户加载自己想要的和何时想要的. WCSS 船舶作为 Sass 模块——装入文件 @use 如下所示:
@use "./../node_modules/@aurodesignsystem/webcorestylesheets/src/ ... " as *;
多主题支持
Web CoreStyle Sheets为阿拉斯加航空集团的各种品牌提供多主题支持. 每个主题包括自己的字体定义和样式.
可用主题
关于现有主题和如何使用这些主题的更多信息,请参见: 奥罗设计 脚本文档。 。 。 .
使用主题
要在工程中使用特定的主题,请加载相应的主题文件.
例如:
/* Alaska Airlines theme (Auro default) */
@use "./../node_modules/@aurodesignsystem/webcorestylesheets/src/essentials-as" as *;
其他主题载于本文件附件 src 目录.
捆绑主题资源
每个主题还有一个捆绑的版本 dist/bundles 包含快速执行基本内容的目录:
例如:
/* Alaska Airlines theme (Auro default) */
dist/bundles/essentials-as.css
发展
发展与WCSS同时运行 npm run watch 财务报告和审定财务报表 npm run serve 在单独的终端.
这个 watch 命令将运行一个 Sass linter,处理一个从 Sass 到 CSS 的测试文件,并运行一个 Post CSS linter 。 这将确保所有新增的Sass在回放中的质量.
如果需要额外的选择者或设想,请更新 ./scripts/testBuild.scss 用于测试代码的文件.
运行 serve 命令将打开 Sassdoc 视图。 请检查access-date=中的日期值 (帮助) Sassdoc制作所有文档时, 请审查所有更改 .
已执行的构建产出
两套文件是 产生和承诺 到还原点:
dist/——下游用户所消耗的被预处理的捆绑.src/type/mixins/_theme-codes.scss- 生成的 Sass 部分(@use "theme-codes") 作者:scripts/theme-codes.build.mjs从AuroDesignTokens主题定义。 因为它是承诺,一个直接sass引用编译时没有预建步骤 .
两者都是由 npm run build (运行中) build:theme-codes (第一编) 执行 没有 手剪他们.. _theme-codes.scss 由设计套件再生成,并且 dist/ 从 src/. CI 强制要求承诺的输出匹配一个新的构建,所以 当你改变时 src/ 或起起伏处 @aurodesignsystem/design-tokens运行 npm run build 并承担由此产生的修改 否则公关会失败.
仅重生部分主题代码:
$ npm run build:theme-codes