Sass 基本の使い方 （Rails含む）

こんにちわ

とある人事評価制度のコンサル会社で新卒見習いエンジニアをやっています。

今日はRailsでwebアプリケーション開発でも良く使うであろうSassについて自分なりに簡単に解説をしたいと思います。

最近同期からsassのことについて質問を受けるので解説したものを公開したいと思います。

こんなかた対象です。

• Railsをやり始めてscssというものが出てきたけどよくわからん
• cssと何が違うの？
• 少し便利なのは知ってるけどわざわざ使う必要がわからん
• コンパイルってなに？

結構こんな疑問や問題を感じた人は意外と多いのではないでしょうか？なのでそれぞれについて解説してきましょう。ちなみにsassとscssは同じようなものです。厳密にいうと違うはずですがこの２つの違いがわかんなくて開発業務で困ったことはなかったのでここではスルーしましょう。（厳密な違いを本当は理解してないことは内緒です）

私はなにも知らずにscss拡張子のファイルに普通のcssを書いていました。今となってはいい思い出です。

前置きはこれくらいにしておいて早速解説していこうと思うのですが、sassやscssが何なのかは今回詳しく解説をいたしません。cssをちょっと便利に使えるようにしたものという認識で読みすすんでください。ここでは具体的に何ができるかを解説していきます。

 

導入

まずsassを導入しましょう。railsではデフォルトでsass-railというものが入っているのでbundle installすれば難なく使えます。

Rails以外のプロジェクトで使う場合はローカルに（自分のパソコンに）sassが入ってるか確認しましょう。

sass -v

上記コマンドを打ってバージョンが返ってくればokです。

バージョンが返って来なかった場合入っていないのでインストールをしましょう。

mac

http://book.scss.jp/code/c2/02.html

windows

https://qiita.com/jnst/items/369e2e6204a99726d00f

sassが使えるようになったら後は簡単です。sassを使いたいファイルの拡張子をscssというふうにしてあげましょう。これでsassが使えます。

 

Sassでできる便利な機能

sassはcssをより便利に使えるようにしたものです。私がよく使う便利機能を紹介しましょう。

 

入れ子にできる

sassは入れ子構造で書くことができます。通常cssではセレクタを指定しますが、例えばあるhtmlタグの中の子要素にスタイルを当てるときはスペース区切りで書きますがsassを使うと入れ子にすることで同じことができます。

/* css */

/* .divの中のulタグの中のliタグの場合 */

.div ul li {
  font-size: 16px;
  color: red;
}

// sass 
// .divの中のulの中のliの場合

.div {
  
  ul {
 
    li {
      font-size: 16px;
      color: red;
    }
  }
}

このような書き方ができます。どうでしょう？読みやすくなりませんか？また親要素にもスタイルを当てるときも楽になります。

また、入れ子にできるので大きな親要素の中、例えば#contentを作りその中に入れ子構造で書いておけばheaderの中でたまたま同じクラス名を使って板としても影響を受けません。スタイル崩れがなくなります。

このように見やすくなるだけでなく保守性や効率性も増します。

 

変数が使える

sassの大きな特徴としてプログラミングチックなことがかけます。なかでも特徴的なのが変数が使えることです。

プログラミングをやったことなくて変数って何という方は「箱」だと思ってください。変数が箱で箱によく使うもの入れといて使うときにその箱を呼んで反映させるものです。

では使い方。

$main_color: #0080FF;
$base_font_size: 16px;
$large_font_size: 24px; 

header {
  background-color: $main_color;

  .site-title {
    font-size: $large_font_size
  }
  nav {
    font-size: $base_font_size;
  }
}

footer {
  backgroud-color: $main-color;
}

先頭に「$」をつけて変数名。「:」の後に値を入れて名前でいつでも使えるようになっています。名前はわかりやすいものにしておくことで呼び出すときも楽です。

これはサイトを編集するときも楽です。例えばサイトのメインカラーを青系から緑系にしたいなってときに変数の値を一つ変えて上げるだけで済みます。大変便利です。

 

プログラミングっぽい書き方で効率化

先程も述べましたがsassはプログラミングチックなことがかけます。プログラミングチックに書くことで少ないコードで自動でなにかを作ってくれます。おすすめは下記です。

@for $i from 0 through 30 {
  .mt#{$i * 5} {
    margin-top:#{$i * 5}px !important;
  }
  .mb#{$i * 5} {
    margin-bottom:#{$i * 5}px !important;
  }
  .pt#{$i * 5} {
    padding-top:#{$i * 5}px !important;
  }
  .pb#{$i * 5} {
    padding-bottom:#{$i * 5}px !important;
  }
}

これは最高です。

なにをしているかといいますと「mt」に5ずつ加算されていく数字をくっつけたクラス名のセレクタを作りmargin-topに5pxずつ加算された数字を値にいれたものを繰り返しで処理を行っています。プログラミングをやっていない人だったり説明が意味わからんということもあると思うのですが、つまり

.mt5 { margin-top: 5px }　.mt10 { margin-top: 10px } ・・・.mt150 { margin-top: 150px }

を全部作ってくれています。これをmb、pt、pbと余白をいれるcssをそれぞれ作っていると言うわけです。これがあることでhtmlでちょっとここ「余白ほしいな」と調整するときにクラスを書いて5px単位で調整することが可能です。

まじで便利なのでぜひこれをコピペしてください。本記事で一番のおすすめです。

 

外部ファイルを読み込むことができる

sassファイル内で外部にあるsassファイルを読み込むことができます。

@import "header";
@import "footer";

header用のscss。footer用のscssと分けて作った場合、@import ファイル名で読み込むことができます。1枚のファイルだとわかりにくいの分けたいときあると思います。ガンガン分けてガンガン読み込みましょう。

 

コンパイル

ここまでsassの便利な機能とその使い方を紹介しましたが、sassの書き方なのでそのままhtml側でファイルを読み込んでも当然cssとして機能してくれません。

そこでコンパイルというものをいます。

コンパイルとはscssをcss記法に変換してくれる機能です。冒頭でインストールして頂いたsassはこのために使います。sassコマンドを使ってコンパイルしていきます。

sass /scss/style.scss /css/style.css

sassコマンドのあとにコンパイルするファイルを指定います。スペース空けてコンパイルしたものを置く場所のパスとコンパイル後のファイル名を下記ます。

上記の例ではscssフォルダの中にあるstyle.scssをcssフォルダの中にstyle.cssというファイルにコンパイルして置き換えています。このコンパイルしたstyle.cssをhtmlで読み込んでください。

Railsでは

railsではこの作業は不要となります。railsは開発環境であれば自動コンパイルされ自動でコンパイルしたファイルを読み込んでくれます。しかし、本番環境ではデフォルトでは自動コンパイルは設定されていないのでコンパイルの必要があるので注意しましょう。本番でコンパイルするときは下記コマンドを実行します。

RAILS_ENV=production bundle exec rake assets:precompile

 

最後に

ざっと具体的な使い方アンド実践で使えそうなものを紹介しました。

これを呼んでくださった方の開発が幸せになったら幸いです。

とはいえ私もまだまだ勉強中の身ですので本文でおかしなとこや指摘箇所等ありましたら優しくコメントしていただけると嬉しいです。

最後まで呼んでいただきありがとうございます。

 

参考

• http://book.scss.jp/code/c2/02.html
• https://qiita.com/jnst/items/369e2e6204a99726d00f

labelRails, Sass, Scss, フロントエンド