1
2
タイトル通りなのですが、SassやLESSを使う理由がいまいちわかりません。
変数、関数、四則演算、ファイル分割、mixinなどが使えて便利なのはわかりますが、それ以上にデメリットが多いように感じます。
例えば、他人(連絡が取れない人)がSassで作ったサイトのcss(見た目)を一行変更する場合を、自分のまっさらなpcで開発環境を作るためにnode.js、gulpなどインポートして、開発環境を一から作る作業が面倒です。
cssだけならftpでもsshでも一発で変更完了なのにです。
cssファイルに直接編集したら目的は達成されますが、それだと未編集のSassファイルと差分が出てしまい何か違う気がします。.mapで出力してる場合尚更違う気がします。
さらに、cssは変数が使えるのでさらに導入するメリットがあまり感じません
大規模サイトの場合、SassやLESSを使うメリットはわかりますが中、小規模サイトでSassを使うメリットと、デメリットを教えてください。
さらに、皆様が良く使ってるSassのコンパイル方法を教えてください。
すごく勘違いした質問かもしれませんが、初心者の疑問です。
回答8件
#1
総合スコア9555
投稿2023/02/27 07:42
編集2023/02/27 07:57開発環境を一から作る作業が面倒です。
これは、常にハードルにはなる話ですが、
それでも使われる理由としては、それにもまして、Sassが有用である証拠です。
ただ、開発環境の構築がめんどうなお気持ちはよくわかります。
環境言語などのバージョンアップ時に、みなで一斉にアップデートしなくてはいけないなどの、
リソースも割かれてしまいます。
そこで、昨今では、Dockerなど、比較的簡単に環境構築を共通にできるツールや、
VisualStudio Codeの拡張機能にて、かなりいい感じにSassをコンパイルができたり、
ましてや、Sassも始め、各種コンパイラ型言語も含めた、コンパイル専用アプリケーションなんてのも登場しています。
皆、同じ悩みを抱えているということですね。
もし、興味があれば、上記に示したものを調査されてはいかがでしょうか。
#2
総合スコア145932
投稿2023/02/27 07:52
編集2023/02/27 07:57中、小規模サイトでSassを使うメリットと、デメリットを教えてください。
もともとそれらの言語で書かれたテンプレートやライブラリを使っている、という可能性もあります。
cssは変数が使えるのでさらに導入するメリットがあまり感じません
「ループで類似したセレクタを量産する」ような場合には、ふつうのCSSで書こうとすれば、ひたすら書き並べるしかなく構造化は不可能です。
CSS変数は値にしか使えず、セレクタを変動させることや、メディアクエリの幅指定に適用するようなことはできません。
#3
総合スコア80875
投稿2023/02/27 08:56
編集2023/02/27 09:00そもそもの話
他人(連絡が取れない人)が
上記がかなりのレアケースになりますし、大抵の人は引継ぎがある、もしくは何かしら経験がある状態で参画するので、気に病む必要はないと思います。
現在では静的HTML,CSSだけでWebアプリケーションを作ることが少ないとも思いますし、既にあるようにSass前提のWebフレームワークを利用している場合は、開発環境は自然と揃うことになります。
「結局WebアプリケーションはHTMLを出力するのに、なぜサーバーサイドの言語やフレームワークを使うのかが分からない」というのと同等の疑問に思います。
採用基準についても、規模は関係なく、「その人が慣れているから」「プロジェクトやチームで標準採用されていて熟練者や経験者が多いから」もっと言えば「好みだから」という理由に落ちくつくように思います。
最初はミニマムのつもりでも、気づいたら規模が大きくなってるのはよくあることで、そうなることを見越してメンテナンス性や効率を考えての採用というのもあるのではと。
#4
総合スコア4447
投稿2023/02/27 11:01
sassコンパイルの手っ取り早い方法だけ紹介します。
VSCodeを利用しているのであれば、下記機能拡張"Live Sass Compiler"を利用してみてください。
単純にコンパイルするだけであればこの機能拡張だけで完結するので、環境構築などの手間がかかりません。
VS Marketplace リンク: https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass
#5
貴重な回答ありがとうございます。
「大小関係なく使える場合、使った方がいい」の認識なのですね。
現在連絡のできない人が作った10ページほどのサイトの改修でほんの数行変更するためにVSCodeのLive Sass Compilerでコンパイルしたらエラーの嵐だったので修正しつつ...五分で終わる作業がなぜこんな面倒なことを？疑問に思ってました。
DockerやLive Sass Compilerを使ってなかったら...やはり面倒ですね。
他人(連絡が取れない人)が
数件見てますが、これはレアケースなのですね
「ループで類似したセレクタを量産する」ような場合には、ふつうのCSSで書こうとすれば、ひたすら書き並べるしかなく構造化は不可能です。
CSS変数は値にしか使えず、セレクタを変動させることや、メディアクエリの幅指定に適用するようなことはできません。
確かにそうですが、数ページほどの小規模の場合、本当に必要なのか疑問が残ります。
周りにはDockerもSassも使わない制作者もまだまだいるので、使いどころが難しいなと感じてます。さらに多少CSSを使えるお客さんは「簡単な変更は自分でする」という人もいるのでお客さん合わせてSass、CSSを使い分けるのが正解なのかな？とも思います。
ありがとうございました。
#6
総合スコア4447
投稿2023/02/28 07:14
編集対象のファイルはsass形式のファイルだったのかな？
scss形式であればcss形式とほぼ文法が一緒なので、これから構造化cssを学習していくのであればscss形式での書き方を覚えることをお勧めします。
既存のスタイルにちょっと数行書き加えるだけ、sassファイルをコンパイルしたりエラーの解決をしたりするのが大変...ということであれば、別途変更差分だけ記載したcssファイルを作ってlinkさせるだけでもよかったのではないでしょうか。
全てのスタイルを1つのファイルで管理する必要は全然ありませんので。
sassでコンパイルされたcssファイルをベースに、細かな変更を加えたいお客さん用にカスタマイズ用cssファイルを用意するのもこのような課題の1つの解決法になるかと思います。
#7
総合スコア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
総合スコア3
投稿2023/03/07 01:56
自分はメリット感じたことないので自分で採用したことはないです。
（最低限欲しいNesting等の機能だけPostCSSで追加しています）
何故使うのかわからない程度しか恩恵がないのであれば、使わなくていいと思います。
TailwindCSS使い出してからはCSSはほとんど書いていません。
ところで、昨今のフロントエンドではNodeJSは必須になっていると思います。
自分はVoltaというツールでプロジェクトごとにNodeのバージョンが勝手に切り替わるようにしています。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。