初めに

RailsではCssの他にSassを使うことができます。Sassとは何か。そしてCssとは何が違うのかについて調べてみたら、Cssよりも遥かに効率的かつ視覚的に見やすくコードを書くことができるなどのメリットがあることが分かってきました。こちらの記事を参考にCssではなく、Sassという書き方を知っていただき活用いただければと思います。

Sassとは

Sassはアメリカのハンプトン・キャトリンとネイサン・バイゼンバウムによって開発されたスタイルシート言語です。　Syntactically Awesome StyleSheetの略であり、その意味はSyntactically-構文的に、Awesome-素晴らしいStyleSheet-スタイルを適用するシートという意味になります。ここでポイントになるのが、Syntactically-構文的にというところにありますが、Cssの書き方を画期的に改変したものになります。

RailsにおけるSassの導入方法

SassはCssの拡張言語であり、利用するにはSassで書いた後にCssにコンパイルする必要があります。コンパイルの仕方についてはいろいろありますが、Vscodeを利用する場合にはextensions(拡張機能）の一つである「Live Sass Compiler」を使ってCssファイルに変えます。以下、ダウンロードサイトになりますので、ご覧ください。
ダウンロードはこちら
https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass
Railsではsass-railsというgemを導入する必要がありましたが、Rails3.1以降からは基本的にRails newによってアプリを新規作成する際にコンパイラーもインストールされるので何もしなくても使えます。

Sassを使うメリットについて

Sassで書いてもCssにコンパイルされるのに、何故CssではなくわざわざSassで書く必要があるでしょうか？それには以下のようなメリットがあるからです。

1. 構造的にコードが見やすくなります。

Cssで書いてもコードは同じですが、Sassで書くとCssの記述をネスト化することができます。例えば、以下のようなコードがあったとします。

styleを適用するHtmlファイル

<div id="news">
  <h2>お知らせ</h2>
    <ul id="news-list">
      <li>
         <a href="#">2021.11.11
           <span class="news-title"></span>
         </a>
      </li>
     </ul>
 </div>

①Cssで書いた場合

#news {
    float: right;
    width: 100%;
}
#news h2 {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 5px;
}
#news-list {
    background-color: #f3f5f4;
    border: 1px solid #ccc;
    padding: 15px;
}
#news-list li {
    margin-bottom: 12px;
    font-size: 32px;
}
#news-list li a {
    color: #c8a8a8;
    text-decoration: none;
}
#news-list li:hover {
    opacity: 0.3;
}

②Sassで書いた場合

#news {
       float: right;
       width: 100%;
       & h2{
            font-size: 12px;
            font-weight: 500;
            margin-bottom: 5px;
            }
}

#news-list {
            background-color: #f3f5f4;
            border: 1px solid #ccc;
            padding: 15px;
            & li {
                  margin-bottom: 12px;
                  font-size: 32px;
                  &:hover {
                           opacity: 0.3;
                          }
            & a {
                 color: #c8a8a8;
                 text-decoration: none;
                }
           }
}

①と②を見比べてみると分かる様に、②のSassで書いた方がネストされていて構造的に分かりやすいですよね。一眼で見ても適用するスタイルの記述がどの行にあるのか探す手間がなくなります。コードが長くなればなるほど、このようなメリットは大きく感じるでしょう。

2. Sassでは変数を使うことができます。

変数と聞くとRubyやPhpなどのプログラミング言語でよく使われていますが、Sassでも変数を使うことが可能です。どういう場面で変数を使うかなんですが、具体的には以下の様なケースが挙げられます。

①CSSの場合

.main-content {
               color: #c8a8a8;
}

.header-nav { 
              background-color: #c8a8a8;
}

.footer {
         color: #c8a8a8;
}

このように同じ#c8a8a8;の記述を３回繰り返しています。もし適用する色を変える場合、合計３箇所修正しなければなりません。打ち間違いも起こるし、繰り返し作業になるので非効率的です。

②Sassの場合

$maincolor: #c8a8a8;
.main-content {
               color: $maincolor;
}

.header-nav { 
              background-color: $maincolor;
}

.footer {
         color: $maincolor;
}

この場合、\$maincolorと言う変数に#c8a8a8というcolor属性を代入していますが、この$maincolorのcolorを修正するだけで済みます。どちらが効率的なのかは一目瞭然と言えるでしょう。この他にも

✔︎①関数使うことができる
✔︎②演算が可能
✔︎③外部ファイルをインポートして使える
✔︎④継承ができる

などのメリットがあります。Railsではコンパイルが無しに使えるので是非試してみてはいかがでしょうか。

【Rails】Ruby on RailsとSass

初めに

目次