Унифицировать стили CSS

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, но они не совсем то, что мне нужно.

Answer 1

Попробуйте https://unminify.com/. Нечего устанавливать, нечего платить. Копирование, вставка, бум:

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

.style1 {
    border-radius: 15px
}

.style2 {
    border-radius: 0
}

.style3 {
    border-radius: 10px
}

Answer 2

Если у вас есть 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 3

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

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, затем установите пакеты, затем установите prettify, используйте его. оно работает