前置き
私の今の状態
1年ぐらいProgateやらドットインストールやらで勉強しましたが、超のつく初心者なので専門用語とかがまだよくわかってません。 間違った言葉の使い方とかしてたらそっと教えてください…この記事の対象となる人
同じくProgate終わったかなー、程度の人向け。 私の場合は、ProgateでSassやったし実際に書いてみるかー、と思ったらコード書くための準備？の段階で2～3日詰んだので、同じような人に読んでいただければ幸いです。環境
ここも何書いていいのかわかりませんが…- Windows10
- VSCodeを使用
- コンパイルにはLiveSassCompilerを使用
手順
LiveSassCompilerはもうインストールして使える状態になってる前提で進めていきます。
インストール方法についてはこちらの記事を参考にさせていただいました。ありがとうございます。
- index.html ファイルの head でとりあえずscssのリンクを張る
- css/style.scss にカーソルをあてCtrlと左クリックでファイルを作ってもらう
- 作ったscssファイルに適当になにか書いてコンパイルする
- headに張ったリンクの拡張子を.scssから.cssに変更
- 書く時はもちろんscssファイルに
<head>
<link rel="stylesheet" href="css/style.scss>
</head>
みたいな感じ。
コンパイルした後エクスプローラーを開くとcssフォルダ内にstyle.cssとstyle.css.mapの二つが追加されているはず。
（自動的にコンパイルされる気がするけど、できなければ画面下にあるWatch Sassみたいなのをクリック）
私はここで思いっきり躓きました。
.scssを読み込めばいいと思い込んでいたからです。コンパイルしたcssを読み込ませてあげてください。
最初は読み込むファイルとコードを書くファイルが違っていいのか？って疑問に思ってましたが、勝手にコンパイルしてくれてるのでそれで大丈夫でした。
要らぬ心配でした。パソコンはとても優秀です。
ここまできたらあとはとにかくコードを書いていくだけです。
ほかにもっといい方法があれば教えてください（切実）
おわりに
コンパイル という単語すら知らずにSass使おうとか無謀すぎました。
知っている人からすれば「そんなことで躓くの…？」とびっくりされるかもしれませんが
私は思いっきり躓きました。
私自身が超初心者なんで、「そんな方法でやらなくてももっとこうすればいいのに…」「そこ間違ってるし…」みたいなのがあれば教えてやってもらえたら喜びます。