コマンドラインからSASSコードを実行するにはどのコマンドが使用されますか?

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 サイトの他の関連記事を参照してください。