Ruby でコマンドラインを入力して Sass をコンパイルする (Ruby 初心者)_html/css

Ruby でコマンドラインを入力して Sass をコンパイルする (Ruby 初心者)_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:20:20

オリジナル

1220 人が閲覧しました

Ruby (または cmd) コマンドラインを入力して Sass をコンパイルします。手順は次のとおりです:

(1) 例: 最初に、F ドライブの下にフォルダーを作成します。 test フォルダー; 次に、このフォルダーの下に html、images、js、sass などのフォルダーを作成します。

(2) sassフォルダー内に使用するsassファイルを作成します。たとえば、common.scss、reset.scss、config.scss などのパブリックファイルや、プロジェクトで使用する必要があるさまざまなファイルなど、もちろん、ここにあるファイルは別のフォルダーに配置することもできますが、それらはすべて同じです。 sass フォルダーのサブディレクトリ。

(3) 以下はsassフォルダ配下のcommon.scssです:

 1 /* 2 *created by Irene 3 *2016-04-20 4  */ 5 div{ 6     width: 300px; 7     height: 300px; 8     border: 1px solid #000; 9     background-color: #333;10     p{11         width: 200px;12         height: 200px;13         background-color: #666;14         a{15             display: inline-block;16             width: 100px;17             height: 100px;18             background-color: #999;19         }20     }21 }

ログイン後にコピー

(4) Rubyを起動し、ショートカットキーを設定できます(スタートメニューでRubyを右クリックし、プロパティを選択して設定します)ショートカットキー）、（私はCtrl+Alt+Zに設定しました）。

(5) 手順に従ってコマンドラインを入力します。

次の構造が得られます:

(6) この場合のコマンドラインはキャッシュをクリアしないため、次のようにファイルとフォルダーが生成されます:

次の構造が得られます。

したがって、キャッシュをクリアするには --no-cache ディレクティブを使用するのが最善です。

(7) sass フォルダー内に複数の scss ファイルがあり、特定のファイルをコンパイル対象に指定したい場合は、どのファイルを指定するだけです。コマンドは以下の図に示されています。まず、sass ファイルのディレクトリを見つけて、sass フォルダー内のファイルを css フォルダー内のファイルに変換します。

次の構造が生成されました:

(8) 見つかった問題:

a。 test フォルダーの下に sass フォルダーを作成する必要があり、ruby は sass フォルダーを認識する必要があります (sass フォルダーを使用せずに直接コンパイルしようとしましたが、失敗しました)。 --no-cache はキャッシュをクリアすること、--watch はリスニング命令、--style はスタイル、compressed 命令は CSS ファイルを圧縮することができます。

c.また、さまざまな形式の CSS ファイルにコンパイルできる命令もいくつか見つかりました

(コマンドの「compressed」を置き換えます):

【1】nested: ネストされたインデントされた CSS コード。デフォルト値です。

 1 /* 2 *created by Irene 3 *2016-04-20 4  */ 5 div { 6   width: 300px; 7   height: 300px; 8   border: 1px solid #000; 9   background-color: #333; }10   div p {11     width: 200px;12     height: 200px;13     background-color: #666; }14     div p a {15       display: inline-block;16       width: 100px;17       height: 100px;18       background-color: #999; }19 20 /*# sourceMappingURL=common.css.map */

ログイン後にコピー

【2】expanded: インデントなし、展開された CSS コード。

 1 /* 2 *created by Irene 3 *2016-04-20 4  */ 5 div { 6   width: 300px; 7   height: 300px; 8   border: 1px solid #000; 9   background-color: #333;10 }11 div p {12   width: 200px;13   height: 200px;14   background-color: #666;15 }16 div p a {17   display: inline-block;18   width: 100px;19   height: 100px;20   background-color: #999;21 }22 23 /*# sourceMappingURL=common.css.map */

ログイン後にコピー

【3】compact: 簡潔な形式の CSS コード。

1 /*2 *created by Irene3 *2016-04-20 */4 div { width: 300px; height: 300px; border: 1px solid #000; background-color: #333; }5 div p { width: 200px; height: 200px; background-color: #666; }6 div p a { display: inline-block; width: 100px; height: 100px; background-color: #999; }7 8 /*# sourceMappingURL=common.css.map */

ログイン後にコピー

【4】(これも追加、強迫性障害…) 圧縮: 圧縮された CSS コード。 (本番環境では、圧縮されたものが一般的に使用されます)

1 div{width:300px;height:300px;border:1px solid #000;background-color:#333}div p{width:200px;height:200px;background-color:#666}div p a{display:inline-block;width:100px;height:100px;background-color:#999}2 /*# sourceMappingURL=common.css.map */

ログイン後にコピー

(独り言: この操作に関して、私の現在の理解はこれです。確かに非常に一方的で具体的ではありませんが、少しずつ学習して改善していきますステップ。)