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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

SCSS

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

Sass

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

CSS

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

意見交換

クローズ

8回答

3308閲覧

他の人が作ったSassファイルを簡単にコンパイルする方法、そもそもなぜSassを使うのですか?

gantamu

総合スコア3

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

SCSS

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

Sass

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

CSS

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

1グッド

2クリップ

投稿2023/02/27 07:01

1

2

タイトル通りなのですが、SassやLESSを使う理由がいまいちわかりません。

変数、関数、四則演算、ファイル分割、mixinなどが使えて便利なのはわかりますが、それ以上にデメリットが多いように感じます。

例えば、他人(連絡が取れない人)がSassで作ったサイトのcss(見た目)を一行変更する場合を、自分のまっさらなpcで開発環境を作るためにnode.js、gulpなどインポートして、開発環境を一から作る作業が面倒です。

cssだけならftpでもsshでも一発で変更完了なのにです。

cssファイルに直接編集したら目的は達成されますが、それだと未編集のSassファイルと差分が出てしまい何か違う気がします。.mapで出力してる場合尚更違う気がします。

さらに、cssは変数が使えるのでさらに導入するメリットがあまり感じません

大規模サイトの場合、SassやLESSを使うメリットはわかりますが中、小規模サイトでSassを使うメリットと、デメリットを教えてください。

さらに、皆様が良く使ってるSassのコンパイル方法を教えてください。

すごく勘違いした質問かもしれませんが、初心者の疑問です。

miyabi_pudding👍を押しています

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

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

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

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

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

回答8

#1

miyabi_takatsuk

総合スコア9555

投稿2023/02/27 07:42

編集2023/02/27 07:57

開発環境を一から作る作業が面倒です。

これは、常にハードルにはなる話ですが、
それでも使われる理由としては、それにもまして、Sassが有用である証拠です。
ただ、開発環境の構築がめんどうなお気持ちはよくわかります。
環境言語などのバージョンアップ時に、みなで一斉にアップデートしなくてはいけないなどの、
リソースも割かれてしまいます。

そこで、昨今では、Dockerなど、比較的簡単に環境構築を共通にできるツールや、
VisualStudio Codeの拡張機能にて、かなりいい感じにSassをコンパイルができたり、
ましてや、Sassも始め、各種コンパイラ型言語も含めた、コンパイル専用アプリケーションなんてのも登場しています。
皆、同じ悩みを抱えているということですね。
もし、興味があれば、上記に示したものを調査されてはいかがでしょうか。

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

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

#2

maisumakun

総合スコア145497

投稿2023/02/27 07:52

編集2023/02/27 07:57

中、小規模サイトでSassを使うメリットと、デメリットを教えてください。

もともとそれらの言語で書かれたテンプレートやライブラリを使っている、という可能性もあります。

cssは変数が使えるのでさらに導入するメリットがあまり感じません

「ループで類似したセレクタを量産する」ような場合には、ふつうのCSSで書こうとすれば、ひたすら書き並べるしかなく構造化は不可能です。

CSS変数は値にしか使えず、セレクタを変動させることや、メディアクエリの幅指定に適用するようなことはできません。

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

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

#3

m.ts10806

総合スコア80873

投稿2023/02/27 08:56

編集2023/02/27 09:00

そもそもの話

他人(連絡が取れない人)が

上記がかなりのレアケースになりますし、大抵の人は引継ぎがある、もしくは何かしら経験がある状態で参画するので、気に病む必要はないと思います。
現在では静的HTML,CSSだけでWebアプリケーションを作ることが少ないとも思いますし、既にあるようにSass前提のWebフレームワークを利用している場合は、開発環境は自然と揃うことになります。

「結局WebアプリケーションはHTMLを出力するのに、なぜサーバーサイドの言語やフレームワークを使うのかが分からない」というのと同等の疑問に思います。

採用基準についても、規模は関係なく、「その人が慣れているから」「プロジェクトやチームで標準採用されていて熟練者や経験者が多いから」もっと言えば「好みだから」という理由に落ちくつくように思います。
最初はミニマムのつもりでも、気づいたら規模が大きくなってるのはよくあることで、そうなることを見越してメンテナンス性や効率を考えての採用というのもあるのではと。

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

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

#4

hope_mucci

総合スコア4447

投稿2023/02/27 11:01

