【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜設定ファイルを知っておこう – 番外編

【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜設定ファイルを知っておこう – 番外編

すぐに使えるSCSS入門

すぐに使えるSCSS入門

#SCSS
#HTML5
#RIA
#CSS
野中 龍一

野中 龍一

facebook logohatena logotwitter logo
Clock Icon2012.11.09

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

前回の記事「【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜Mixinsを作ってみよう編」「すぐに使えるSCSS入門シリーズ」でSCSS・Compassの一般的な機能の紹介をしてきました。

今回は番外編としてSCSS, Compassの設定ファイルについて紹介したいと思います。

設定ファイルで何をするか？

CompassにはスタイルシートやJavascript、画像・フォントに関する処理があります。
これらは基本的に設定をいじらなくても利用できますが、サーバーの環境や利用するCMSなどによってパスを制御する必要がある時に設定ファイルから出力するパスを制御することができます。

どんな設定項目があるか？

本家の設定に関するリファレンスはこちら「Configuration Reference」、はい英語です。
ですが、ななんとすでに日本語の超訳 Configuration ReferenceをWebTecNote様が用意してくれています。

こ、こんな記事いらんかったんや。

とし言いたいところですが自分の経験にするために知っておくと困らない設定項目を厳選して紹介しScout.appでどのように設定するかだけでも紹介したいと思います。

知っておくと役立つ設定項目

知っておくと役立つ設定項目を少し抜き出して紹介したいと思います。この他にも設定項目がありますが、まずこの項目を覚えておくと問題が解決されることがあるかもしれません。

分類 設定用プロパティ 型 説明
制御関連 additional_import_paths Array or String プロジェクト外にあるSass（SCSS）ファイルをインポートして使いたい時に利用できます。
配列で複数指定することもできます。
パス -
URL関連 sass_dir String Sass, SCSSが保存されているフォルダ
パス sass
http_path String Outputされるファイルの基準パス(URL)になります。デフォルトは「/」が使われ、以下の指定に影響します。
パス http_path
relative_assets Boolean CompassのURLsヘルパーが返すパスを相対パスか絶対パスのどちらにするか設定します。trueにするとCSSファイルからの相対パスを指定します。
パス ../..
css_dir String アウトプット（コンパイル）されるCSSのディレクトリを指定します。
パス css_dir(Default: stylesheets)
css_path String アウトプット（コンパイル）されるCSSのフルパスを指定します。
パス css_path(Default: project_path/css_dir)
images_dir String CSSで利用する画像が保存されたディレクトリを指定します。
パス images_dir(Default: images)
images_path String CSSで利用する画像が保存されたディレクトリへのフルパスを指定します。
パス image_path(Default: project_path/images_path)
http_stylesheets_dir String サーバー上に置くCSSファイルを入れたディレクトリを指定します。
パス http_path/http_stylesheets_dir
http_stylesheets_path String サーバー上に置くCSSファイルを入れたディレクトリへのフルパスを指定します。
パス http_stylesheets_path
http_images_dir String サーバー上に置く画像ファイルを入れたディレクトリを指定します。
パス http_path/http_images_dir
http_images_path String サーバー上に置く画像ファイルを入れたディレクトリへのフルパスを指定します。
パス http_images_path
generated_images_dir String CSS Spriteヘルパーなどで生成される画像を保存するためのディレクトリへの相対パスを指定します。
パス project_path/generated_images_dir(Default: images_dir)
generated_images_path String CSS Spriteヘルパーなどで生成される画像を保存するためのディレクトリへのフルパスを指定します。
パス generated_images_path(Default: project_path/images_dir)
http_generated_images_path String CSS Spriteヘルパーなどで生成された画像を保存しているサーバー上のディレクトリへのフルパスを指定します。
パス http_generated_images_path(Default: http_path/generated_images_dir)
http_fonts_dir String サーバー上に置くフォントファイルのディレクトリを指定します。
パス http_path/http_fonts_dir
http_fonts_path String Wサーバー上に置くフォントファイルのディレクトリへのフルパスを指定します。
パス http_fonts_path(Default: http_path/http_fonts_dir)

