Q&A
progateではSCSSのコンパイルなどは習ってないのでしょうか。
質問したいこと
Progateで一通り、Sassのレッスンをクリアしました。
テキストでおおまかな導入方法や使い方を学びました。
さて、実際にコーディングする際に使ってみようというのが現段階なのですが、よくよく考えると（たぶん）「style.scss」のままではhtmlに反映できないだろうし、いろいろ調べてみましたが機能についての記事は多いものの実装についての手順書が見つからずいろいろと混乱しています。
初歩的な疑問も含みますが、どうぞご教授頂けますと幸いです。
①大前提として、「.html」には「.scss」形式のままでは読み込めないものなのか
→progateでは@importで関数のファイル？を読み込んでいたと思うので、そんな感じで「.css」には@importで「.scss」を読み込み、「.html」にはいつも通り「.css」を読み込み、、間接的に「.html」に読み込むかと思いましたが手間がかかるので違うような気がしています。
②ファイル構成としてはどのように作ればいいのか？
→node.jsでコンパイルするときはいろいろ同じファイルに突っ込んだ気がしますが、毎回そのようなものが必要なのか疑問に思います。
以上、2点。
どなたかご教授頂けますと幸いです。
補足情報（FW/ツールのバージョンなど）
windows
Node.js
ためしたこと
■試したこと
「.scss」を「.css」で読み込み、「.css」を「.html」で読み込む間接法→効果なし
「.css」のファイル名のまま中身を普通に「.scss」記法で書いてみる→効果なし
■情報検索
検索ワード「sass html 読み込み」 「sass html 埋め込み」
以下参照した外部サイトになります↓↓
https://www.tam-tam.co.jp/tipsnote/html_css/post5189.html
https://webdesign-trends.net/entry/9323
https://qiita.com/Y_ASAMOTO/items/d5f33ecf5bfbb7f028a5
※最低限として基本的に質問前にネットでの検索、過去のテラテイルでの類似質問は閲覧済みです。
理解力が乏しいのは重々承知しておりますので、ご容赦ください。
現在のファイル構成例
カフェHP
css style.scss
images 写真とかいろいろ
index.html
contact.html
…etc..
Progateではネストの書き方、関数や引数の使い方といったところがメインだったので特にコンパイルした記憶はないと思います。
Windows なら Prepros ってのがおすすめみたいです。
https://u-web-nana.com/recommend-scss-prepros/
https://webdesign-trends.net/entry/4458
ツールの紹介、ありがとうございます！
早速拝見させていただきます。
「目標物を作ってみよう」でもなかったんですか？（Progateでやったことがあるわけではないです）
Progate上で勝手にコンパイルされたものが出来上がったんでしょうかね。
いずれにしても「Node.jsでコンパイルするときは」とご自身でも書かれているので認識があるかと思っていました。
あと「「.html」には「.scss」形式のままでは読み込めないものなのか」
これ、たまに質問で上がってきてます。
同じような回答をすることになるので、まずは過去質問も探ってください。
>ためしたこと
重箱の隅をつつくようで申し訳ないですが、「調べました」と書いただけで伝わる「ためしたこと」はゼロです。
実際に調べず試さず丸投げする人との区別は他人にはつきません。
「投入したキーワード」「参考にした記事URL,名称」「それをもって何を試したか」をセットにしてください。
「最低限として」とマナーを重んじる姿勢は大変すばらしいですし、回答する側も助かるのですが、いかんせん、ほとんどがその最低限すらできてない・やらないというのが現状だったりします（回答率が下がる一因と見てます）
なので、「自分が持っていることは基本的に全て書き出す」ことで見ている人が安心してアドバイスを送れるようになります。ご配慮願いたく。
そうだったのですね、まずは自分でどうにかしようとするのは書くまでもなく最低限のことだと思っていましたし、今まで回答者様に恵まれていたおかげか特になにもご指摘受けずにやってこれてしまったもので……ご指摘感謝します。
あまり収穫はなかったのですが、追記いたしましたので何卒よろしくお願い致します。
ちなみにprogateの関しては、おそらくおっしゃる通りprogateのほうでコードさえ入力すれば自動的にコンパイルされるものだったと思います。ということは、やはり原則sassは「コンパイルして使う」ものなんですね。
はい。コンパイルしないとWebブラウザから（HTMLからと言うべきか）は認識できません。
①のご回答、ありがとうございます！
progateでコンパイル作業せずにできたことにより混乱していたのですっきりしました。
回答1件
0
ベストアンサー
①大前提として、「.html」には「.scss」形式のままでは読み込めないものなのか
はい、その通りです。
また、拡張子を変えただけでも、多くの場合はCSSとして認識できません。
CSSへのコンパイルを行なって下さい。
ただ、テンプレートエンジンの中では、
（JavaScript製、バックエンド製両方）sassファイルをCSSとして認識させて読み込むものも存在します。
②ファイル構成としてはどのように作ればいいのか？
最終的にHTMLにて、CSSとして読み込める形なら何でもいいかと。
ただし、チームで作業する時や、自身のプロジェクトにおいても、
ルールは決めておいた方がいいです。
メンテナンス性の向上のために。
投稿2021/01/08 15:43
総合スコア9528
>①
そうだったんですね！とてもすっきりしました。ありがとうございます！
>②
どうしなければ、というのはないけれど、ルールは持っていたほうがいいんですね。勉強になります。ありがとうございます。
因みになのですが、今sass触り立てで、ネストのこととかさらっと通した後実践に取り入れながら学んでいこうと思っているのですが
①一旦cssで書いてsassに変換していく→その後コンパイル
②最初からsassで書いて→その後コンパイル
どちらがいいかとかありましたら、ご意見お聞きしたいです。
なんかいきなりsassで書くと混乱しそうだなという懸念もありますが、最初から実践の形でなれたほうがいいのかなという迷いもありまして…お手隙があればで構いませんのでご回答いただければ幸いです。
それは、本質問要件とは別に、トピックを立てた方がいい内容量なので、
コメントでの回答は控えさせていただきます。
自身で調べた上で、どうしても疑問がある場合は、別質問を立ててください。
かしこまりました。
大変失礼いたしました。
ご回答ありがとうございました！
あなたの回答
tips
プレビュー
