2 flat logo on transparent 256
2018-04-10

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

Css02313212

SassはCSSをネストしたり、変数設定で代入できたりCSSを利用する上でかなり効率化できるスクリプト言語です。

今回はこのSassを利用して、Color用のscssファイルを作成し そのファイルをインポートする方法を解説します。

これを行うことにより、色の管理が非常に楽になります。

そもそもSassとは何かを知りたい方は下記記事を御覧ください。

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

SassでColor用のファイルを作成する

まずは単体でColorを設定しているSassを作成します。

ファイルパス:stylesheets/color_font.scss

※ファイルのパスと名前は任意に変更可能

$test-white:                           #FFFFFF;
$test-black:                            #F5F5F5;
$test-cm-black:                      #616161;
$test-main-border-black:        #e1e1e1;
$test-lightBlue:                       #03a9f4;

$article-gray-100:                  #F5F5F5;
$article-gray-200:                  #EEEEEE;
$article-gray-400:                  #BDBDBD;

Sassは$test-whiteの用に、$を文頭に設定することにより、変数宣言を行う事ができます。

Color用SassファイルをメインのScssへインポートする

Sassは別のSassファイルをインポートする事ができます。 その為Color用のSassを別のSassにインポートし 色を呼び出せる用にします。

ファイルパス:stylesheets/blog.scss

※簡易的にcolor_font.scssとblog.scssは同じ階層としています。

@import "color_font";

.Service-Header {
  text-align: center;
  #
  background-color: $test-black;
}

.Service-Wrapper {
  text-align: center;
  background-color: $test-black;
  color: $test-white;
  min-width: 1200px;

  .text-link {
    color: $test-white;

    &:hover, &:active, &:focus {
      color: $test-lightBlue;
    }
  }
}

1行目の@import でColor用のSassをインポートします。 これによって、Color用のSassで定義した色の変数($test-black;)などを呼び出す事が可能になります。

このようにColor用のSassを生成し、各スタイルシートで呼び出すことによって、簡単に色の統一と変更も可能になります。

その他font-sizeやブロックの大きさなども定義することによって より、全体のスタイルの統一と変更が簡単になります。

その他Sassの記事一覧は下記から

Ruby On RailsでSassを利用する際の記事一覧

前の記事
次の記事