Question

我正在尝试取消缩小/取消合并我的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

Answer 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;
}

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

我希望这就是你要找的东西。

Answer 2

printf("\n")

Answer 3

尝试https://unminify.com/。无需安装，无需支付任何费用。复制，粘贴，吊杆：

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

Answer 4

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

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

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

.style2 {
   border-radius: 0
}

.style3 {
   border-radius: 10px
}

Answer 5

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

取消CSS样式

5 个答案: