2 flat logo on transparent 256
2018-01-20

Ruby On RailsでSassを活用し、CSS作成を高速・効率化する

530

今回はフロントエンドのCSS作成を高速化しなおかつ効率化できる、Sassについて解説します。

※CSSについての理解がある程度理解できる方が対象になります

Sassとは

CSSの拡張言語(メタ言語)で、CSSをプログラミング的な書き方で記載できます。 基本はRuby対応ですが、PHPやJava用のライブラリも提供されています。

コンパイルが必要な為、何かしらのプログラミング言語を 利用していないと対応できません。

今回は下記条件で解説します。

プログラミング言語:Ruby

フレームワーク:Ruby On Rails 4

※拡張子は「.scss」となります。

なおRuby On Rails 3.1以降の場合、デフォルトでSassを使用するように設定されています。

Rails 3.1「未満」には、Gemfileに以下を追加する必要があります

gem ' sass-rails '

Sassの特徴

CSSをネストできる

CSS単位でネストさせる事ができるので、一目でCSSの親子関係が分かります。 下記の場合は親クラス(categorie)の下に2つの子クラス用のCSS (i-categoryTag-wrapper、i-categoryTag)が設定されています。

.categories {
  padding: 60px 0;
  font-size: 14px;

  .i-categoryTag-wrapper {
    margin-bottom: 30px;
    font-size: 17px;
  }

  .i-categoryTag {
    width: 100px;
    height: 67px;
  }
}


CSSへ変数を設定できる。

変数が設定できるため、各CSSで色や横幅などを分かり易く統一できます。

これは超便利です。

$basewidth: 600px;
$basecolor: gray;

.mainContent {
    width: $basewidth;
    color: $basecolor;
    padding: 10px - 5;
}

CSSを丸ごとincludeできる

例えば、カラー定義のSassとメインコンテンツ用のSassを用意し メインコンテンツ用のSassへカラー定義のSassを呼び出せます。 これによって、サイトデザイン変更の際色の変換がスムーズに対応できます。

color.scss

$article-main-border-black:  #F5F5F5;
$article-h2-color:                  #616161;

他のSassを導入するには@import でファイルを指定し 呼び出します。

main_content.scss

@import "color";

.articleContent {
  border: 1px solid $article-main-border-black;
  padding: 36px;
  margin-bottom: 100px;
}

h1 {
    margin: 24px 0 48px;
    font-size: 30px;
    font-weight: 600;
   background-color: $article-h2-color;
 }

以上になります。

クラス単位でmixin, extendなど便利な機能もあります

Sassの@extendと@mixinを解説

ちょっとした小技はこちら

Sass(Scss)のfor文を使って、ちょっとしたデザイン修正を便利に行う

また別のSassファイルを丸ごとインクルードできます。

Ruby On RailsでSassのColor管理用ファイルを作っておくとかなり便利

なおRuby On Railsの場合、本番環境へデプロイした後にコンパイルをしないとCSSが適用されませんのでご注意下さい。

詳細はRuby On Railsのアプリを本番環境へデプロイした時に、CSSが反映されない場合の対処法を御覧ください

その他関連記事

Ruby On Rails でページネーションを設定する

前の記事
次の記事