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

WBOY
リリース: 2016-06-24 11:47:41
オリジナル
1698 人が閲覧しました

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 構文を学びましょう。私も初心者です。一緒に進歩していきましょう。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!