プラカンブログSTAFF BLOG

2017.09.28

そろそろ始めよう!Sassを味方につける【運用編】

毎日暑くて暑くてベトベトンのようにドロドロに溶けてしまいそうなKIKUCHIです。こんにちは。
さてさて、Sassを味方につけるシリーズ最終章の【運用編】です。
 
今までの記事はこちら
 
Sassが便利なのは理解した、使い方も分かった、でも!実際の現場で使いこなせなかったら意味ないぞ???
ということで、私が仕事をする上で「こんな使い方をしたら\みんなハッピー♪/」になるであろう(なってほしい)方法をご紹介します。
 
(あくまで個人的にハッピー♪と思う方法なので、もっといい感じの方法があったら教えてください!)

Sassが使えない人を含めて運用する場合はどうするの?

そもそもSassの導入に踏み切れない理由の一つに「社内・クライアントの全員がSassを使えるわけじゃない」点があると思います。
安心してください、全員がSassを使えなくても大丈夫ですよ。
 
Sassはコンパイルする際にCSSのフォーマットを予め設定することが出来ます。
Sass導入編の記事でちょろっとふれましたが、「config.rb」ファイルの「output_style」で好きなアウトプットスタイルを指定出来ます。
※行の頭に「#」がついているのはコメントアウト
# output_style = :expanded or :nested or :compact or :compressed
↑これをこう↓じゃ!
output_style = :expanded
 

アウトプットスタイルは下記の4つです。

  1. output_style = :nested(デフォルトのアウトプットスタイル)

  2. output_style = :expanded(可読性が高い)

  3. output_style = :compact(1行にまとまる)

  4. output_style = :compressed(コメント等削除されギュッと圧縮)
 
使い方の例ですが、
 
  • HTML納品後、メンテナンスはお客様(Sassを使えない人)が行う場合、一般的なCSSの見た目になる「expanded」でコンパイルしておけば、別の人が見ても理解することは可能です。

  • HTML納品後、お客様はファイルに一切手を付けず、メンテナンスは自分で(Sassを使える人だけが)行う場合、ファイルの容量を圧縮出来る「compressed」でコンパイル、Sassでスタイルを管理する、というのも一つの手です。

ケースバイケースで対応しつつ、どうしてもSassは使えないな~という場合は清く諦めましょう…涙

Sassファイルの管理方法

パーシャルによるSassファイルの分割

Sassファイルを管理する上で欠かせない「パーシャル」。
これは、CSSとして生成したくないファイルのファイル名の最初に「_(アンダーバー)」を書くことで、コンパイルしてもCSSが生成されなくなる機能です。
 
次の項目で詳細を書きますが、パーシャルを使用しSassを分割することで管理がしやすく\みんなハッピー♪/になりやすいはず!なってくれ!
 
パーシャルファイルは、従来のCSSファイルをインポートする時と同様「@import」で読み込みます。
// 従来のCSSをインポートする時と同じ
@import "_header.scss";

// _ と 拡張子 は省略できる
@import "header";

// 「contents」フォルダ内の「_top.scss」を読み込む
@import "contents/top";
 
【例】分割した「_header.scss」を「style.scss」に読み込みコンパイルすると、CSSとして生成されるのは「style.css」のみ
 
_header.scss
/*----- header */
.hedaer{
    width: 100%;
    position: relative;
}
style.scss
@import "header";

/*---- contents */
.contents{
    padding: 40px;
    p{
        margin: 0 0 20px;
    }
}
style.scssをコンパイル
style.css
/*----- header */
.hedaer{
    width: 100%;
    position: relative;
}

/*---- contents */
.contents{
    padding: 40px;
}
.contents p{
    margin: 0 0 20px;
}

SMACSSを応用してSassファイルを管理する

以前私が書いたこちらの記事「もう後悔したくない!CSSの設計概念を知りメンテナンス性を高めよう」で、「SMACSS」というCSS設計概念をご紹介させていただきましたが、Sassでの運用を考える上でこの「SMACSS」の考え方を応用したいと思います!
 
