为狂热的 HTML 爱好者而设!

Pico提供了一个无类版本（示例）。

在这个版本中，

、
和
充当容器，用于定义居中或流式视口。

  1. // Containers
  2. body > header,
  3. body > main,
  4. body > footer {
  5.   …
  6. }

使用方法：

如果您需要居中视口，请使用默认的无类版本：

<link rel="stylesheet" href="css/pico.classless.min.css">

或者，如果您需要一个流式容器，请使用 .fluid.classless 版本：

  1. <link rel="stylesheet" href="css/pico.fluid.classless.min.css">

这些无类版本也可以在 jsDelivr CDN 上找到：

  1. // Centered viewport
  2. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.classless.min.css">
  1. // Fluid viewport
  2. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.fluid.classless.min.css">

如果您需要自定义 <header>、<main>和<footer>的默认父级（<body>），您可以通过定义另一个 CSS 选择器重新编译 Pico。

对于 React、Gatsby 或 Next.js 等框架非常有用。

  1. /* Custom Class-less version for React */
  3. // Set the root element
  4. $semantic-root-element: "#root";
  6. // Enable <header>, <main>, <footer> inside $semantic-root-element as containers
  7. $enable-semantic-container: true;
  9. // Enable .classes
  10. $enable-classes: false;
  12. // Import Pico
  13. @import "@picocss/pico/scss/pico";

上述代码将使用以下方式定义的容器来编译 Pico：

  1. // Containers
  2. #root > header,
  3. #root > main,
  4. #root > footer {
  5.   …
  6. }