🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Windows

Windowsは、マイクロソフト社が開発したオペレーティングシステムです。当初は、MS-DOSに変わるOSとして開発されました。 GUIを採用し、主にインテル系のCPUを搭載したコンピューターで動作します。Windows系OSのシェアは、90%を超えるといわれています。 パソコン用以外に、POSシステムやスマートフォンなどの携帯端末用、サーバ用のOSもあります。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

4586閲覧

Sassのしくみ ①htmlでの読み込み ②ファイル構成

mitrasi

総合スコア49

Windows

Windowsは、マイクロソフト社が開発したオペレーティングシステムです。当初は、MS-DOSに変わるOSとして開発されました。 GUIを採用し、主にインテル系のCPUを搭載したコンピューターで動作します。Windows系OSのシェアは、90%を超えるといわれています。 パソコン用以外に、POSシステムやスマートフォンなどの携帯端末用、サーバ用のOSもあります。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/01/08 07:01

編集2021/01/08 07:50

質問したいこと

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..

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/01/08 07:09

progateではSCSSのコンパイルなどは習ってないのでしょうか。
mitrasi

2021/01/08 07:15

Progateではネストの書き方、関数や引数の使い方といったところがメインだったので特にコンパイルした記憶はないと思います。
mitrasi

2021/01/08 07:25

ツールの紹介、ありがとうございます! 早速拝見させていただきます。
m.ts10806

2021/01/08 07:31

「目標物を作ってみよう」でもなかったんですか?(Progateでやったことがあるわけではないです) Progate上で勝手にコンパイルされたものが出来上がったんでしょうかね。 いずれにしても「Node.jsでコンパイルするときは」とご自身でも書かれているので認識があるかと思っていました。
m.ts10806

2021/01/08 07:31

あと「「.html」には「.scss」形式のままでは読み込めないものなのか」 これ、たまに質問で上がってきてます。 同じような回答をすることになるので、まずは過去質問も探ってください。
m.ts10806

2021/01/08 07:38

>ためしたこと 重箱の隅をつつくようで申し訳ないですが、「調べました」と書いただけで伝わる「ためしたこと」はゼロです。 実際に調べず試さず丸投げする人との区別は他人にはつきません。 「投入したキーワード」「参考にした記事URL,名称」「それをもって何を試したか」をセットにしてください。
m.ts10806

2021/01/08 07:43

「最低限として」とマナーを重んじる姿勢は大変すばらしいですし、回答する側も助かるのですが、いかんせん、ほとんどがその最低限すらできてない・やらないというのが現状だったりします(回答率が下がる一因と見てます) なので、「自分が持っていることは基本的に全て書き出す」ことで見ている人が安心してアドバイスを送れるようになります。ご配慮願いたく。
mitrasi

2021/01/08 07:52

そうだったのですね、まずは自分でどうにかしようとするのは書くまでもなく最低限のことだと思っていましたし、今まで回答者様に恵まれていたおかげか特になにもご指摘受けずにやってこれてしまったもので……ご指摘感謝します。 あまり収穫はなかったのですが、追記いたしましたので何卒よろしくお願い致します。
mitrasi

2021/01/08 07:58

ちなみにprogateの関しては、おそらくおっしゃる通りprogateのほうでコードさえ入力すれば自動的にコンパイルされるものだったと思います。ということは、やはり原則sassは「コンパイルして使う」ものなんですね。
m.ts10806

2021/01/08 08:43

はい。コンパイルしないとWebブラウザから(HTMLからと言うべきか)は認識できません。
mitrasi

2021/01/08 08:47

①のご回答、ありがとうございます! progateでコンパイル作業せずにできたことにより混乱していたのですっきりしました。
guest

回答1

0

ベストアンサー

①大前提として、「.html」には「.scss」形式のままでは読み込めないものなのか

はい、その通りです。
また、拡張子を変えただけでも、多くの場合はCSSとして認識できません。
CSSへのコンパイルを行なって下さい。
ただ、テンプレートエンジンの中では、
(JavaScript製、バックエンド製両方)sassファイルをCSSとして認識させて読み込むものも存在します。

②ファイル構成としてはどのように作ればいいのか?

最終的にHTMLにて、CSSとして読み込める形なら何でもいいかと。
ただし、チームで作業する時や、自身のプロジェクトにおいても、
ルールは決めておいた方がいいです。
メンテナンス性の向上のために。

投稿2021/01/08 15:43

miyabi_takatsuk

総合スコア9555

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mitrasi

2021/01/11 03:17

>① そうだったんですね!とてもすっきりしました。ありがとうございます! >② どうしなければ、というのはないけれど、ルールは持っていたほうがいいんですね。勉強になります。ありがとうございます。 因みになのですが、今sass触り立てで、ネストのこととかさらっと通した後実践に取り入れながら学んでいこうと思っているのですが ①一旦cssで書いてsassに変換していく→その後コンパイル ②最初からsassで書いて→その後コンパイル どちらがいいかとかありましたら、ご意見お聞きしたいです。 なんかいきなりsassで書くと混乱しそうだなという懸念もありますが、最初から実践の形でなれたほうがいいのかなという迷いもありまして…お手隙があればで構いませんのでご回答いただければ幸いです。
miyabi_takatsuk

2021/01/11 07:59

それは、本質問要件とは別に、トピックを立てた方がいい内容量なので、 コメントでの回答は控えさせていただきます。 自身で調べた上で、どうしても疑問がある場合は、別質問を立ててください。
mitrasi

2021/01/11 23:51

かしこまりました。 大変失礼いたしました。 ご回答ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問