如何添加空行的规则之间时，使CSS从SCSS？

hc2pp10m 于 2022-12-01 发布在其他

关注(0)|答案(1)|浏览(180)

我有一个简单的scss文件：

.slogan {
  text-align: center;
  line-height: 36px;
  letter-spacing: 0;

  &-title {
    font-size: 30px;
    font-weight: 700;
  }

  &-detail {
    font-size: 22px;
    font-weight: 400;
  }
}

当我将它编译为css时，输出文件看起来很好：

.slogan {
  text-align: center;
  line-height: 36px;
  letter-spacing: 0;
} 
.slogan-title {  <--- Expected empty line before rule
  font-size: 30px;
  font-weight: 700;
}
.slogan-detail {  <--- Expected empty line before rule
  font-size: 22px;
  font-weight: 400;
}

但是stylelint中有几个错误

at规则前应为空行（at规则前为空行）*

和代码必须满足liter要求。
我在开发时使用watch选项运行编译器，
npx sass scss:css --watch --no-source-map
所以，问题是：是否可以配置一个sass编译器来生成输出css文件并保留规则之间的空行？

css

来源：https://stackoverflow.com/questions/74585165/how-to-add-empty-line-between-rules-when-making-css-from-scss

1条答案

按热度按时间

h7wcgrx31#

有一些基于JavaScript的开源SASS编译器，添加一个类似的简单代码片段应该对你有用。

function addCSSLine(css){
    let cssWithoutLine = `${css}`;
    let cssWithLine = cssWithoutLine.replace(/}/g, `}\n`);
    console.log(cssWithLine);
}

addCSSLine(`ADD YOUR CSS HERE`);

赞(0）回复(0）举报 2022-12-01

我来回答

如何添加空行的规则之间时，使CSS从SCSS？

1条答案

相关问题

热门标签

最新问答