@dsco_/common
这个包包含所有的 DSCO 设计常数,符号,和样式. 这些文件作为SCSS文件提供.
注释:
- 这个
@use萨斯特性只提供给达特·萨斯. 如果您使用不同的 Sass 执行, 请替换@use与@import。内部,本套件使用@import与所有 Sass 执行保持兼容. - 下面的导入路径使用“ 导出”字段
package.json,这个功能只提供给Webpack 5+消费者. 如果您使用Webpack 4或以下,您应该将此软件包导入为@dsco_/common(与“主”字段相对应)package.json),或指代包中的特定文件(例如,@dsco_/common/styles/_tokens.scss) (中文(简体) ).
组合
常见混音.
让我们假设这个导出定义 font-regular 混合剂。 示例用法:
@use '@dsco_/common/mixins';
.text {
@include mixins.font-regular;
}
样式
常见的公用事业类. 所有班级均应以 dsco- 名称间隔和一致性.
让我们假设这个导出定义 dsco-text 课。 示例用途:
常设委员会
// text.module.scss
@use '@dsco_/common/styles';
.text {
@extend .dsco-text;
// additional styles
}
Java 脚本
// Text.jsx
import '@dsco_/common/styles';
export default function Text({text}) {
return <p className="dsco-text">{text}</p>;
}
符号
一套SCSS变量作为DSCO的设计标志. 这些常数应当以 dsco- 名称间隔和一致性.
示例用法:
// @dsco_/common/tokens
$dsco-text-color: purple;
// text.module.scss
@use '@dsco_/common/tokens';
.text {
color: tokens.$dsco-text-color;
}