sassコンパイルの手っ取り早い方法だけ紹介します。

VSCodeを利用しているのであれば、下記機能拡張"Live Sass Compiler"を利用してみてください。
単純にコンパイルするだけであればこの機能拡張だけで完結するので、環境構築などの手間がかかりません。

VS Marketplace リンク: https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass

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

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

#5

gantamu

総合スコア3

投稿2023/02/28 04:36

編集2023/02/28 04:55

貴重な回答ありがとうございます。

「大小関係なく使える場合、使った方がいい」の認識なのですね。

現在連絡のできない人が作った10ページほどのサイトの改修でほんの数行変更するためにVSCodeのLive Sass Compilerでコンパイルしたらエラーの嵐だったので修正しつつ...五分で終わる作業がなぜこんな面倒なことを?疑問に思ってました。

DockerやLive Sass Compilerを使ってなかったら...やはり面倒ですね。

他人(連絡が取れない人)が

数件見てますが、これはレアケースなのですね

「ループで類似したセレクタを量産する」ような場合には、ふつうのCSSで書こうとすれば、ひたすら書き並べるしかなく構造化は不可能です。
CSS変数は値にしか使えず、セレクタを変動させることや、メディアクエリの幅指定に適用するようなことはできません。

確かにそうですが、数ページほどの小規模の場合、本当に必要なのか疑問が残ります。

周りにはDockerもSassも使わない制作者もまだまだいるので、使いどころが難しいなと感じてます。さらに多少CSSを使えるお客さんは「簡単な変更は自分でする」という人もいるのでお客さん合わせてSass、CSSを使い分けるのが正解なのかな?とも思います。

ありがとうございました。

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

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

#6

hope_mucci

総合スコア4447

投稿2023/02/28 07:14

編集対象のファイルはsass形式のファイルだったのかな?
scss形式であればcss形式とほぼ文法が一緒なので、これから構造化cssを学習していくのであればscss形式での書き方を覚えることをお勧めします。

既存のスタイルにちょっと数行書き加えるだけ、sassファイルをコンパイルしたりエラーの解決をしたりするのが大変...ということであれば、別途変更差分だけ記載したcssファイルを作ってlinkさせるだけでもよかったのではないでしょうか。
全てのスタイルを1つのファイルで管理する必要は全然ありませんので。
sassでコンパイルされたcssファイルをベースに、細かな変更を加えたいお客さん用にカスタマイズ用cssファイルを用意するのもこのような課題の1つの解決法になるかと思います。

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

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

#7

ko9ra

総合スコア7

投稿2023/03/06 23:36

CSSを追加する方が大変であれば、逆に追加しないで解決できる方法を考えた方がいいのではないでしょうか?
SassやLESSを利用するのには、膨大なコードを圧縮してデータの表示を軽くするのが目的です。
この膨大なコードにはCSSを追加しないでデザインを変更できるように設定されています。

例えば
bootstrap にはサンプルや表示方法が記載されています。
https://getbootstrap.com/docs/5.3/getting-started/introduction/
ほぼ全てのデザインで対応できると思います。
色の変更は class に-primary や -secondary をつけるだけ、
https://getbootstrap.com/docs/5.3/utilities/colors/#colors
幅やサイズも class で変更できます
https://getbootstrap.com/docs/5.3/layout/grid/
icon もすでにあると思います
https://icons.getbootstrap.com/

bootstrap 以外でもどこのSassやLESSを参照しているのかが分かれば、ドキュメントが存在すると思います。

SassやLESSに追加変更することよりも、SassやLESSのコードを理解する事から最初にしてみてはいかがでしょうか?

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

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

#8

dotdot2

総合スコア3

投稿2023/03/07 01:56

自分はメリット感じたことないので自分で採用したことはないです。
(最低限欲しいNesting等の機能だけPostCSSで追加しています)
何故使うのかわからない程度しか恩恵がないのであれば、使わなくていいと思います。
TailwindCSS使い出してからはCSSはほとんど書いていません。

ところで、昨今のフロントエンドではNodeJSは必須になっていると思います。
自分はVoltaというツールでプロジェクトごとにNodeのバージョンが勝手に切り替わるようにしています。

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

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

最新の回答から1ヶ月経過したため この意見交換はクローズされました

意見をやりとりしたい話題がある場合は質問してみましょう!

質問する

関連した質問