SCSSは良いことばかりではないかも

CSS拡張メタ言語SCSS

SCSSをみんな大絶賛している

 状態:-  閲覧数:2,240  投稿日:2015-12-24  更新日:2015-12-24
導入メリット
・「変数」を使用可能
・「CSS継承」をネストを用いて簡潔に記述可能
・「条件分岐」や「繰り返し処理」が可能
・「CSS記述」を簡略化
・「CSSファイル」の実行速度向上

その結果
・今更「SCSSなし」には戻れない


違和感を感じる


しかし、いついかなる時でも、便利かと言えば必ずしもそうではないかも
・SCSSは良いことばかりではない?

実際に遭遇した、面倒だなと思ったSCSS仕様

 閲覧数:683 投稿日:2015-12-24 更新日:2015-12-24

遭遇例


「Bootstrap4テンプレート」の機能単位毎CSS実装を確認したい

実際にCSSファイルを開いて確認してみたら?
・すべてのファイルをまとめてコンパイル
・1つのCSSファイルとして出力している
・そのため、コード内容には各種ライブラリCSSも含まれている
・恐ろしく長い
・確認したいのは、必要箇所だけなのに

必要ファイルだけ読み込みよう修正
・エラー発生
・「@mixin」「@include」等で他ファイルと共通部分があるため、コンパイルを通すためには、ある程度「関連ファイル」を読み込まなければいけない
・そうすると、確認のためだけに再コンパイルした結果も、やはり長くなる


まとめ


SCSSは作成には便利だが、初見の人が一部実装だけを個別確認したい場合は不便
・SCSSに慣れていないから?


SCSS × Windows



週間人気ページランキング / 9-1 → 9-7
順位 ページタイトル抜粋 アクセス数
1 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 4
2 Design 0 3
2 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 3
3 RGB ⇔ Lab | 色変換(色) 2
3 Chromeがおかしくなった。width認識が狭くなりレイアウトが崩れる | Google Chrome(ブラウザ) 2
3 このエントリーの結論 / 主な機能と使い方 / 補足 2
3 考え方A.長さの比率で角度60°を分割 / R≧G≧B 2
4 コンソールエラー / ブラウザ間差異 | ブラウザ 1
4 「Google Chrome」タブをグループへ追加すると、そのタイミングでグループは自動的に開かれてしまいます。開かないようにすることはできません | Google Chrome(ブラウザ) 1
4 Illustrator CS2 でファイル名に「更新済み」を追加しない | Illustrator CS2(Illustrator) 1
4 aタグで複数のブロック要素を囲むやり方 | CSS 1
4 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 1
4 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 1
4 LOCK: File currently in use. / マニフェストを読み込めませんでした 1
4 パッケージ化されてない拡張機能 | Chrome 拡張機能 1
4 Googleがハイフンって言ってるからハイフンって、そんな安直な考えで本当に良いの? CSS 「id」「class」名 に関する調査履歴 2 | 命名規則(コーディングルール) 1
4 Chromeで名前を付けて保存する際、ファイルを一つにするには、mht形式で保存する | Google Chrome(ブラウザ) 1
4 キャラクターなんとか機 / とくだ屋 / Xprite 1
4 ScreenOFF 1
4 RGBの種類 / sRGB / AdobeRGB | RGB(色) 1
2026/9/8 5:05 更新