質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.50%
Sass

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

CSS

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

Q&A

解決済

3回答

2985閲覧

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

nomura02

総合スコア133

Sass

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

CSS

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

0グッド

1クリップ

投稿2020/07/28 08:20

前提・実現したいこと

SCSSでCSSを書くことになったのですが、
それにあたって、書き方のコツというか、順番があれば教えてください。

発生している問題・エラーメッセージ

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

###やっていること
・とりあえずレスポンシブ用のCSSフォルダを無くそうと奮闘中(とにかく@media つけまくってまとめる作業をしている
・ネストはまだ分かりやすいので入れ子にしまくっている

環境

VScode
Windous
Live sass compiler

初心者すぎて申し訳ありませんが、アドバイスありましたらお願いいたします。

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

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

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

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

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

-millmill-

2020/07/28 08:22

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

2020/07/28 08:26

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

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 というクラス名にならないんです。絞り込み指定になっているから問題ないのかなとも思ったのですが、 それで試しにフォントサイズを変えてみても、変更されなくて… 正解が分からず困っていました。 伝わりますでしょうか…
-millmill-

2020/07/29 01:44

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

2020/07/29 01:54

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

回答3

0

以下、「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

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

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

nomura02

2020/07/29 01:40

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

0

ベストアンサー

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

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

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

総合スコア674

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

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

nomura02

2020/07/29 02:08

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

2020/07/30 01:09

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

0

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

入れ子にしまくるのはいいですが、しすぎるとコードの長さが膨大になり、読み込みにも影響が出てくるので、あまり入れ子にはしないほうがいいです。
やっても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
kyoya0819

総合スコア10429

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

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

nomura02

2020/07/29 01:53

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

2020/07/29 02:07 編集

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

2020/07/29 02:11

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

2020/07/29 02:11

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

2020/07/29 02:13

提示したリンクですとブラウザでリアルタイムでコンパイルしていくのでCSSとSassがどう対応しているのかを学習するのにはもってこいのツールだと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問