Unminify CSS styles | 易学教程

问题

I am trying to un-minify/un-merge my CSS styles. I have a style.css file with lots of merged styles in it, something like:

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

What I am trying to convert it into is:

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

How can I un-merge minified css styles to get such an output? I have tried several CSS Beautifiers and Unminifiers but they do not exactly what I need.

UPD: Here is the solution: codebeautifier.com . In order to get same output as in my example above, open this page, find Regroup selectors, set it to Only seperate selectors (split at ,), paste your CSS and hit Process CSS

回答1:

If you have Atom text editor, you can use atom-beautify . The link to the package is https://atom.io/packages/atom-beautify . That formats the code into well organized structure.

From your minified css, it formats it to look like this

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

With that atom package, you can format other popular languages, such as JavaScript, Python, Ruby, Swift, etc.

I hope this is what you are looking for.

回答2:

cat my.min.css | awk '{gsub(/{|}|;/,"&\n"); print}' >> my.css

回答3:

Try https://unminify.com/. Nothing to install, nothing to pay. Copy, paste, boom:

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

.style1 {
    border-radius: 15px
}

.style2 {
    border-radius: 0
}

.style3 {
    border-radius: 10px
}

来源：https://stackoverflow.com/questions/45916091/unminify-css-styles

标签

css

unminify