PostCSS 的嵌套语法用于 :hover 和 :focus

Posted 2023-03-06

【中文标题】PostCSS 的嵌套语法用于 :hover 和 :focus

【英文标题】：Nested syntax with PostCSS for :hover and :focus

【发布时间】：2020-12-12 11:26:26

【问题描述】：

我正在使用 TailwindCSS 和 PostCSS，我有这个 css 代码：

.btn 
  @apply py-1;
  @apply px-4;
  @apply border;
  @apply rounded;


.btn:hover 
  @apply bg-white text-black;


.btn:focus 
  @apply bg-black text-white;

PostCSS 中是否有本地方式（或使用插件）来编写如下代码？

.btn 
  @apply py-1;
  @apply px-4;
  @apply border;
  @apply rounded;

  &:hover 
    @apply bg-white text-black;
  
  
  &:focus 
    @apply bg-black text-white;
  

【问题讨论】：

搜索如何使用 postcss 和 sass

类似npmjs.com/package/postcss-sass

我没有使用 SASS！

是的，但是你需要添加一个插件

toptal.com/front-end/postcss-sass-new-play-date 这是一篇关于此的文章，可能会有所帮助

【参考方案1】：

使用postcss-preset-env。

第一次安装，npm install postcss-preset-env --save-dev。

然后在您的postcss.config.js 文件中启用nesting-rules，

module.exports = 
  plugins: [
    "tailwindcss",
    [
      "postcss-preset-env",
      
        stage: 3,
        features: 
          "nesting-rules": true,
        ,
      ,
    ],
  ],
;

在这里你可以找到可以启用的list of features ID

【参考方案2】：

您也可以使用postcss-nested 插件。

在你的package.json:

  "dependencies": 
    "postcss": "^8.2.9",
    "tailwindcss": "^2.0.4",
    "postcss-nested": "^5.0.5"
  

在你的postcss.config.js:

module.exports = 
  plugins: [
    require('postcss-nested'),
    require('tailwindcss'),
  ]

【参考方案3】：

也可以，遵循对象符号Reference

module.exports = 
    plugins: 
        'postcss-import': ,
        tailwindcss: ,
        autoprefixer: ,
        'postcss-preset-env':  stage: 2 ,
    ,