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 {}
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-convert --help
高度なユーザー向けヒント:sass
構文は非常に厳密であるため(1行に1つのproperty: value
ペアのみが許可されます)、乱雑なコードの問題。
http://hilite.me/ -SassとScssをサポート
JSFiddleもトリックを行います。 TidyUp
ボタンを押すだけです
Pretty Diffは、変数から「$」を取り除きます。
あなたは試すことができます: http://www.prettyprinter.de/
それは完璧ではありませんが、少なくともネストされたルールの余分なレベルをインデントし、私が見たものからすべてのscssのものを手付かずに保ちます(つまり、それを取り除きません)。
よろしく
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にとっては奇妙に見えます。
崇高なテキストを使用する場合は、SassBeautifyを使用してsass/scssをすばやくフォーマットすることをお勧めします https://packagecontrol.io/packages/SassBeautify