ターミナルについて

ターミナルとは
ターミナルの起動方法
Sassで使用するコマンド
関連リンク

ターミナルとは

今回はSassをインストールし、起動する際にターミナルを使用するので、簡単な使い方だけでも覚えましょう。

ターミナルの起動方法

Macでターミナルを使う方法は、主に2つあります。
1つはMac内のターミナルアプリを直接起動する方法、もう1つはVisual Studio Code内でターミナルを起動する方法です。

Mac内のターミナルアプリを直接起動する方法
ターミナルは「アプリケーション > ユーティリティ > ターミナル」で探すと見つかります。
Visual Studio Code内でターミナルを起動する方法
ターミナルは「表示 > ターミナル」で探すと見つかります。
ショートコード：control⌃ + @

Sassで使用するコマンド

Sassを使うためにターミナルで実行する主なコマンドをいくつか紹介します。
Sassのコンパイルやファイルの確認、階層の移動などができます。

ファイルやフォルダを確認する（ls）

ターミナルで現在のディレクトリ内のファイルやフォルダを確認するには、lsコマンドを使用します。

user@MacBook-Pro ~ % ls

これで、現在のディレクトリにあるファイルやフォルダを一覧表示できます。

ディレクトリを移動する（cd）

Sassファイルを操作する前に、必要なディレクトリに移動するためにcdコマンドを使います。

user@MacBook-Pro ~ % cd project/public

これで、project/publicディレクトリに移動します。

ディレクトリ内でのSassコンパイルコマンド

通常、Sassファイル（.scss）はプロジェクト内のscssなどの特定のディレクトリに格納されます。そして、コンパイル後のCSSファイル（.css）は、cssディレクトリに保存することが多いです。

今回は、project/public内にscssディレクトリとcssディレクトリがある構成を前提に、Sassのコンパイル方法を説明します。

※デザデジでのプロジェクト構成では、publicフォルダ内にscssとcssのディレクトリが配置されることが基本です。この構成を覚えておくと、学習コンテンツや課題をスムーズに進めることができます。

単一ファイルのコンパイル

以下のディレクトリ構造を例に説明していきます。
```
project/
│
├── public/
│   ├── scss/
│   │      └── input.scss
│   │
│   └── css/
│            └── output.css
```
scss/input.scssをcss/output.cssにコンパイルする場合、次のようなコマンドを使用します。
```
user@MacBook-Pro public ~ % sass scss/input.scss css/output.css
```
このコマンドは、scssフォルダにあるinput.scssをcss/output.cssという名前のCSSファイルに変換します。
フォルダ内のすべてのSCSSファイルをCSSにコンパイル

以下のディレクトリ構造を例に説明していきます。
```
project/
│
├── public/
│   ├── scss/
│   │      └── style.scss
│   │
│   └── css/
│            └── style.css
```
scss/input.scssをcss/output.cssにコンパイルする場合、次のようなコマンドを使用します。
```
user@MacBook-Pro public ~ % sass scss:css
```
このコマンドは、scss フォルダ内のすべての .scss ファイルをコンパイルし、css フォルダ内に同名の .css ファイルを生成します。例えば、scss/style.scssがcss/style.cssとしてコンパイルされます。
監視モード（–watch）でのコンパイル
–watchオプションは、ファイルが変更されるたびに自動的にコンパイルを行うためのオプションです。
```
user@MacBook-Pro public ~ % sass --watch scss:css
```
Sassファイルの圧縮（–style=compressed）とコンパイル
–style=compressedオプションは、コンパイルしたCSSを圧縮して出力することができます。
```
user@MacBook-Pro public ~ % sass --style=compressed scss:css
```