RailsでSass(SCSS)を使う方法を現役エンジニアが解説【初心者向け】
初心者向けにRailsでSass(SCSS)を使う方法について現役エンジニアが解説しています。SassとはSyntactically Awesome StyleSheetといい、より効率的にCSSを書くことのできる言語です。Rails3.1から入っており、自動的にコンパイルしてくれます。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
RailsでSass(SCSS)を使う方法について解説します。
そもそもRubyについてよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプRuby講座の内容をもとに紹介しています。
今回は、Rubyに関する内容だね！
どういう内容でしょうか？
RailsでSass(SCSS)を使う方法について詳しく説明していくね！
お願いします！
Sass(SCSS)とは
SassとはSyntactically Awesome StyleSheetといい、より効率的にCSSを書くことのできる言語です。
通常のCSSを拡張した言語であり、以下のような特徴があります。
- ネストして書くことができる
- 変数を使用できる
- 関数を使用できる
- 演算ができる
- 外部ファイルのインポートができる
- 他定義の継承ができる
RailsでSass(SCSS)を使う方法
RailsでSassを使うにはsass-railsというgemをインストールする必要があります。ですが、Rails3.1以降からデフォルトでインストールされるようになっているため、rails newでプロジェクトを作成すればインストールされます。
SassはCSSを拡張した言語のため、最終的にはブラウザが解釈できるCSSにコンパイルする必要があります。Railsではアセットパイプラインで .scssから.cssへと自動的にコンパイルされるので、特に意識する必要はありません。
実際に書いてみよう
app/assets/stylesheets/ にusers.scssというファイルを作成してみましょう。SCSS記法ではこのようにネストして書くことができます。
.parent {
color: black;
size: 16px;
ul li {
color: red;
&:hover {
cursor: pointer;
}
}
}
ファイルを作成したらbundle exec rails sでサーバを起動してhttp://localhost:3000にアクセスしてみましょう。
Developer tools(Windows: [F12], Mac: [Command]+[Option]+[I]) で、Sourcesタブにアクセスしてassets配下を確認してみてください。
さきほど作成したusers.scssをコンパイルして .cssに変換したものが配信されているのがわかりますね。
筆者プロフィール
| メンター稲員さん
フリーランスエンジニア。 経験言語：Ruby、Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript,Node.js。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは、初心者でもRuby on Railsを使ったプログラミングを習得できるオンラインブートキャンプRuby講座を開催しています。
挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
