@brandocms/europacss

^{数到十,你们就..}

EuropaCSS最初是作为 SASS 组合和功能的集合而开始的 在与设计机构合作时很方便,这些设计机构的设计非常具体,而且不同 断点。 这些设计系统能很好地翻译成配置并允许 抽出很多涉及锅炉板.

事后使用情况

示例 postcss.config.js数字 :

module.exports = {
  plugins: [
    require('@univers-agency/europacss')({
      // You can specify your config in one of these ways:

      // 1. Default: Automatically looks for ./europa.config.js or ./europa.config.cjs

      // 2. Path to config file:
      // config: './path/to/europa.config.js',

      // 3. Direct configuration object:
      // config: { /* Your europacss config */ },

      // 4. PostCSS Preset Env options:
      presetEnv: {
        // browsers: ['> 1%', 'last 2 versions'],
        // features: { /* specific features */ },
        // preserve: false,
        // disable: false  // Set to true to disable postcss-preset-env entirely
      }
    }),
    require('postcss-reporter')({ clearReportedMessages: true, throwError: false })
  ]
}

注:你不再需要列入 autoprefixer 或者说 css-mqgroup 因为这些问题现在由EuropaCSS内部处理.

页:1

• 记得留着你的 @import 在您的顶端的语句 .css 文件
• 添加

@europa arrows;
@europa base;

到您主样式表

CONFIG (英语)

setMaxForVw

如果您的最大容器有设定的最大尺寸, 您应该启用 setMaxForVw. 这将 确保您 vw 大小的最大断点设置为固定大小 .

例如,如果您有:

{
  setMaxForVw: true,
  theme: {
    container: {
      maxWidth: {
        mobile: '100%',
        tablet: '100%',
        desktop: '1920px'
      }
    },
    typography: {
      sizes: {
        h1: {
          mobile: '18px',
          tablet: '4vw',
          desktop: '4vw'
        }
      }
    }
  }
}

我们将替换桌面密钥 4vw 与 1920/100*4 这样字体就不会缩放 超过容器的最大宽度.

dpxViewportSize 财务报告和审定财务报表 dpxViewportSizes

在使用设计像素单位(dpx)时,您可以指定用于转换的参考视图宽度 设计像素到取景口宽度单位。 这在与 Figma 设计合作时特别有用 用于不同设备大小的特定宽度.

您可以设置全局引用宽度 dpxViewportSize,或指定不同的引用宽度 用于单个断点和断点集合 dpxViewportSizes数字 :

{
  // Global fallback reference width (used if no specific width is defined)
  dpxViewportSize: 1440, // Default is 1440px if not specified

  // Per-breakpoint and per-collection reference viewport widths
  dpxViewportSizes: {
    // Direct breakpoint references
    xs: 375,
    sm: 768,

    // Breakpoint collections
    $desktop: 1440,
    $tablet: 768,
    $mobile: 375
  },

  theme: {
    typography: {
      sizes: {
        heading: {
          mobile: '25dpx', // Uses 375px reference (from $mobile collection)
          tablet: '35dpx', // Uses 768px reference (from $tablet collection)
          desktop: '45dpx' // Uses 1440px reference (from $desktop collection)
        }
      }
    }
  }
}

例如,当使用时 25dpx 地点 $mobile 参考视图宽度为375px,将 转换为 6.667vw (单位:千美元)(25/375)*100) (中文(简体) ). 数值相同 $desktop 收藏将 使用 1440px 引用,导致 1.736vw (单位:千美元)(25/1440)*100) (中文(简体) ).

当处理 dpx 单位时, Europa 查找此顺序的引用宽度 :

