dsRuby on RailsでSassを使ってCSSの記述を行うためにやったことをアウトプットしてSassを適用する方法をご紹介します。
ds現在私はRUNTEQというオンラインプログラミングスクールでプログラミングの学んでいるのでその学習のアウトプットも兼ねて、Webアプリを１から作っていく過程を書きます。(先述しておきますが、カリキュラムで学んだ技術は使いますがカリキュラムについては一切触れません）
このブログは素人がプログラミングをはじめとしたWebの技術を学びながら書いているため
誤記などあるかもしれませんが、温かく見守っていただけると幸いです。
ただ誤りがないようにしっかり調べて書くつもりなので、これからWebアプリ製作など
プログラミングを学ぼうと思っている方にはぜひご覧いただきたいです。
ds何かわからないことや、誤りがありましたら
Xなどで教えていただけると幸いです。
Sassの説明
Sassとは
Sassは、CSS（ウェブページのデザインを指定するための言語）をもっと使いやすくするためのツールです。通常のCSSに比べて、コードを書くのが簡単で、同じようなスタイルを何度も書く必要がなくなります。Sassを使うと、コードを短く、分かりやすく、管理しやすくすることができます。
なぜSassを使うのか？
1. 簡単にカスタマイズできる: よく使う色やサイズなどを変数として保存できるので、一か所を変えるだけでウェブサイト全体のデザインを変更することができます。
（例 $text-color: #001000 このようにカラーコードを変数に登録して使うことで簡単に配色できる）
2. コードが整理しやすい: 似たようなデザインの部分をまとめて書くことができるので、コードがスッキリして見やすくなります。
3. 再利用しやすい: よく使うデザインのパターンをテンプレートとして保存し、何度でも使えるので、同じようなコードを繰り返し書く手間が省けます。
Sassを適用する方法
dsRuby on Railsで簡単にSassを扱う方法ですが結論としては‘sass-rails’というgemを使うだけで行けました。下記に詳しい手順を書いていきます。(ライブラリ公式のGitHubページも記載しておきます。)
gemファイルにsass-railsを追加
追加したらbundle installでgemのインストール
私はDockerで環境構築しているので、DockerのcomposeのWebと呼ばれるサービスの中で
bundle installを行いました。環境に合わせてインストール先は選んでください。
Railsサーバーの再起動
gemファイルへの変更を反映させるために再起動を行います。
コントローラーに対応した.scssファイルを作成する
スタイルの反映を確認
ds最後にコードを記載して確認します。私は実際にアプリを作成する際の
文字の色や写真を追加して反映されるかを確認しています。
ds無事画像が読み込まれたり、
文字の色が反映されているので問題なさそうです。
基本的にCSSにコンパイルされたファイルは見つかりませんが、しっかりscssからcssの形式にコンパイルされてそうです。もし反映されない場合はcssファイルの読み込みがhtmlファイル内で行われていない可能性もありますので通常のCSSと同様にhtml内でCSSが読み込まれているか確認しましょう。
他の適用方法
Rails7以降ではRailsアプリを作成する段階でsassを使うことを宣言できるそうです。
詳しくは下記の公式ページからご確認ください。
最後に
dsSassの適用方法を記述してきました。これからSassを使用してCSSを書いていこうと思います。ファイル整理の方法やCSSの記載などでいい書き方がありましたら、これからもアウトプットとしてこのブログで書いていこうと思います。