SMACSSではルールを5種類(ベース、レイアウト、モジュール、ステート、テーマ)にカテゴライズしていますが、Sassファイルを管理する際は、ベース、レイアウト、モジュールの3つにカテゴライズします。
(シンプルに分類する方が分かりやすい&ぶっちゃけステートもテーマも必要性を感じないので…)
 
  • base
    リセットやベースになるスタイル、変数を定義するスタイルを格納
    例:_base.scss / _variable.scss … etc
  • layout
    ヘッダーやフッターなど、大まかなレイアウトで切り分けられるスタイルを格納
    例:_header.scss / _footer.scss / _nav.scss …etc
  • module
    ボタンやテーブル、余白など細かいパーツのスタイル(使い回しできるもの)を格納
    例:_button.scss / _form.scss / _grid.scss / _table.scss … etc
 
基本は上記のようにカテゴライズしファイルを管理しますが、複数人で作業したり、デザインによってはページ固有のスタイルを定義する場面が出てくる場合があります。
そんな時は下記のカテゴライズを追加します。
 
  • contents
    ページ固有のスタイルや、担当別のスタイルを格納
    例:_top.scss / _about.scss / _kikuchi.scss / _suzuki.scss …etc
 
と、ここで、実際の現場でもよく使っているファイル構成をご紹介。
案件ごとに変化はありますが基本はこれをコピペしているので、慣れてくれば最初のコーディングはスムーズにいくこと間違いなしです。ふふん。
 
大まかなファイル構成はこんな感じ。
(htmlファイルを納品する際、特に指示がない限り「scss」や「config.rb」などSassに関わるファイルは基本納品しません。)
html
│
├── common
│ ├─ img
│ ├─ js
│ ├─ css
│ │   └─ style.css
│ └─ scss
│      ├─ base
│      ├─ layout
│      ├─ module
│      ├─ contents
│      └─ style.scss
│
├── config.rb
│
└── index.html
 
style.scss はこんな感じ。
「今回の案件にモジュールの _form.scss は使わないな~」なんて時は、コンパイルしても出力されない「//」でコメントアウトしておいたりします。
(案件によってBootstrapを使うこともあるので、モジュールの中身は似ています。使えるものは使う主義。)
@charset "utf-8";

// SMACSSのCSS設計方法をベースに記述する。
// ネストは2階層目まで

/* ==============================================================
*  ベース
* ============================================================ */
@import "compass";            // コンパスの機能を全てインポート
@import "compass/reset/";     // コンパスでリセットスタイルを指定
@import "base/variable";      // scss用の変数読み込み
@import "base/base";          // body等のスタイル


/* ==============================================================
*  レイアウト
* ============================================================ */
@import "layout/header";      // ヘッダー
@import "layout/navigation";  // ナビゲーション
@import "layout/footer";      // フッター


/* ==============================================================
*  モジュール(汎用的に使用できるスタイル)
* ============================================================ */
@import "module/helper";      // 細かいスタイル指定
@import "module/breadcrumb";  // パンくず
@import "module/button";      // ボタン
@import "module/form";        // フォーム
@import "module/grid";        // グリッド
@import "module/list";        // リスト
@import "module/panel";       // パネル
@import "module/table";       // テーブル


/* ==============================================================
*  各ページ固有のスタイル
* ============================================================ */
@import "contents/top";       // トップページ用
@import "contents/under";     // 下層ページ用

まとめ

Sassは便利機能が沢山あり全てを使いこなせたらそれはもう大変便利でスマートでカッチョイイと思います。ですが、初めは「ネストだけ」だったり「変数だけ」でも全く問題ない、むしろそれくらいシンプルな使い方から始めてみんなに浸透させることが大事でもあります。
また、ここでは「コレを使ったら良い!」と言っていますが、別の人で「ソレは使わないほうがいい!」と言う人もいます。会社のルールや自分に合った使い方であれば使ってもいいと思いますし、より良いものを発見したらそちらに切り替わればいいと思う次第です。ふむ。
 
最後に参考にした読み物をご紹介します。
 
 
さんざん説明してきましたが言いたいことはこれだけです。 
 
とにかくSassを使いましょ~~~う!!!
 
 

+dc(菊)

この記事は、KIKUCHI が書きました。