web-dev-qa-db-ja.com

CSSからSASS（またはLESS）への変換

誰かがいくつかのCSSをより少なく推奨したり、CSSを変換ツールに推奨できますか？私はいくつかを見つけました。 http://css2less.cc/ および http://css2sass.herokuapp.com/ ただし、信頼性（または他のツールの推奨事項）についての洞察は大歓迎です。ホワイトラベルソリューション用の大規模なCSSコードベースがあり、CSSプリプロセッサを配置することで大きなメリットが得られますが、手動でsass/lessに変換するのは大きな作業です。

前もって感謝します

編集：私は特に、（上にリストされたような（より良いものがない場合）ツールを使用して）SASSやLESSなどのCSSプリプロセッサを使用するために大きなCSSコードベースを変換する経験に興味があることを強調する必要があります。または、そのような偉業を達成する他の方法（リストされているツール以外）が実用的である場合。どのようなハードルを克服しなければなりませんでしたか？試みる価値さえありますか？または、そのようなメタ言語は、ゼロから始めることができる新しいプロジェクトにのみ適していますか？

csssassless
27
rbginge

SASSの良いところは、CSSをSASSに変換する必要がないことです。SA​​SSはCSSの拡張機能です。

コピーして貼り付けるだけで準備完了です。

ただし、CSSを適切に構造化されたSASSファイルにリファクタリングすることを検討している場合、それはツールでは実現できないと思います。

15
Clark Pan

http://css2sass.heroku.com/ で良い経験をしました。また、GitHubでコードベースを見つけることもできます。また、元のsass gemによってインストールされるsass-convertツールを介してファイルを直接変換することもできます。基本的にこれはcss2sassが行っていることです。

ただ電話する：

sass-convert -F css -T sass original_file.css converted_file.sass
26
bjunix

この投稿には、今後の視聴者のために、次の2つのオンラインツールが必要です。

まず、私は常にこのオンラインツールを介してCSSを実行し、それをより簡潔な速記CSSに変換します http://shrthnd.volume7.io/ -説明は本当に必要ありません。あなたはすでにCSSをそのように書く習慣がありません。

次に、このオンラインツールを介して http://sebastianpontow.de/css2compass/ -これは、cssからscssファイルを作成するための非常に優れたツールです。すべての色を好みの形式に変換し、色変数とフォント変数を設定し、CSSに対して何が行われたかを見るだけで、sassの基本を全体的に把握できます。

2番目のツールであまり望ましくないと気づいた唯一のことは、この$font_0: Open Sans; $font_1: Roboto Condensed; $font_2: arial;などのフォントファミリに名前を付けることです。実際のフォントの短い形式で名前を付けたり、$font_main, $font_sub, $font_callout, $font_titlesなどのコンテンツに関連する3〜5個の名前を設定したりする方が、より直感的です。しかし、それをすべて新しいscssファイルに貼り付けると、30秒の修正になります:)

10
Benbodhi

少し遅れましたが、最近このオンライン変換ツールを見つけました。

http://css2sass.heroku.com/

有効なCSSを拒否することもありましたが、助けてくれました

4
Bart Burg

私は実際に今何かを見つけました： Leafo

基本的なフォーマットを行います、例えば：

#header {
/* ... */
}

#header p {
/* ... */
}
to

#header {
/* ... */
p {
/* ... */
}
}

それが役に立てば幸い！

そして、sassからcssを確認するために何かを確認したい場合は、sassオンラインWebサイトを試すことができます... Tass Sass Online

0
Sri

コードをクリーンに保つために、CSSをSASSまたはLESS（プロジェクトによって異なる）に頻繁に変換する必要があります。これは私が使用するツールです： http://csstoss.com/

1つの場所でCSSをSASS、SCSS、またはLESSに変換できます。

それが役に立てば幸い！

0
Hieu Nguyen