1

我正在尝试取消缩小/取消合并我的 CSS 样式。我有一个 style.css 文件，里面有很多合并的样式，比如：

.style1,.style2,.style3{float: right}.style1{border-radius: 15px}.style2{border-radius: 0}.style3{border-radius: 10px}

我试图将其转换为：

.style1{float: right;border-radius: 15px}
.style2{float: right;border-radius: 0}
.style3{float: right;border-radius: 10px}

如何取消合并缩小的 CSS 样式以获得这样的输出？我已经尝试了几个 CSS Beautifiers 和 Unminifiers，但它们并不完全符合我的需要。

UPD：这是解决方案：codebeautifier.com 。为了获得与上面示例相同的输出，请打开此页面，找到 Regroup selectors，将其设置为Only seperate selectors (split at ,)，粘贴您的 CSS 并点击Process CSS

4

5 回答 5

1

如果你有Atom文本编辑器，你可以使用atom-beautify. 包的链接是https://atom.io/packages/atom-beautify。这会将代码格式化为组织良好的结构。

从您的缩小版css中，它将其格式化为如下所示

.style1 {
   float: right;
   border-radius: 15px;
}
.style2 {
   float: right;
   border-radius: 0;
}
.style1 {
   float: right; 
   border-radius: 10px;
}

使用该 atom 包，您可以格式化其他流行语言，例如JavaScript, Python, Ruby,Swift等。

我希望这就是你要找的。

于 2017-08-28T09:59:12.793 回答
1

尝试https://unminify.com/。无需安装，无需付费。复制、粘贴、繁荣：

.style1,
.style2,
.style3 {
    float: right
}

.style1 {
    border-radius: 15px
}

.style2 {
    border-radius: 0
}

.style3 {
    border-radius: 10px
}

于 2019-05-26T18:49:40.097 回答
0 
cat my.min.css | awk '{gsub(/{|}|;/,"&\n"); print}' >> my.css
于 2018-02-11T22:31:23.037 回答
-1

在 Sublime 中美化它，使用 ctrl + Shift + P 然后安装包然后安装 prettify ，使用它。有用

于 2021-08-09T02:08:38.317 回答
-1

试试这个工具：https ://fixcode.org/minify/css

我在 css minifier 中运行了你的代码，这就是结果

.style1,
.style2,
.style3 {
   float: right
}
.style1 {
   border-radius: 15px
}

.style2 {
   border-radius: 0
}

.style3 {
   border-radius: 10px
}
于 2021-08-09T13:34:25.637 回答