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

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

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

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

CSS

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

意見交換

5回答

429閲覧

SCSSのファイル分割について

wankokku

総合スコア0

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

CSS

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

1グッド

1クリップ

投稿2024/10/15 05:45

テーマ、知りたいこと

SCSSのファイル分割について

背景、状況

SCSSのファイル分割について、cssを使うよりも便利だと思うのですが、共通パーツで変更があった際にパーツを読み込んでいるファイル全てを更新しなければならず、それならバラバラに読みこんでいた方が楽でしょうか?
ただ、css一枚でだして圧縮をかけた方がサイトが軽くなるような気もします、、、。
もし『こういう使い方すれば楽だよ!』ってものがあればご教授ください。

isai👍を押しています

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

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

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

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

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

回答5

#1

maisumakun

総合スコア145932

投稿2024/10/15 06:22

共通パーツで変更があった際にパーツを読み込んでいるファイル全てを更新しなければならず

どのような状況でしょうか?

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

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

#2

wankokku

総合スコア0

投稿2024/10/15 06:39

#1
maisumakun様
ご確認いただきましてありがとうございます。
例えばヘッダーの共通scssの_header.scssに変更があった場合、それを読み込んでいる各種ページのcss(例:TOP、ABOUT、お問合せ等)にもVSCで更新をかけてファイルをサーバーにアップロードしているのですが、ページが増えるとその分全て更新⇒UPとなると手間がかかりそうだなと思っています。

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

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

#3

maisumakun

総合スコア145932

投稿2024/10/15 06:41

ページが増えるとその分全て更新⇒UPとなると手間がかかりそうだなと思っています。

ある程度以上の規模でSCSSを使うのであれば、そのような更新作業は自動化するのがほぼ前提となります。

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

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

#4

wankokku

総合スコア0

投稿2024/10/15 07:03

#3
回答ありがとうございます。
自動化できるツールか何かがあるのですね。
ちょっとそこまで把握できていませんでしたのでまた改めて調べてみようかと思います。
ありがとうございました。

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

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

#5

isai

総合スコア148

投稿2024/11/13 12:46

サイトのパフォーマンスを気にするのであれば、最終的にビルド時にscssファイルを圧縮して1つのCSSファイルとして出力する方法が良いです。例えば、gulpwebpackを使ってSCSSファイルをコンパイルし、圧縮する設定をしておくと、開発時は分割し、リリース時には最適化されたCSSファイルを作成できますね。

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

この意見交換はまだ受付中です。

会員登録して回答してみよう

アカウントをお持ちの方は

関連した質問