web-dev-qa-db-fra.com

Existe-t-il des formateurs de code Sass?

Existe-t-il un formateur d'embellissement de code pour le code Sass (SCSS)? Je sais comment formater le code CSS de sortie généré par le compilateur SCSS mais comment donner un formatage automatique Nice au code SCSS lui-même?

J'ai essayé un formateur CSS en ligne mais ils ne fonctionnent pas avec le code SCSS.

Si je leur donne ça

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

ils donnent cette sortie

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

qui supprime cette partie ul li {}

csssasscompass-sass
37
Jitendra Vyas

En ligne

Collez votre CSS/SCSS/LESS dans dirtystylesheet.com et appuyez sur Clean

Via la ligne de commande

Via la ligne de commande, vous pouvez reformater CSS/SCSS/Sass en utilisant le sass-convert script:

$ sass-convert messy.scss clean.scss

ou CSS vers SCSS:

$ sass-convert messy.css clean.scss

ou SCSS à Sass:

$ sass-convert messy.scss clean.sass

Le sass-convert le script est installé lorsque vous installez Sass. Il peut convertir n'importe quelle direction entre: css, scss et sass.

En savoir plus sur sass-convert:

Astuce utilisateur avancée: Parce que la syntaxe sass est beaucoup plus stricte (autorisant une seule property: value paire par ligne), vous êtes moins susceptible de rencontrer un problème avec du code en désordre.

74
Beau Smith

http://hilite.me/ - prend en charge Sass et Scss

JSFiddle fera aussi l'affaire. Appuyez simplement sur le bouton TidyUp

11
Jason

Pretty Diff supprimera le " $ " de vos variables.

Vous pouvez essayer: http://www.prettyprinter.de/

Ce n'est pas parfait, mais au moins il indente un niveau supplémentaire pour les règles imbriquées et d'après ce que j'ai vu, tout le contenu scss reste intact (.ie ne le supprime pas).

Cordialement

2
ziku

J'ai exécuté le code via Pretty Diff et j'ai obtenu cette sortie:

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

C'est bien ce que vous cherchez? Cela semble étrange pour CSS.

1
austincheney

Si vous utilisez du texte sublime, je peux recommander SassBeautify pour formater rapidement tout sass/scss https://packagecontrol.io/packages/SassBeautify

1
richimgd