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

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

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

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

CSS

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

Q&A

解決済

2回答

7179閲覧

なぜ.sassよりも.scssの方が主流なのかわからない

muro

総合スコア99

Sass

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

CSS

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

1グッド

6クリップ

投稿2015/06/17 07:22

様々なサイトでSASSに関する記事を調べていると、拡張子が.sassではなく.scssの方の書き方をされているのを良くみかけます。
.scssのほうが後発らしいのですが、なぜこちらのほうが流行っているのかよくわかりません。

lang

1/* sass */ 2div 3 p 4 font-size: 16px 5 span 6 color: #f00

lang

1div { 2 p { 3 font-size: 16px; 4 } 5 span { 6 color: #f00; 7 } 8}

両者の書き方を比較すると、.sassはカッコやセミコロン抜きで書くことが出来てすっきりしたコードになるのに対し、.scssのほうは通常のcssと同じようにカッコやセミコロンをいちいちつけないといけないのが面倒に感じます。
.scssはインデントがずれていてもコンパイル可能という利点がありますが、そもそもインデントがずれていると読みづらいので、それならはじめからインデントを整える必要のある.sassで良いのではと思います。
さらに、includeやextendなどの特有な機能は、.sassでも.scssでも両者問題なく使えますし、ますます.scssを使う必要性がわかりません。

.scssはどういう点で.sassよりも優れているのでしょうか?
それとも、単に.sassが大勢に知られていないだけでしょうか?

ikuwow👍を押しています

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

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

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

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

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

guest

回答2

0

ベストアンサー

個人的な意見で申し訳ございません。
主に私がscss記法を使用する理由です。

  1. sass記法は見にくい
  2. scss記法の方が学習コストが低い

番号リスト記述量は増えてもブロック({})で囲われていた方が
どこからどこまでか安心できるのが理由です。

何より、cssが書ける人が初見ですんなり入りやすいのはやはりscss記法だと思います。
sassは書けるけどcssは書けないという人は居ないと思います。
その為、よりルールがcssに近いscss記法を使います。

投稿2015/06/17 07:47

nanndemoiikara

総合スコア775

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

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

muro

2015/06/23 06:25

返信が遅くなってしまいました。 たしかに.sassを使っていると、たまに見づらいと思うときがありました。 たとえば以下のように、階層が深いもののあとに浅いものが来たときなどは、階層が把握しづらいかもしれません。 #hoge section div p span color: #fff #fuga color: #000 私も初めはscssから知り、あとからsassの存在を知ったので、初めに覚えるならばやはりscssの方が良さそうですね。 そのあとから、scssの見やすさを取るか、sassの記述しやすさを取るか…。
muro

2015/06/23 06:29

すみません、コメントだとスペースが使えないんですね…。
mtdsnsk

2017/02/16 12:23

scssの記法だとIDE使ってると自動で整形してくれるから見やすいのでは
guest

0

構文についてはどちらを好むかは人それぞれでしょう。
Pythonも同様にインデントベースのため、苦手に感じる人もいます。
また、CSSとの互換性からとっつきやすさやもあるのでしょう。

参考
Sass vs. SCSS: which syntax is better?

投稿2015/06/17 07:53

sho_cs

総合スコア3541

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

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

muro

2015/06/23 06:40

返信が遅くなってしまいました。 私は他にもcoffeescriptやjadeも使っているので、カッコとセミコロンのないインデントベースでも大丈夫なのですが、 インデントベースが苦手だと感じる方もいらっしゃるのですね…。 しかし、元のcssに近いという点もあるから、scssの方が使用率を上回ったのですね。 もしscssしか知らないという人がいたら、sassも試してもらいたいものです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問