Scout.appでの設定方法

まず、プロジェクトルートにconfig.rbというファイルを作成します。
このファイルをScoutのプロジェクト設定から読み込むように指定します。

Scoutのプロジェクト設定でコンフィグファイルを読み込む

プロジェクトを作成し、コンフィグファイルの設定を行いましょう。コンフィグファイルはプロジェクトのルートに置くのが一般的なようです。

ファイル構成と読み込み対象のconfig.rb

対象がいるのconfig.rbを選択します。

Scout.appではconfig.rbを変更してもリアルタイムで反映は行ってくれません。プロジェクト監視の再起動が必要なのでconfig.rbを変更したら監視の起動をし直してください。

それでは監視を起動して、それぞれの項目でアウトプットがどのように変わるか紹介していきます。

1.additional_import_paths

プロジェクト外にあるSass（SCSS）ファイルをインポートして使いたい時に利用できます。
配列で複数指定することもできます。

このサンプルでは、ScoutでInput Folderに指定しているフォルダ以外にimportというフォルダを外に作り、そのフォルダの中に作成した_import.scssというファイルを読み込んでみます。

1.ファイル構成

  • css/ (output)
    • sample.css
  • scss/ (input)
    • sample.scss
  • import/ (additional_import)
    • _import.scss
  • config.rb
  • index.html

2.Config: config.rb

additional_import_pathsは先頭にディレクトリセパレータ「/」を付けなかった場合、プロジェクトルート + 指定したパスになります。

additional_import_paths = 'import/'

3.SCSS: _import.scss

インポート用のファイルにサンプルとしてクラスを追加します。

.import_sample
{
        background : #ddd;
}

4.SCSS: sample.scss

@importで_import.scssファイルを読み込みます。additional_import_pathsで指定したルート階層が監視対象になります。

/* *****************************
 *
 * Import file to Scss or Sass.
 *
 **************************** */
@import "import";

.additional_import_paths_sample
{
        @extend .import_sample;

        width   : 300px;
        height  : 150px;
}

Output CSS

ちゃんと_import.scssファイルが読み込まれていますね。

/* *****************************
 *
 * Import file to Scss or Sass.
 *
 **************************** */
/* line 2, ../import/_import.scss */
.import_sample, .additional_import_paths_sample {
  background: #ddd;
}

/* line 11, ../scss/sample.scss */
.additional_import_paths_sample {
  width: 300px;
  height: 150px;
}

2.http_path

Outputされるファイルの基準パス(URL)になります。デフォルトは「/」が使われ、以下の指定に影響します。

  • http_stylesheets_dir
  • http_images_dir
  • http_javascripts_dir
  • http_fonts_dir

また、以下の設定を行うとhttp_pathを上書きします。

  • http_stylesheets_path
  • http_images_path
  • http_generated_images_path
  • http_fonts_path

このサンプルではCompassのURLsヘルパーで出力されるパスを制御してみます。

画像フォルダの設定

試す前に必ずパスの設定をしましょう。

JavaScriptを利用する場合はJavaScript Folderの指定も行いましょう。

URLsヘルパーは以下の設定項目に依存します。画像フォルダ以外にも以下の項目の指定をしないと正しく動作しません。

  • css_dir: プロジェクトルートからの相対指定でCSSを置いているディレクトリを指定
  • images_dir: プロジェクトルートからの相対指定で画像を置いているディレクトリを指定
  • javascripts_dir: プロジェクトルートからの相対指定でJavaScriptを置いているディレクトリを指定
  • fonts_dir: プロジェクトルートからの相対指定でフォントを置いているディレクトリを指定

Config: config.rb

試しにパスを設定してみます。

http_path = 'http://classmethod.jp'

SCSS: sample.scss

CompassのURLｓヘルパー「image-url()」を使ってみます。

.http_path
{
        background: image-url('ogp.png');

}

Output CSS: sample.css

http_path + images_dir + image_file + ?タイムスタンプがちゃんと設定されていますね。

