css - pseudo - sass selectors

¿Hay algún formateador de código Sass?

Question

¿Hay algún formateador de código embellecedor para el código Sass (SCSS)? Sé cómo formatear el código CSS de salida generado por el compilador SCSS, pero ¿cómo dar formato auto agradable al código SCSS mismo?

He intentado con algún formateador CSS en línea pero no funcionan con el código SCSS.

Si les doy esto

.list5 {  
    border-bottom: 1px solid #f2f2f1;
    padding: 0 0 20px 0;
    margin: 0 0 20px 0;
ul li {
    margin: 0 0 5px 25px !important;
    height: auto !important;
    background: none !important;
    font-size: 14px;
    padding: 18px 3px 5px !important;
    width: 169px !important; }
 }

dan esta salida

.list5 {
    border-bottom: 1px solid #f2f2f1;
    padding: 0 0 20px 0;
    margin: 0 0 20px 0;
    margin: 0 0 5px 25px !important;
    height: auto !important;
    background: none !important;
    font-size: 14px;
    padding: 18px 3px 5px !important;
    width: 169px !important;
}

que eliminan esta parte ul li {}

Answer 1

En línea

Pegue su CSS / SCSS / LESS en dirtystylesheet.com y presione Limpiar

Vía Línea de Comando

A través de la línea de comando puede volver a formatear CSS / SCSS / Sass usando el script sass-convert :

$ sass-convert messy.scss clean.scss

o CSS a SCSS:

$ sass-convert messy.css clean.scss

o SCSS a Sass:

$ sass-convert messy.scss clean.sass

El script sass-convert se instala cuando instala Sass. Puede convertir cualquier dirección entre: css, scss y sass.

Conozca más sobre sass-convert :

• Acceda a la ayuda integrada: $ sass-convert --help
• http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#syntax
• http://sass-lang.com/docs/yardoc/#executables

Consejo para usuarios avanzados: debido a que la sintaxis de sass es mucho más estricta (solo permite una property: value par de property: value por línea) es menos probable que se encuentre con un problema con el código desordenado.

Answer 2

Ejecuté el código a través de Pretty Diff y obtuve esta salida:

.list5 {
    border-bottom:1px solid #f2f2f1;
    padding:0 0px 20px 0px;
    margin:0 0px 20px 0px;
    ul li {
        background: none !important;
        font-size: 14px;
        height: auto !important;
        margin: 0px 0px 5px 25px !important;
        padding: 18px 3px 5px !important;
        width: 169px !important;
    }
}

¿Es esto lo que estás buscando? Parece extraño para CSS.

Answer 3

Pretty Diff quitará el " $ " de tus variables.

Puede intentar: http://www.prettyprinter.de/

No es perfecto, pero al menos modela un nivel extra para las reglas anidadas y, por lo que he visto, mantiene intactos todos los elementos del scss (no lo quita).

Saludos

Answer 4

Si usa texto sublime, puedo recomendar SassBeautify para formatear rápidamente cualquier sass / scss https://packagecontrol.io/packages/SassBeautify

Answer 5

http://hilite.me/ - soporta Sass y Scss

JSFiddle también hará el truco. Simplemente presiona el botón TidyUp