現役の方のSCSSの書き方のコツが知りたい。

2020/07/28 08:22

今どのようなcssをscssにしているのかコードが無いとどこが間違っているのか判断できません。コードを載せて頂けませんか?

2020/07/28 08:26

あらら、同じ質問ポストを建てているのですね。。。ダブルポストは回答者の手間になってしまいますのでこちらの質問は削除してくださいm(__)m

2020/07/29 01:36

すみません、微妙に違う悩みでした。。記載不足ですみません。今SCSSの理解を深めたくて… 例えば、フォントサイズ、色、フォントファミリー、メディアクエリの幅… こういう、変数としてつけやすいのから着手するべきなのか、上から順番にやっていくのか、という感じだったんです…別のポストでは、ファイルについて質問しました。今は、入れ子がうまくいっていないということが、悩みです… ちなみに、聞いても良いですか？ .box { position: absolute; top: 350px; left: 125px; } .box h2 { font-family: $mainFont; font-size: 64px; color: rgb(0, 0, 0); margin-bottom: 30px; line-height: 120%; } .box p { font-size: 21px; color: $color; } これを、SCSSで入れ子にしたい、となったときに、私が、 .box { position: absolute; top: 350px; left: 125px; h2 { font-family: $mainFont; font-size: 64px; color: rgb(0, 0, 0); margin-bottom: 30px; line-height: 120%; p { font-size: 21px; color: $color; } } } こうしたんですね。そしたら、二番目のh2はいいんですが、三番目の pが、CSSにコンパイルされたときに、 .box h2 pとなっていて、もともとの .box p というクラス名にならないんです。絞り込み指定になっているから問題ないのかなとも思ったのですが、それで試しにフォントサイズを変えてみても、変更されなくて… 正解が分からず困っていました。伝わりますでしょうか…

2020/07/29 01:44

回答に書かせて頂きますね^^

2020/07/29 01:54

ありがとうございます、すみません；；

行動規範の内容に同意します

回答3件

以下、「CSSを理解している、SCSSを学びはじめの人」向けにオススメのステップを書いてみます。
いち意見として、ご参考ください。

[-1] 「@media」はSCSSの記述ではなくCSSの記述なので、SCSSの学習とは別にCSSを勉強してください。

[0] 既存CSSファイルをコピーし、SCSSファイルに貼り付け、コンパイルする
[1] ネスト
[1.5] ネスト内での「&」の使い方
[2] 分割したファイルを1つにまとめる (@import)

[3] 変数 (色、font-family、については変数化するととても楽です。)
[3.5] インターポレーション
[4] ミックスイン (@mixinと@include)

[5] if文
[6] ループ文 (@while、@for、@each)
[7] 関数

学び始めて、1回目に試してみるときは[2]くらいまででいいと思います。
[5]以降は、初回では使用を避けたほうが無難だと思います。

特にnomura02さんの場合、SCSSというよりまずは@media (CSS) の使い方を覚えることのほうが先と思われるので、手こずるようなら[1]くらいまででいいかもしれません。

参考URL:
https://www.monster-dive.com/blog/web_creative/20140214_000130.php
https://uxmilk.jp/38092

[補足]

・SCSSが慣れず、慌てふためいて焦っている
・SCSS前提で書き直すとなった場合、何から手をつければよいのか、
いじればいじるほど、一生懸命作った外観が崩れていき、なかなか作業が進みません…困っています

SCSSの初学者が陥りがちなのは「SCSSの機能をすべて使わなければならない」という思い込みです。

前提としてまず認識していただきたいのは、
SCSSのファイルに、CSSファイルを貼り付けた場合、100%すべて機能するという点です。

「ネスト」「mixin」「変数」「for文」などのSCSSの便利な機能は、無くても崩れはしないので、
1つずつ学んで1つずつ追加していってたほうが安全です。

投稿2020/07/28 12:59

編集2020/07/28 14:52

new1ro

総合スコア4528

2020/07/29 01:40

非常に安心しました。確かに@import @contentあたりを考え出すと私自身がもうフリーズしてしまって… でも入れ子の段階でまだもたもたしているので焦らず最初は変数くらいまでにしようと思います。ありがとうございます！！

行動規範の内容に同意します

ベストアンサー

質問での回答ですとインデントが入れられないので
こちらで回答させて頂きますね

ご質問のソースにインデントを入れると ▼ になります。

