Sass-installation
Sass-インストール
この章では、Rubyをインストールするための段階的な手順を学びます。RubyはSASSファイルの実行に使用されます。
SASSのシステム要件
- オペレーティングシステム-クロスプラットフォーム
- ブラウザのサポート-IE（Internet Explorer 8 +）、Firefox、Google Chrome、Safari、Opera
- プログラミング言語-Ruby
Rubyのインストール
- ステップ1 *-リンクhttps://www.ruby-lang.org/en/downloads/を開くと、次のような画面が表示されます-
_現在の安定版のzipファイルをダウンロードします。
ステップ2 *-次に、セットアップを実行して *Ruby をシステムにインストールします。
- ステップ3 *-次に、Ruby binフォルダーを_PATHユーザー変数_および_システム変数_に追加して、gemコマンドを使用します。
パスユーザー変数-
- [マイコンピュータ]アイコンを右クリックします。
- Properties を選択します。
- 次に、*詳細*タブをクリックし、*環境変数*をクリックします。
_Environment Variables_ウィンドウで、以下のスクリーンショットに示すように_PATH_をダブルクリックします-
図のように、[ユーザー変数の編集]ボックスが表示されます。 _Variable value_フィールドにruby binフォルダーパスを C：\ Ruby \ bin として追加します。 パスが既に他のファイルに設定されている場合は、その後にセミコロンを入れて、以下に示すようにRubyフォルダーのパスを追加します。
[OK]ボタンをクリックします。
システム変数-
- [新規]ボタンをクリックします。
次に、以下に示すように New System Variable ブロックが表示されます。
- _Variable name_フィールドに RubyOpt を、_Variable value_フィールドに rubygems を入力します。 _変数名_と_値_を書き込んだ後、 OK ボタンをクリックします。
- ステップ4 *-システムでコマンドプロンプトを開き、次の行を入力します-
gem install sass- ステップ5 *-次に、SASSを正常にインストールすると、次の画面が表示されます。
例
以下は、SASSの簡単な例です。
<html>
<head>
<title> Import example of sass</title>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<h1>Simple Example</h1>
<h3>Welcome to finddevguides</h3>
</body>
</html>ここで、ファイルを_style.scss_として作成します。これはCSSに非常に似ており、唯一の違いは.scss拡張子で保存されることです。 と.scssファイルの両方がフォルダ ruby 内に作成されます。 .scssファイルを ruby \ lib \ sass \ フォルダーに保存できます（このプロセスの前に、libディレクトリーに sass としてフォルダーを作成します）。
h1{
color: #AF80ED;
}
h3{
color: #DE5E85;
}次のコマンドを使用して、SASSにファイルを監視し、SASSファイルが変更されるたびにCSSを更新するように指示することができます-
sass --watch C:\ruby\lib\sass\style.scss:style.css上記のコマンドを実行すると、_style.css_ファイルが自動的に作成されます。 SCSSファイルを変更するたびに、_style.css_ファイルが自動的に更新されます。
上記のコマンドを実行すると、_style.css_ファイルには次のコードが含まれます-
style.css
h1 {
color: #AF80ED;
}
h3 {
color: #DE5E85;
}上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-
- 上記のコードを hellol ファイルに保存します。
- このHTMLファイルをブラウザーで開きます。
