こんにちは、しましまです。
季節が変わり、気温の差が激しい時期となってきました。
体調には十分に気をつけましょう。
さて、最近はじめて SCSS なるものに触れたので、この機会に調べてみました。
SCSS について
SCSS は Sassy CSS の略で、CSS の機能を強化したものです。
そのため、CSS とは互換性もあり、CSS の記述をそのまま SCSS として使用することもできます。
SCSS の機能
SCSS で使用できる機能は以下のとおりです。
- 変数が使える
- 条件分岐の処理が使える
- 反復処理が使える
- ミックスインを使える
- 配列が使える
- 関数が使える
- 継承が使える
- モジュール化ができる
私が担当した案件では、変数を使っているだけだったので、ここまで多機能であることに驚いています。
メリット・デメリット
◆メリット
上記のとおり、多くの機能が使えるため、効率的に開発を進めることができ、
かつ保守性もあがります。
◆デメリット
使いすぎると、スタイルシートが複雑化することがあり、逆に保守性が悪くなるようです。
その他
担当していた案件では、以下の拡張機能を vscode に追加し、コードをコンパイラで監視するようにしていました。
- Live Sass Compiler
まとめ
調べた結果、SCSS も大規模開発に向いているようです。
たしかに、開発する人数が増えていくほど、変数による統一する方法が活き、使いまわしがしやすいというメリットが大きいと思いました。
今回は変数のみを活用した開発でしたが、色コードや文字サイズ、スペースの幅などを案件で統一できるので、サイトとして統一感を持った状態で開発を進められることが、触っていて助かると感じました。
今後他の機能を活用した開発も行ってみたいです。