scss
1.box {
2  position: absolute;
3  top: 350px;
4  left: 125px;
5
6  h2 {
7    font-family: $mainFont;
8    font-size: 64px;
9    color: rgb(0, 0, 0);
10    margin-bottom: 30px;
11    line-height: 120%;
12
13    p {
14      font-size: 21px;
15      color: $color;
16    }
17  }
18}

これで分かりやすいと思うのですが
p が h2 の子になっていますよね ^^;;

scss
1.box {
2  position: absolute;
3  top: 350px;
4  left: 125px;
5
6  h2 {
7    font-family: $mainFont;
8    font-size: 64px;
9    color: rgb(0, 0, 0);
10    margin-bottom: 30px;
11    line-height: 120%;
12  }
13  p {
14    font-size: 21px;
15    color: $color;
16  }
17}

pを.box の子にする場合は ▲ のように
h2 と並べてあげれば OK です^^

それで試しにフォントサイズを変えてみても

.box h2 p { ~ } は、
▼ .box の孫である「テキスト」にスタイルを載せているのですから

<div class="box"><h2><p>テキスト</p></h2></div>

▼ .box の直接の子である「テキスト」には何の影響もありません ^^;;

<div class="box"><p>テキスト</p></div>

scss で入れ子を作る時は、

子、孫、が分かるように、必ずインデントを入れるとか
子を書くときは、親のスタイルから1行開けるとか

パッと見て、入れ子が分かるようにルールを決めないと
カオスになりやすいかも?? ですね^^;

投稿2020/07/29 02:01

編集2020/07/29 02:08

総合スコア676

2020/07/29 02:08

うわーーーっ！！！！解決しました・・・そういうことか… 泣きそうです…ありがとうございます…めちゃくちゃ助かりました…

miyabi_pudding

2020/07/30 01:09

nomura02さん > 解決したなら、BAを選出しましょう。

行動規範の内容に同意します

ネストはまだ分かりやすいので入れ子にしまくっている

入れ子にしまくるのはいいですが、しすぎるとコードの長さが膨大になり、読み込みにも影響が出てくるので、あまり入れ子にはしないほうがいいです。
やっても2~3くらいまで。

自分はCSS -> SCSSにする時は、拡張子を変えて、上から順に入れ子にしたりメディアクエリを設定・変更していきます。

そうすることでミスったときの修正箇所がわかりやすく、結果的には効率が良くなります。

（Gitとかでバージョン管理していないならバックアップは必ずとってください。

例

どんな内容でも出る物なので画像で失礼します。

上の画像をご覧ください。
左がSass、右がコンパイル後のCSSです。
Sassは少ないように見えますが、CSSは長く出力されています。
まだ、少しだから良いですがこれより長いコード・深い入れ子になったらコンパイル後のコードが長くなるのは自明だと思います。
なので、2~3くらいにしないと、コードが長くなり読み込み時間が増えてUXが悪くなるぞ！という回答でした。
不明点ありましたらコメントの方までよろしくお願いします。

使用したツール：https://www.sassmeister.com/

投稿2020/07/28 09:32

編集2020/07/29 02:04

総合スコア10429

2020/07/29 01:53

ありがとうございます！質問しても良いでしょうか、やっても2~3くらいまで。というのは、母数はなんでしょうか？そうですよね… 今あっちこっちやってて、外観が崩れても、どこでミスってるかも分からないカオスっぷりで０からやっては、崩れ、０に戻し、みたいな不毛なことをしていたので… 一応コピーのフォルダでいじくってはいます

2020/07/29 02:07 編集

なるほど。。最初はSassは「入れ子が使えるCSS！」と、頭の中で念じながらやると良いかもしれません。非常にCSSと似た言語ですが、独自の記法やルールなどが多く、一気にやろうとすると頭がパンクしてしまいます。（とかいう自分も関数とかループはあまり使わない。（使う機会がない

2020/07/29 02:11

Sassも多くの言語の中の一つです。他の回答者もおっしゃっていますが「全部の機能を使いこなさなければいけない！」というわけではありません。もしも、手詰まりしているようでしたらCSSからSassへの書き換えは一回横に置いて、Sassで一からコードを書く練習したのちにCSSからSassの書き換えをチャレンジしたほうが良いと思います。

2020/07/29 02:11

ありがとうございます‥‥ほんと泣きそう… 順番と入れ子解決したのめちゃくちゃデカいですありがとうございます… ベストアンサー選べない・・・