scssの導入の仕方

まずscssを使うにはrubyをインストールする必要があります。
rubyをまだ導入していない場合はまずはそちらから導入していきましょう！
導入が終わったという体で進めていきます👍

scssフォルダを作りましょう！

私はVSコードを使っているのでそちらを使って進めていきます👍

①saccフォルダを作る

vsコードをダウンロード終わったら、フォルダを作成していきます。
作成が終わったら、index.htmlファイルを作り、cssフォルダ、scssフォルダを作ればとりあえず終わりです👌

②ターミナル

次にターミナルを使っていきます。

% cd Documents
% ls
% cd Sass

この状態にしておきましょう。（scssフォルダの中にいる感じ）

③cssファイルの中に記載して行きます！

style.scss

main {
  width: 90%;
  p {
    font-size: 14px;
  }
}

前回の記事でも説明したように、index.html の親要素と子要素の関係のようにそれに伴って、入れ子のように記述していきます。
ちなみに拡張子はstyle.scssです。

④再びターミナル

ではではターミナルをいじっていきます！前回のターミナルですでにsassファイルの中にいますのでそのまま進めていきます！！

% sass scss/main.scss:css/main.css #scssをcssに変換する
% less css/main.css #main.cssに展開されていく
% sass ---style expanted scss/main.scss:css/main.css  #構造がわかりにくい場合に使うようです。
% less css/main.css #再び展開

*less~を行うとターミナル上にend文字出てきてうち込みできなくなるので、[;qw]を押すと画面がまた入力状態に戻ります！！
ただこのやり方なかなかめんどくさいなと思ったかた、省略しちゃいましょうか👍

% sass --style expanted --watch scss:css

これで完了です！
終了する場合はコントロール＋cです！！👍