ホームページ >ウェブフロントエンド >CSSチュートリアル >コマンドラインからSASSコードを実行するにはどのコマンドが使用されますか?
コマンドラインからSASSコードを実行するにはどのコマンドが使用されますか?
- WBOY転載
- 2023-09-05 21:05:01638ブラウズ
SASS は Syntropically Awesome Style Sheets の略称です。 SCSS コードをコンパイルし、CSS (Cascading Style Sheets) に変換するプリプロセッサです。 CSS のスーパーセットです。
このチュートリアルでは、ターミナルを使用して SCSS コードをコンパイルする方法を説明します。
ターミナルからSASSを実行する手順
ユーザーは以下の手順に従ってターミナルから SASS コードを実行する必要があります。
ステップ 1 - ユーザーはローカル マシンに Node.JS をインストールする必要があります。そうでない場合は、https://nodejs.org/en/download にアクセスし、そこからダウンロードしてインストールしてください。
ステップ 2 - 次に、ノード プロジェクトを作成する必要があります。プロジェクト ディレクトリでターミナルを開き、ターミナルで次のコマンドを実行して、新しい NodeJS プロジェクトを開始します。
ステップ 3 - 次に、ターミナルで次のコマンドを実行して、現在のノード プロジェクトに SASS をインストールします。
ステップ 4 - 現在のプロジェクトの package.json ファイルを開き、「scripts」オブジェクトに次の行を追加します。
ステップ 5 - プロジェクト ディレクトリに SCSS フォルダーと CSS フォルダーを作成します。また、SCSS ディレクトリに style.scss ファイルを追加し、CSS ディレクトリに style.css ファイルを追加します。
これはプロジェクトのディレクトリ構造です。
ステップ 6 - 次に、次の SASS コードを style.scss ファイルに追加します。
ステップ 7 - 次に、ターミナルで次のコマンドを実行して、SCSS コードをコンパイルします。
ステップ 8 - style.css ファイルに次の出力コードが生成されます。そうでない場合は、スクリプトの実行中に scss ファイルのコードを変更します。
これで、ユーザーが style.scss ファイルに変更を加えるたびに、style.css ファイルの出力も変更されます。
CSS ではなく SASS を使用するのはなぜですか?
CSS ではなく SASS を使用することには多くの利点があります。
変数 - Sass を使用すると、CSS コードを簡素化し、複雑さを軽減できる変数を作成できます。たとえば、backgroundColor 変数を定義し、それに適切な値を割り当てることができます。その後、ハードコードされた色の値の代わりにコード全体で変数を使用できるようになります。
Mixins - Sass を使用すると、コードの他の部分で使用できる関数と同様に、再利用可能なコードの塊であるミックスインを定義できます。
ネスティング - Sass を使用すると、CSS セレクターをネストできるため、コードがより整理され、読みやすくなります。たとえば、ナビゲーション セレクター内に ul セレクターをネストして、ナビゲーション メニューのスタイルを設定できます。
インポート - SASS で部分的な SCSS ファイルを作成し、それを他の SCSS ファイルにインポートして、さまざまなコンポーネントのコードを個別のファイルに分割できます。
以上がコマンドラインからSASSコードを実行するにはどのコマンドが使用されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。