SASS - プログラムサスを使用します

著作権：著作権、許可なく複製禁止！https://blog.csdn.net/weixin_43031412/article/details/91361279

サスはその後、我々はサスファイルを作成し、サスCSSファイルに変換するプログラムを使用しますが、今のプログラムがインストールされています。

styles.scssという名前のファイルを作成するために、（任意のコードエディタ可能）エディタを開いて、に注意を払う.scss拡張。以下を追加し、ファイルを保存します。

styles.scss

$primary-color: orange;
$secondary-color: gold;

body {
  color: $primary-color;
  background: $secondary-color;
}

この文書は、次のようにCSSファイルをSASSますコンパイラによって生成されました：

Styles.cssを

body {
  color: orange;
  background: gold; 
}

私たちは、すべての変更は、CSSファイルを再構築するために、プログラムはサスソースファイルの変更を監視してみましょう。

、コマンドラインツールを開き、ディレクトリstyles.scssファイルに切り替えるために、次のコマンドを実行します。

sass --watch styles.scss:styles.css

これは、SCSSファイルを監視するために指定し、あなたはCSSファイル名を生成します。

だけではなく、単一のファイル、あなたはまた、カタログ全体を監視することができます。

次のようにコマンドの出力は次のようになります。

> sass --watch styles.scss:styles.css
>>> Sass is watching for changes. Press Ctrl-C to stop.
      write styles.css
      write styles.css.map

私はStyles.cssをファイルに生成されている見ることができます。cssファイルへSCSSソースファイルマッピング情報を記録し、JSONファイル形式ですstyles.css.mapファイルもあります。

次のようにコンテンツStyles.cssをファイルを生成しました：

body {
  color: orange;
  background: gold; }

/*# sourceMappingURL=styles.css.map */

CSSが生成されたファイルのみCSSコードが含まれて見ることができ、ソースファイルに設定さサス変数が処理されています。

/*# sourceMappingURL=styles.css.map */これは、マップファイルには、CSSファイルへのソースファイルのマッピング情報を記録し、マップファイルがstyles.css.mapであることを示しています。

SASSファイルには、色の値を保存し、2つの変数を持っている、と我々は前景色と背景色の主な要素を設定するためにこれらの変数を使用しています。

コードがCSSにコンパイルされるとき、それは特定の変数の値のためにコンパイルされます。