Sass 初心者向けチュートリアル_html/css_WEB-ITnose

1. Sass をインストールします

Sass をインストールする前に、ruby をインストールする必要があります。ダウンロード後、コンピューターが 32 ビットであるか 64 ビットであるかに注意してください。 : 下の図の項目をチェックして環境を追加する必要があります (JDK をインストールした友人は環境変数を知っているはずです)

次のステップ、次のステップ。 。 。インストールが完了したら、スタート メニューをクリックします:

コマンド gem install sass を入力します。インストールが失敗したことを示すリマインダーが表示されると思います:

デフォルトの Sass ダウンロード アドレス https://rubygems.org/ がブロックされているため、インストールに接続できません。 ping を実行すると、次のことがわかります。

はい、「壁」を「ひっくり返し」ましたが、インストールがまだ成功しないことがわかり、諦めてダウンロードアドレスをタオバオのhttps://ruby.taobao.org/に変更する必要がありました。 Ping は正常です:

次に行うことは、国内の淘宝網のアドレスを追加し、デフォルトでブロックされているアドレスを削除することです: gemsources -a https://ruby.taobao.org/タオバオアドレスを追加：

「ソースに追加されました」というプロンプトメッセージが追加が成功したことを示している場合は、コマンド gemsources を実行して既存のダウンロード アドレスを表示できます:

現在 2 つあり、1 つはデフォルトは、インストール前に削除する必要があります: gemsources -r https://rubygems.org/ ソースから削除されたプロンプトは、削除が成功したことを示します。 。

Sass を正常にインストールするには、淘宝網のアドレスが 1 つだけであることを確認してください:

OK、これで、 gem install sass を安全に実行してインストールできるようになります:

完璧!

2. scss ファイルを css ファイルにコンパイルします

まず新しい .scss ファイルを作成し、コードを作成します: (sass コードを書くのは難しいですが、コードの意味は理解できると思います)

.box {  background: #eee;  border: 2px solid #ccc;  .heading {    font-size: 14px;  }}.box2 {  @extend .box;  padding: 10px;}

私はここにいます test.scss ファイルとして保存し、コマンド ラインを使用してファイルが保存されているディレクトリ (私のディレクトリは E ドライブの ts フォルダーにあります) を入力し、変換コマンド sass test を実行します。 scss test.css test.scss ファイルを test.css ファイルにコンパイルします (css ファイル名は変更できます):

次に、ファイルが置かれているフォルダーに戻ると、さらにいくつかのファイルがあることがわかります。必要な test.css ファイルを含めます:

test.css ファイルを開くと、コンパイル前の scss ファイルのソース コードを比較すると、sass の威力がわかります:

もちろん、css ファイルを scss ファイルにコンパイルすることもできます: sass -convert test.css newtest.scss を入力して、test.css を newtest.scss ファイルにコンパイルします。詳細はこちら。今度は Sass 構文を学びましょう。私も初心者です。一緒に進歩していきましょう。