web-dev-qa-db-ja.com

Sassコードフォーマッタはありますか？

Sass（SCSS）コード用のコードビューティフォーマッタはありますか？私はSCSSコンパイラによって生成された出力CSSコードをフォーマットする方法を知っていますが、SCSSコード自体にニース自動フォーマットを与える方法は？

オンラインのCSSフォーマッタをいくつか試しましたが、SCSSコードでは動作しません。

これをあげたら

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

彼らはこの出力を与えます

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

この部分を削除するul li {}

csssasscompass-sass
37
Jitendra Vyas

オンライン

CSS/SCSS/LESSを dirtystylesheet.com に貼り付けて、ヒット Clean

コマンドライン経由

コマンドライン経由で、sass-convertスクリプトを使用してCSS/SCSS/Sassを再フォーマットできます。

$ sass-convert messy.scss clean.scss

またはCSSからSCSS：

$ sass-convert messy.css clean.scss

またはSCSSからSassへ：

$ sass-convert messy.scss clean.sass

sass-convertスクリプトは、Sassのインストール時にインストールされます。 css、scss、およびsassの間で任意の方向を変換できます。

sass-convertの詳細：

高度なユーザー向けヒント：sass構文は非常に厳密であるため（1行に1つのproperty: valueペアのみが許可されます）、乱雑なコードの問題。

74
Beau Smith

http://hilite.me/ -SassとScssをサポート

JSFiddleもトリックを行います。 TidyUpボタンを押すだけです

11
Jason

Pretty Diffは、変数から「$」を取り除きます。

あなたは試すことができます： http://www.prettyprinter.de/

それは完璧ではありませんが、少なくともネストされたルールの余分なレベルをインデントし、私が見たものからすべてのscssのものを手付かずに保ちます（つまり、それを取り除きません）。

よろしく

2
ziku

Pretty Diff でコードを実行すると、次の出力が得られました。

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

それはあなたが探しているものですか？ CSSにとっては奇妙に見えます。

1
austincheney

崇高なテキストを使用する場合は、SassBeautifyを使用してsass/scssをすばやくフォーマットすることをお勧めします https://packagecontrol.io/packages/SassBeautify

1
richimgd