RailsでSass(SCSS)を使う方法を現役エンジニアが解説【初心者向け】

初心者向けにRailsでSass(SCSS)を使う方法について現役エンジニアが解説しています。SassとはSyntactically Awesome StyleSheetといい、より効率的にCSSを書くことのできる言語です。Rails3.1から入っており、自動的にコンパイルしてくれます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

RailsでSass(SCSS)を使う方法について解説します。

Rubyについてそもそもよく分からないという方は、Rubyとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのWebアプリケーションオンラインブートキャンプの内容をもとに紹介しています。

田島悠介

今回は、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へと自動的にコンパイルされるので、特に意識する必要はありません。

[PR] Rubyのプログラミングで挫折しない学習方法を動画で公開中

実際に書いてみよう

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配下を確認してみてください。

RailsでSass(SCSS)を使う方法

さきほど作成したusers.scssをコンパイルして .cssに変換したものが配信されているのがわかりますね。

 

筆者プロフィール

メンター稲員さん

フリーランスエンジニア。
大手SEからフリーランスのWeb系エンジニアにジョブチェンジ。

経験言語:Ruby、Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript,Node.js。
おうち大好きマンです。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも最短4週間でエンジニアになれるRuby on Railsオンラインブートキャンプを開催しています。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサービスを開発することが可能です。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。