Sassy モジュールで SCSS（SASS）を Drupal にすばやく導入する

SASS/SCSS は、CSS コードを書くための標準として定着して久しいものです。まだ使っていないなら、切り替えを検討する時です。Sassy モジュールを使えば、Drupal に SCSS をすばやく統合できます――CSS ファイルは PHP ライブラリを使ってコンパイルされるため、共有ホスティングでも使えます。

はじめに

クリーンな Drupal インストールと Zen テーマから始めます。まず、Sassy モジュールをインストールします:

https://www.drupal.org/project/sassy

Sassy はコンパイルを処理するために Prepro モジュールを必要とします:

https://www.drupal.org/project/prepro

また、Sass コンパイラーライブラリを読み込むために Libraries API モジュールもインストールします:

https://www.drupal.org/project/libraries

PHPSass ライブラリ（SCSS から CSS へのコンパイラー）をダウンロードします:

https://github.com/richthegeek/phpsass

構造が次のようになるように、これを sites/all/libraries/phpsass に配置します:

• /sites/all/libraries/phpsass/SassLoader.php
• /sites/all/libraries/phpsass/SassParser.php

Sassy、Prepro、Libraries モジュールを有効にします。次に、サブテーマ（私の場合は sitemade）で sitemade.info ファイルを開き、SCSS スタイルシートを追加します:

stylesheets[all][] = css/styles.scss

css/styles.scss ファイルを作成し、Drupal のキャッシュをクリアすると、自動的にコンパイルされて動作するはずです。

問題が発生した場合は、files フォルダーの権限（書き込み可能であるべき）を確認し、ステータスレポートを見直してください。

Sassy モジュールの機能

Sassy は .scss ファイルを CSS にコンパイルし、Prepro はその出力を次に保存します:

sites/default/files/prepro

ページ読み込みごとに CSS が再生成されるのを避けるには（ライブサイトでは重要）、次に移動します:

/admin/config/media/prepro でキャッシュを有効にします。

Firebug + FireSass でのデバッグ

Firebug 用の FireSass プラグインを使うと、コンパイルされた CSS を元の SCSS ソース行までたどれます。これを Prepro の設定で有効にします:

✓ @warn と @debug を Watchdog に渡す
✓ 出力にデバッグ情報を含める

SCSS の機能

公式ウェブサイトでさらに詳しく調べてください:

http://sass-lang.com/

ネスト

#menu-1 {
  margin-top: 20px;

  ul {
    margin-left: 0;

    li {
      width: 100px;
      display: inline-block;

      a {
        text-decoration: none;

        span {
          padding-left: 10px;
          background: url(../images/icon.png) left 3px no-repeat;
        }
      }
    }

    .li-1 {
      background: red;
    }
  }
}

これは従来の CSS よりも読みやすく、保守しやすいものです:

#menu-1 { margin-top: 20px; }
#menu-1 ul { margin-left: 0; }
#menu-1 ul li { width: 100px; display: inline-block; }
#menu-1 ul li a { text-decoration: none; }
#menu-1 ul li a span { padding-left: 10px; background: url(../images/icon.png) left 3px no-repeat; }
#menu-1 ul .li-1 { background: red; }

親参照 &

a {
  font-weight: bold;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }

  body.firefox & {
    font-weight: normal;
  }
}

変数

$red: #fa0a0a;
$blue: #0a0afa;
$sidebar: 250px;

.sidebar {
  width: $sidebar;
  background: $red;
}

.content {
  margin-left: $sidebar;
  background: $blue;
}

ミックスイン（関数）

@mixin blue-button {
  background: #3498db;
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  border-radius: 28px;
  font-family: Arial;
  color: #fff;
  font-size: 20px;
  padding: 10px 20px;
  text-decoration: none;

  &:hover {
    background: #3cb0fd;
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  }
}

.form-submit {
  @include blue-button;
}