1. casa
  2. Domanda e risposta
  3. Esistono formattatori di codice Sass?

Esistono formattatori di codice Sass?

2012-03-21 14 views
34

Esiste un formattatore di abbellimento del codice per il codice Sass (SCSS)? So come formattare il codice CSS di output generato dal compilatore SCSS ma come dare una bella formattazione automatica al codice SCSS stesso?Esistono formattatori di codice Sass?

Ho provato alcuni formattatori CSS online ma non funzionano con il codice SCSS.

Se io do questo a loro

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

danno questa uscita

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

che sopprimere questa parte ul li {}

fonte

2012-03-21 Jitendra Vyas

risposta

70

online

Incollare il CSS/SCSS/LESS in a dirtystylesheet.com e ha colpito Clean

Via Command Line

via riga di comando è possibile ri-formato CSS/SCSS/Sass utilizzando lo script sass-convert:

$ sass-convert messy.scss clean.scss

o CSS per SCSS:

$ sass-convert messy.css clean.scss

o SCSS a Sass:

$ sass-convert messy.scss clean.sass

Lo script sass-convert viene installato quando si installa Sass. Può convertire qualsiasi direzione tra: css, scss e sass.

Per saperne di più su sass-convert:

avanzata punta utente: Poiché la sintassi sass è molto più severo (consente solo uno property: value coppia per linea) è meno probabile che si verifichi un problema con il codice disordinato.

fonte

2012-03-25 00:14:41

+2

nulla per l'utente di Windows? Pluging di Eclipse? :) –

+2

@ xchg.ca ho creato un plugin Sublime Text 2 di base che utilizza sass-convert https://github.com/badsyntax/SassBeautify – badsyntax

+2

@ xchg.ca - Dovresti trovare sass-convert.bat nel tuo Ruby cartella bin di installazione. – Mikepote

1

Ho eseguito il codice tramite Pretty Diff ed ho ottenuto questo output:

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

E 'questo quello che stai cercando? Sembra strano per i CSS.

fonte

2012-03-29 11:12:03 austincheney

+0

Hummmm, l'abbellimento è imperfetto per SCSS da Pretty Diff, ma appare funzionale. Sto lavorando per correggere quali difetti sono visibili da questo esempio immediato. – austincheney

+1

sei un creativo di Pretty Diff? –

2

Pretty Diff rimuove lo "$" dalle variabili.

Si può provare: http://www.prettyprinter.de/

non è perfetto ma almeno indenta un livello extra per le regole annidate e da quello che ho visto mantiene tutta la roba SCSS intatta (.ie non elimina fuori).

saluti

fonte

2012-06-04 01:25:35 ziku

11

http://hilite.me/ - supporta Sass e SCSS

JSFiddle farà il trucco pure. Basta premere il pulsante TidyUp

fonte

2012-09-30 02:07:57 Jason

+0

hilite.me è fantastico, grazie! –

Problemi correlati

 Problemi correlati