Ruby on railsのスタイルシートって何?

プログラム

今回はRuby on railsのスタイルシートについて分かりやす解説していきます。

いきなりスタイルシートって言われても、意味が分からないですよね。

私もRuby on railsを学んでいく際に、正直スタイルシートって何?ってなりました。

なので、今回はどんな機能があって、スタイルシートを使うにはどのような場合があるのかを説明していきます。

そもそもスタイルシートって何?

そもそもスタイルシートという言葉の意味が分かんないですよね。

僕も最初、スタイルシートが何をするものかがよく分からなくて困惑しました。

そこで、スタイルシートは何をするものかを最初説明していきます。

スタイルシートは、簡単に言うとデザインや見栄えを変更するための言語で、具体的に言うと、レイアウトを別の場所で定義しておいてからそれを文章などに適応させるという考え方です。

WEBアプリケーションのデザインを変更したいときに、スタイルシートを使って変えていきます。

CSSが広く普及しているので、スタイルシートといえばCSSを指すことが多いです。

スタイルシートの使い方

スタイルシートはどんなものかは分かりましたか?

ここからは、スタイルシートを使う方法について説明していきます。

Ruby on railsで作ったアプリケーションのスタイルシートは、普通のCSSではなく、scssというファイルに書きます。

scssは、ざっくりというと、CSSを出力するためのファイルで、CSSではできない便利な書き方ができます。

それでは、具体的に見ていきましょう。

スタイルシートの場所

まずは、スタイルシートの保存先についてです。

Ruby on railsでスタイルシートを使う場合は、自分で作ったアプリ名のフォルダ内にあって、フォルダ内のassetsの中のstylesheetsに保存されています。

app/assets/stylesheets

この場所に保存されています。

保存されている場所には、application.cssファイルや自分で作成したアプリ名のsccsファイルが保存されています。

スタイルシートの書き込み

自分が作ったアプリのファイルの中にCSSを記述することでアプリのデザインを変えることができます。

sccsファイルは、Sassというstylesheetを拡張したもので、scssはCSSよりも記述量が少なくできて、より複雑なコードの再利用等もできます。

sccsファイルは、CSSとは違う名前のファイルですが、通常のCSSでの記述でも認識されるので、CSSの記述でも問題はないです。

スタイルシートの読み込み

以前のRuby on railsはSaasが入っていなかったのですが、現在のバージョンではRuby on railsをインストールすると自動的にSaasもインストールされています。

scssを反映させるにはコンパイルする必要があります。

コンパイルをすることで、scssファイルはCSSとして読み込みがされるようになります。

scssの特徴

ここからは、scssの主な特徴について紹介していきます。

  • CSSの記述量が大幅に減る
  • 効率的にcssが書ける

まとめ

  • スタイルシートは、デザインや見栄えを変更する言語。
  • スタイルシートといえば、CSSを指していることが多い。