[フロントエンド]いわゆるSass

面接の準備をしているときは本当にたくさん聞いたことがありますが、実際には仕事でも使ったことがありますが、本当のSassは何なのか、個人的には使ったことのない経験です.
そこで、まずSassが何なのかを整理して、個人的なプロジェクトで一つ一つ書きます.
Sassバー
「Sass」(システムフレンドリースタイルシート:構文フレンドリースタイルシート)は、CSSとして解釈およびコンパイルされたスクリプト言語です.CSSのフロントプロセッサとして、CSSの限界と欠点を補い、より可読性と再利用性のあるCSSを作成することができます.
しかし、その名の通りフロントプロセッサであるため、Web上で操作可能な標準CSSにコンパイルして操作する.
公式文書によると
SassはCSSの拡張であり、基礎言語に力と優雅さを加えた.
Sassは、特により伝統的な言語(オブジェクト向け言語など)では、それ自体が使用できない複数のメカニズムを提供することによってCSSを拡張する.

変数

を使用
条件文

Import

Nesting

Mixin

Extend/Inheritance
など、ますます規模の大きいプロジェクトで使用すると、その真の価値が輝きます.実は利便性も身をもって感じました…

今から使いましょう.
インストール

npm install -g sass

ファイルの変換
sass-projectディレクトリ変換するfoo.scssファイルを作成

変換ファイルYes
特定の言語で作成されたソースコードを別のソースコードに変換します.

-ある言語で作成されたソースコードを、似たような抽象レベルを持つ別の言語に変換します.

// foo.scss
@use "sass:math";

$site_max_width: 960px;
$font_color: #333;
$link_color: #00c;
$font_family: Arial, sans-serif;
$font_size: 16px;
$line_height: math.div(20px, $font_size);

body {
  color: $font_color;

  // Property Nesting
  font: {
    size: $font_size;
    family: $font_family;
  }

  line-height: $line_height;
}

#main {
  width: 100%;
  max-width: $site_max_width;
}

変換するscssファイルのパスと変換後に生成されるcssファイルのパスを指定します.

sass foo.scss:foo.css

上記のコマンドを実行するとfoo.cssファイルの生成

// foo.css
body {
  color: #333;
  font-size: 16px;
  font-family: Arial, sans-serif;
  line-height: 1.25;
}

#main {
  width: 100%;
  max-width: 960px;
}

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

特定のディレクトリ内のすべてのscssファイルをcssファイルとして指定したディレクトリに一括保存するには

sass input-directory:output-directory

これが面倒ならnpm scriptsで簡単にやりましょう.

npm init -y

// package.json
{
  "name": "sass-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build:sass": "sass src/scss:dist/css"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

style
ファイルを変換するときに、展開(標準スタイル)と圧縮(圧縮スタイル)の2つのスタイルのいずれかを選択できます.既定値は展開
watch
毎回面倒なので監視させましょう.

sass --watch src/sass:dist/css

これを梱包してjsonとして宣言することもできます

// ...
  "scripts": {
    "build:sass": "sass --watch src/sass:dist/css \" sass src/sass:dist/css\""
  },
// ...