1. 直接对决 dpxViewportSizes 用于当前断点(例如, xs, (中文(简体) ), md页:1
2. 比赛中 dpxViewportSizes 对于包含当前断点的集合(例如, $mobile, (中文(简体) ), $desktop(中文(简体) )
3. 全球 dpxViewportSize 价值
4. 1440px 的默认倒计时

这使得在保留设计文件的同时,很容易保持精确的尺寸 不同设备大小的取景器单元的反应行为.

Token 参考文献 (设计 Token 异名)

您可以在配置中引用其他主题值 {path.to.value} 语法. 用于创建语义符号,用于引用原始符号,与 设计符号系统,如"样式词典"和"Figma Tokens".

module.exports = {
  theme: {
    colors: {
      red: '#f00',
      blue: '#00f'
    },

    button: {
      // Full reference — resolves to '#f00'
      primary: '{colors.red}',
      secondary: '{colors.blue}'
    },

    spacing: {
      xs: { xs: '10px', sm: '15px', md: '15px', lg: '15px', xl: '15px' },
      // Object reference — copies the entire breakpoint object
      block: '{spacing.xs}'
    },

    border: {
      // Partial interpolation — resolves to '1px solid #f00'
      default: '1px solid {colors.red}'
    }
  }
}

全文 (单位:千美元)'{colors.red}': 当整个字符串是单个时 {ref},解决 值保留其原始类型(字符串、对象、阵列).

部分内插 (单位:千美元)'1px solid {colors.red}': 每个 {ref} 已替换字符串。 仅 当引用的值是字符串或数字时工作.

链条参考文献 被支持——一个指使符可以指另一个指使符本身是一个 参考文献.

循环引用和缺失路径会丢出描述性错误 .

类型

大小

typography sizes size_name breakpoint_name数字 : value

实例

常规设置 :

  typography: {
    sizes: {
      base: {
        mobile: '16px'
      }
    }
  }

若为 value 是对象,所有属性都将被添加到选择器中,即:

  typography: {
    sizes: {
      base: {
        mobile: {
          'font-size': '16px',
          'line-height': 1.25
        }
      }
    }
  }

分级打字法(新以β.6为单位)数字 :

您可以使用斜线标记来组织您的打字, 以便更好的设计系统对齐 :

typography: {
  sizes: {
    // Traditional flat structure (still supported)
    xs: { mobile: '12px', tablet: '14px' },

    // Hierarchical structure using literal slash keys
    'header/large': { mobile: '32px', tablet: '40px', desktop: '48px' },
    'header/medium': { mobile: '24px', tablet: '28px', desktop: '32px' },
    'body/regular': { mobile: '14px', tablet: '16px', desktop: '18px' },

    // OR use nested structure for path traversal
    header: {
      small: { mobile: '18px', tablet: '20px', desktop: '24px' }
    },
    body: {
      small: { mobile: '12px', tablet: '14px', desktop: '16px' },
      caption: { mobile: '10px', tablet: '12px', desktop: '14px' }
    }
  },

  families: {
    // Traditional flat structure
    main: ['Helvetica', 'Arial', 'sans-serif'],

    // Hierarchical structure using literal slash keys
    'body/regular': ['Inter', 'Helvetica', 'sans-serif'],
    'header/display': ['Playfair Display', 'Georgia', 'serif'],

    // OR use nested structure for path traversal
    body: {
      strong: ['Inter-Bold', 'Helvetica-Bold', 'sans-serif']
    }
  }
}

这允许更多的直观使用, 匹配像 Figma 这样的设计工具 :

@font header/display;        /* Uses literal 'header/display' key or header.display path */
@fontsize body/regular;      /* Uses literal 'body/regular' key or body.regular path */
@fontsize header/large/1.2;  /* With line-height */
@fontsize header/small;      /* Uses nested header.small structure */
@font body/strong;           /* Uses nested body.strong structure */

优先权:先检查字串键,如果找不到字串键,则尝试路径 traversal.

减少重复使用 __base__ (新译为β.9)数字 :

使用特别 __base__ 键以定义适用于所有断点的共同属性,减少配置重复:

typography: {
  sizes: {
    'body-large': {
      // Common properties applied to parent rule (outside media queries)
      __base__: {
        'line-height': '135.2%',
        'letter-spacing': '-0.02em'
      },
      // Breakpoint-specific properties (in media queries)
      xs: { 'font-size': '20px' },
      sm: { 'font-size': '25px' },
      md: {
        'font-size': '30px',
        'line-height': '140%'  // Overrides __base__ line-height for md
      }
    }
  }
}

用法 :

h2 {
  @fontsize body-large;
}

生成的 CSS :

h2 {
  line-height: 135.2%;
  letter-spacing: -0.02em;
}
@media (width <= 739px) {
  h2 { font-size: 20px; }
}
@media (width >= 740px) and (width <= 1023px) {
  h2 { font-size: 25px; }
}
@media (width >= 1024px) {
  h2 {
    font-size: 30px;
    line-height: 140%;  /* Overrides base */
  }
}

函数调用在 __base__数字 :

您可以在 __base__ 以引用您主题配置的其他部分。 这对参考字体家族特别有用:

typography: {
  families: {
    main: ['Inter', 'system-ui', 'sans-serif'],
    'header/display': ['Playfair Display', 'Georgia', 'serif']
  },
  sizes: {
    'body-text': {
      __base__: {
        // Function receives theme object and automatically joins arrays
        'font-family': theme => theme.typography.families.main,
        'letter-spacing': '0.01em'
      },
      xs: '14px',
      sm: '16px',
      md: '18px'
    },
    heading: {
      __base__: {
        // Works with hierarchical keys too
        'font-family': theme => theme.typography.families['header/display'],
        'text-transform': 'uppercase'
      },
      xs: '24px',
      sm: '28px',
      md: '32px'
    }
  }
}

函数可以返回 :

• 阵列: 自动加入适当的分隔符 (, 页:1 font-family空间 transform页:1
• 字符串: 直接使用
• 支持的数组属性 : font-family, (中文(简体) ), background-image, (中文(简体) ), box-shadow, (中文(简体) ), text-shadow, (中文(简体) ), transition, (中文(简体) ), animation, (中文(简体) ), filter, (中文(简体) ), transform

这对打字的风格特别有用 line-height, (中文(简体) ), letter-spacing, (中文(简体) ), font-family,或者其他属性在断点之间保持不变,而仅 font-size 变化.

轨道

待办事宜

@responsive {breakpointQuery} {block} (别名: @mq(中文(简体) )

实例数字 :

@responsive desktop_md {
  display: none;
}

@responsive <=ipad_portrait {
  color: red;
}

您还可以使用 @mq 作为更短的别名:

@mq desktop_md {
  display: none;
}

自定义带箭头语法的区域数字 :

对于与您定义的断点不符的正交媒体查询,请使用箭头语法:

/* Custom min and max */
@mq 359px->740px {
  font-size: 14px;
}

/* Open-ended min (no max) */
@mq 500px-> {
  display: flex;
}

/* Open-ended max (no min) */
@mq ->800px {
  padding: 10px;
}

@color {fg/bg/stroke/fill/border/border-[top|bottom|left|right]} {colorName/hex}

尝试得到 colorName 从 theme.colors,否则会通过颜色. 可以通过点或斜线标记来访问嵌入的颜色(headings.h2 或者说 headings/h2) (中文(简体) ).

实例数字 :

h2 {
  @color fg headings.h2;
  @color fg headings/h2;  /* equivalent */
  @color bg transparent;
}

@grid

在所有断点设置您沟槽配置的列间隙.

实例数字 :

.my-grid {
  @grid;
  grid-template-areas: "a b"
                       "a c";
  grid-template-columns: 6fr 6fr;

  .a {
    grid-area: a;
  }

  .b {
    grid-area: b;
  }

  .c {
    grid-area: c;
  }
}

这就形成了6个柱子宽的堆放网格.

@display [displayType[/flexDirection][/flexWrap]] [breakpointQuery]

添加响应显示的快捷键 .

实例数字 :

article {
  @display flex $mobile;
}

article {
  @display flex/row/wrap $mobile;
}

@order {orderNumber} [breakpointQuery]

添加响应命令的快捷键 .

实例数字 :

article {
  @order 1 $mobile;
}

bed bed {

小册子数字 :

{aspectRatio}

• 第16/9号来文

@space {decl} {sizeQuery} [breakpointQuery]

小册子数字 :

{decl}

• container (不接受) sizeQuery,仅限 [breakpointQuery](中文(简体) )
• margin-x, (中文(简体) ), margin-y, (中文(简体) ), padding-x, (中文(简体) ), padding-y
• translateX, (中文(简体) ), translateY, (中文(简体) ), translateZ, (中文(简体) ), scale
• 任何接受你给出的值的道具.

{sizeQuery}

• xs > 从 XS 获取 theme.spacing 地图.
• -xs > 从 XS 获取负值 theme.spacing 地图.
• 2 > 获取 2 是沟道的两倍.
• 1/3 > Calcs a分数.
• 3:1/6 > Calcs 分数为 3/ 6,但增加了 1个地沟单元
• xs/2 > 从 XS 中获取一半 theme.spacing 地图.
• between(20px-50px) > 从断点开始的20px到断点结束的50px的数值缩放.
• container > 从 theme.container.padding 为断点.
• -container > 获取负值 theme.container.padding 为断点.
• vertical-rhythm(theme.typography.sizes.xl) > 抓取断点对象并用默认行高相乘.
• vertical-rhythm(theme.typography.sizes.xl, 1.2) > 抓取断点对象并乘以1.2为行高.
• calc(100vw - var[container] + var[1]) > 开关 var[container] 财务报告和审定财务报表 var[1] 有正确数值的 集装箱铺设和每个断口1个地沟单元.
• 20dpx > 设计以视图宽度为比例的像素单位 dpxViewportSize 设置( 默认为 1440px ).
• negate(currentGap, desiredGap) > 消除当前差距并增加预期差距. 用来克服关于个别儿童的弹性列间隙。 总是输出 margin-top。 。 。 . 期望的差距可包括: negate(block, block+xs), (中文(简体) ), negate(block, block-2vw)。 。 。 .

实例数字 :

.block {
  @space margin-y xl/2;

  &:first-of-type {
    @space margin-top xl;
  }

  &:last-of-type {
    @space margin-bottom: xl;
  }
}

.overlap {
  /* Use negative named spacing to create overlaps */
  @space margin-top -block;
}

.flex-column-child {
  /* Override flex column gap: negate the parent gap and add desired gap */
  @space negate(block, 25px);
  /* Or use expressions: negate(block, block+xs) */
}

.powerful-stuff {
  /* move element 4 columns + a gutter size to the left */
  @space translateX calc(var[4:1/12] * -1);
}

如果您需要将设定属性标记为 !important 您可以使用 @space!

  @space! margin-left xs;

@font {fontFamily} [fsQuery]

选择字体家族。 也可以通过字体大小查询.

小册子数字 :

{fontFamily}

• 选择 fontFamily 从 typography.families
• 等级密钥: 对有组织的打字(如:, body/regular 或者说 body.regular, (中文(简体) ), header/display 或者说 header.display(中文(简体) )
• 两种标记都支持走道(例如, body/regular 财务报告和审定财务报表 body.regular 两人为 'body/regular': [...] 财务报告和审定财务报表 body: { regular: [...] }(中文(简体) )

[fsQuery]

• 也可以通过。 将创建 @fontsize 规则与 fsQuery 作为参数

带有分级打字的示例数字 :

@font body/regular;        /* Uses 'body/regular' from families config */
@font header/display xl;   /* Uses 'header/display' font with 'xl' size */

@fontsize {fsQuery} [breakpointQuery]

小册子数字 :

{fsQuery}

• lg > 选择 lg 密钥从 theme.typography.sizes 跨断点
• lg/2.0 > 另设 line-height 改为 2.0
• lg(2.0)/2.0 > 添加修改符 (2.0) 用于最终字体大小.
• between(18px-22px) >响应字体大小,从18px到22px. 需要一个断点才能正常运行 .
• product.size 或者说 product/size > 绕过密钥路径 product.size 在内部 theme.typography.sizes
• 20dpx > 设计以视图宽度为比例的像素单位 dpxViewportSize 设置( 默认为 1440px)
• 等级密钥:对有组织大小(如:, header/large 或者说 header.large(中文(简体) )
• 两种标记都支持走道(例如, header/large 财务报告和审定财务报表 header.large 两人为 'header/large': {...} 财务报告和审定财务报表 header: { large: {...} }(中文(简体) )

[breakpointQuery]

• xs > 只针对 xs 断点
• >=md > 仅用于较大或等于 md

带有分级打字的示例数字 :

@fontsize header/large;        /* Uses 'header/large' size from config */
@fontsize body/small/1.5;      /* Uses 'body/small' size with line-height 1.5 */
@fontsize header/large >=md;   /* Responsive: header/large for md and up */

说明:解析器在智能上区分了分级键(如:, header/large)和行高语法(例如, 24px/1.5)先检查配置密钥.

ease() function

作为 CSS 立方倍值提供宽松函数。 此函数可用于任何 CSS 属性中接受 transition-timing-function 数值.

小册子数字 :

type

• 标准 : ease, (中文(简体) ), ease.in, (中文(简体) ), ease.out, (中文(简体) ), ease.inOut
• 线: sine.in, (中文(简体) ), sine.out, (中文(简体) ), sine.inOut
• 四点: quad.in, (中文(简体) ), quad.out, (中文(简体) ), quad.inOut
• 立方体 : cubic.in, (中文(简体) ), cubic.out, (中文(简体) ), cubic.inOut
• 夸特: quart.in, (中文(简体) ), quart.out, (中文(简体) ), quart.inOut
• Uin: quint.in, (中文(简体) ), quint.out, (中文(简体) ), quint.inOut
• 展览 : expo.in, (中文(简体) ), expo.out, (中文(简体) ), expo.inOut
• 循环 : circ.in, (中文(简体) ), circ.out, (中文(简体) ), circ.inOut
• 回来: back.in, (中文(简体) ), back.out, (中文(简体) ), back.inOut
• 动力1-4: power1.in, (中文(简体) ), power1.out, (中文(简体) ), power1.inOut 结束 power4.in, (中文(简体) ), power4.out, (中文(简体) ), power4.inOut

实例数字 :

.element {
  transition: transform 300ms ease('power3.out');
}

.another-element {
  transition: opacity 500ms ease('sine.inOut'), transform 800ms ease('back.out');
}

注意: 如果提供无效的宽松名称, CSS 处理过程中会抛出一个错误 .

@if {value} {block}

渲染器 {block} 若为 {value} 这是真的。 否则就忽略了它.

小册子数字 :

{value}

• theme.typography.optimizeLegibility > 检查主题配置中的值.

实例数字 :

@if theme.typography.optimizeLegibility {
  article {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

@column {sizeQuery} [breakpointQuery]

在规则内创建弹性列.

小册子数字 :

{sizeQuery}

• 1/3 > 占用三分之一的容器,跨越所有断点
• 3:1/6 > 用三分之一的容器,跨越所有断点,有1个地沟
• calc(var[container] + var[6/12]) > 6/12列+容器沟道宽度

[breakpointQuery]

• xs > 仅用于 xs 断点
• xs/sm/xl > 对于 xs, sm和 xl 断点
• <=md > 减去并等于 md 断点

实例数字 :

article {
  @column 1/3;
  @column 3/3 xs;
}
/* Column is 1/3 wide on all devices, except xs, which is 3/3. */

@iterate {iterable} block

通过配置对象进行迭接.

小册子数字 :

{iterable}

• 主题中的路径。object, I.E theme.header.padding.small

实例数字 :

article {
  @iterate theme.header.padding.small {
    @responsive $key {
      padding-top: $value;
      padding-bottom: $value;
    }
  }
}

这为每个密钥创建媒体查询 theme.header.padding.small

@unpack {object}

解开配置对象.

小册子数字 :

{object}

• 主题对象中的路径, I.E theme.typography.sections.navigation

实例数字 :

article {
  @unpack theme.typography.sections.navigation;
}

结果

  @media (min-size: 0) and (max-size: 749px) {
    article {
      font-size: 1.2rem;
      line-height: 1.6;
    }
  }

  @media (min-size: 750px) and (max-size: 1039px) {
    article {
      font-size: 1.4rem;
      line-height: 1.5;
    }
  }

  /* ... */

当地发展

为了在不出版的真实项目中测试EuropaCSS的本地开发版本, 使用 pnpm 键 file: 协议。 执行 没有 使用情况 pnpm link 它会形成一个连结 导致插件自行解决 postcss 而不是分享项目的, 导致无声处理失败.

在消费项目 package.json数字 :

{
  "devDependencies": {
    "@brandocms/europacss": "file:/path/to/europacss"
  }
}

然后运行 pnpm install。在对插件源进行修改后,重建 (单位:千美元)yarn build运行 pnpm install 在消费项目中提取变化.

完成后, 切换回注册版本 :

{
  "devDependencies": {
    "@brandocms/europacss": "1.0.0-beta.14"
  }
}

使用后针头

如果没有以下大插件,这是不可能的 :

• postcss-extend-rule
• postcss-functions
• postcss-nested
• postcss-preset-env
• postcss-combine-duplicated-selectors
• postcss-nesting