PostCSS | 笔记

yiyun

发布于 2023-07-20 21:58:13

30200

代码可运行

文章被收录于专栏：yiyun 的专栏yiyun 的专栏

运行总次数：0

代码可运行

引言

PostCSS 是专门用于处理 CSS 代码的工具，通过一系列的插件来修改最终样式，这样不仅可以让我们使用最新的 CSS 特性，提高开发效率，还可以转义 CSS，实现兼容大多数浏览器。它相当于 CSS 界的 Babel。

创建项目

mkdir postcss-notebook
cd postcss-notebook

yarn init -y

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <main>
      <div class="boxes">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
    </main>
  </body>
</html>

style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

main {
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  background: hsl(220deg, 10%, 5%);
}

.boxes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 100%;
  align-items: center;
  justify-items: center;
}

.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(
    156deg,
    rgba(0, 13, 168, 1) 0%,
    rgba(255, 0, 239, 1) 100%
  );
  border-radius: 8px;
  box-shadow: 0 0 48px rgba(255, 0, 239, 0.2);
}

安装并运行 PostCSS

yarn add --dev postcss postcss-cli

npx postcss style.css -o dist.css

会发现生成了 dist.css

index.html

     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="dist.css" />
     <title>Document</title>

预览

serve .

Autoprefixer

添加插件

yarn add --dev autoprefixer

使用插件

npx postcss style.css -o dist.css -u autoprefixer

可以发现生成的 dist.css 与 style.css 实质没啥区别, 因为目标的 CSS 属性都符合主流浏览器标准
可以使用以下命令插件哪些 CSS 属性需要兼容性

npx autoprefixer --info

修改支持兼容的浏览器

package.json

     "postcss-cli": "^10.1.0"
-  }
+  },
+  "browserslist": [
+    "cover 99.5%"
+  ]
 }

再运行

npx postcss style.css -o dist.css -u autoprefixer

发现很多 CSS 属性都被加上了前缀

dist.css

   padding: 0;
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
   font-family: sans-serif;
 }

@@ -16,20 +18,34 @@ main {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   height: 100%;
-  align-items: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+     -moz-box-align: center;
+          align-items: center;
   justify-items: center;
 }

postcss 支持配置文件: postcss.config.js

postcss.config.js

module.exports = {
  plugins: [require("autoprefixer")],
};

再运行，不用 -u 了：

npx postcss style.css -o dist.css

PostCSS Preset Env

使用最新的 CSS 特性，并编译为就浏览器兼容的语法，类似于 babel preset env 安装：

yarn add --dev postcss-preset-env

配置：

stage0：要使用 css 最新的嵌套语法

postcss.config.js

const postcssPresetEnv = require("postcss-preset-env");

module.exports = {
  plugins: [
    require("autoprefixer"),
    postcssPresetEnv({
      stage: 0, // 要使用 css 最新的嵌套语法
    }),
  ],
};

改动 style.css：

.box 使用嵌套方式设置 hover，交换渐变色

.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(
    156deg,
    rgba(0, 13, 168, 1) 0%,
    rgba(255, 0, 239, 1) 100%
  );
  border-radius: 8px;
  box-shadow: 0 0 48px rgba(255, 0, 239, 0.2);

  &:hover {
    background: linear-gradient(
      156deg,
      rgba(255, 0, 239, 1) 0%,
      rgba(0, 13, 168, 1) 100%
    );
  }
}

   border-radius: 8px;
   box-shadow: 0 0 48px rgba(255, 0, 239, 0.2);
+
+  &:hover {
+    background: linear-gradient(
+      156deg,
+      rgba(255, 0, 239, 1) 0%,
+      rgba(0, 13, 168, 1) 100%
+    );
+  }
 }

运行：

npx postcss style.css -o dist.css

dist.css

   max-width: 100%;
   height: 100vh;
-  background: hsl(220deg, 10%, 5%);
+  background: hsl(220, 10%, 5%);
 }

 .boxes {
@@ -47,3 +47,21 @@ main {
   -webkit-box-shadow: 0 0 48px rgba(255, 0, 239, 0.2);
           box-shadow: 0 0 48px rgba(255, 0, 239, 0.2);
 }
+
+.box:hover {
+    background: -webkit-linear-gradient(
+      294deg,
+      rgba(255, 0, 239, 1) 0%,
+      rgba(0, 13, 168, 1) 100%
+    );
+    background: -moz-linear-gradient(
+      294deg,
+      rgba(255, 0, 239, 1) 0%,
+      rgba(0, 13, 168, 1) 100%
+    );
+    background: linear-gradient(
+      156deg,
+      rgba(255, 0, 239, 1) 0%,
+      rgba(0, 13, 168, 1) 100%
+    );
+  }

StyleLint

检查 CSS 语法安装：

yarn add --dev stylelint stylelint-config-standard

添加配置文件：

标准检查

.stylelintrc.json

{
  "extends": "stylelint-config-standard"
}

配置 postcss.config.js ：

 module.exports = {
   plugins: [
     require("autoprefixer"),
+    require("stylelint"),
     postcssPresetEnv({
       stage: 0, // 要使用 css 最新的嵌套语法
     }),

运行：

npx postcss style.css -o dist.css

可以看到一些警告

PostCSS pxtorem

转换 px 为 rem 安装：

yarn add --dev postcss-pxtorem

配置：

postcss.config.js

   plugins: [
     require("autoprefixer"),
     require("stylelint"),
+    require("postcss-pxtorem"),
     postcssPresetEnv({
       stage: 0, // 要使用 css 最新的嵌套语法
     }),

修改 style.css ：

给 main 添加 font-size: 24px;

 main {
   width: 100vw;
   max-width: 100%;
   height: 100vh;
   background: hsl(220deg, 10%, 5%);
+  font-size: 24px;
 }

运行：

npx postcss style.css -o dist.css

dist.css

@@ -12,6 +12,7 @@ main {
   max-width: 100%;
   height: 100vh;
   background: hsl(220, 10%, 5%);
+  font-size: 1.5rem;
 }

 .boxes {

可以发现: font-size 从 24px 转换为了 1.5rem

npm script

package.json

"scripts": {
  "build": "postcss style.css -o dist.css",
  "build-2": "postcss style.css -o dist.css -u autoprefixer"
},

Q&A

`npm ERR! could not determine executable to run`

🦄  npx postcss style.css -o dist.css
npm ERR! could not determine executable to run

npm ERR! A complete log of this run can be found in:
npm ERR!     E:\npm-cache\_logs\2023-07-08T11_15_46_998Z-debug-0.log

解决

package.json

 {
   "name": "postcss-notebook",
   "packageManager": "yarn@3.6.0",
+  "scripts": {
+    "build": "postcss style.css -o dist.css"
+  },
   "devDependencies": {