/* line 19, ../scss/sample.scss */
.http_path {
  background: url('https://classmethod.jp/images/ogp.png?1346380660');
}

3.relative_assets

この指定はhttp_pathを設定していると意味を為しません。

CompassのURLsヘルパーが返すパスを相対パスか絶対パスのどちらにするか設定します。trueにするとCSSファイルからの相対パスを指定します。

Config: config.rb

relative_assets = true

SCSS: sample.scss

.http_path
{
        background: image-url('ogp.png');
}

Output CSS: sample.css

値がfalseの時はルートからの絶対パス指定になる。

/* line 19, ../scss/sample.scss */
.http_path {
  background: url('/images/ogp.png?1346380660');
}

値がtrueの時はCSSファイルからの相対パスとなる。

/* line 19, ../scss/sample.scss */
.http_path {
  background: url('../images/ogp.png?1346380660');
}

4.http_stylesheets_dir

サーバー上に置くCSSファイルを入れたディレクトリを指定します。

Config: config.rb

http_stylesheets_dir = 'css/'

SCSS: sample.scss

この機能を利用する良い例が思いつかないので@debugでログに表示してみます。

@debug stylesheet-url('style.css');

Output Log

http_pathに設定したディレクトリが入っていますね。

DEBUG: url('https://classmethod.jp/css/style.css')

5.http_stylesheets_path

サーバー上に置くCSSファイルを入れたディレクトリへのフルパスを指定します。

Config: config.rb

http_stylesheets_path = 'https://dev.classmethod.jp/stylesheet/'

SCSS: sample.scss

この機能を利用する良い例が思いつかないので@debugでログに表示してみます。

@debug stylesheet-url('style.css');

Output Log

http_stylesheets_pathを指定するとhttp_stylesheets_dirは無視されます。

DEBUG: url('https://dev.classmethod.jp/stylesheet/style.css')

6.http_images_dir

サーバー上に置く画像ファイルを入れたディレクトリを指定します。

Config: config.rb

http_images_dir = 'images/'

SCSS: sample.scss

.http_path
{
        background: image-url('ogp.png');
}

Output CSS: sample.css

/* line 20, ../scss/sample.scss */
.http_path {
  background: url('https://classmethod.jp/images/ogp.png?1346380660');
}

7.http_images_path

サーバー上に置く画像ファイルを入れたディレクトリへのフルパスを指定します。

Config: config.rb

http_images_path = 'https://dev.classmethod.jp/img/'

SCSS: sample.scss

.http_path
{
        background: image-url('ogp.png');
}

Output CSS: sample.css

/* line 20, ../scss/sample.scss */
.http_path {
  background: url('https://dev.classmethod.jp/img/ogp.png?1346380660');
}

まとめ

generated_images関連とfont関連は次の回で詳しく説明したいと思います。

実はこの指定を知らないと、Wordpressなどでテーマ上のパス指定と公開時のサーバー上のパス指定が違うときに正しく動かすことができません。

次回はCSS Spriteヘルパーの試しながらgenerated_images_dir, generated_images_path, http_generated_images_pathについて紹介したいと思います。

Share this article

facebook logohatena logotwitter logo

関連記事

SASS là gì ? Phân biệt SASS, SCSS và CSS

SASS là gì ? Phân biệt SASS, SCSS và CSS

@wakamshaさんのAltJS,AltCSS課題をGulp, SCSS, TypeScript でやってみた

@wakamshaさんのAltJS,AltCSS課題をGulp, SCSS, TypeScript でやってみた

User avatar
植木 和樹
2017.06.07
SCSSでremを使ったVertical Rhythm

SCSSでremを使ったVertical Rhythm

User avatar
野中 龍一
2015.07.07
これからはじめるGulp #25：Hologramとgulp-hologramでスタイルガイドを作る

これからはじめるGulp #25：Hologramとgulp-hologramでスタイルガイドを作る

User avatar
野中 龍一
2014.12.25
Classmethod's white logo
Facebook's logo
X's logo
YouTube's logo

© Classmethod, Inc. All rights reserved.