CSSを効率よく記述したい人はぜひ読むべきな、Web制作者のためのSassの教科書

Posted / Updated

Web
デザイン
Web制作者のためのSassの教科書
4844334662
starstarstarstarstar_border
非常に分かりやすく読みやすい。

「ああ、ここの色はあの部分と同じ色にしよう・・・ところでカラーコードは何だっけ」と思いながら、該当箇所を探しまわる。

「ああ、ここの部分はあそこのスタイルを応用して作るか・・・」とスタイルをコピーしてきて、作業中の部分にまた戻ってくる。

すごく・・・面倒くさい！

スタイルシートを記述していてそんな面倒臭いことを思ったことはないでしょうか。私はしょっちゅうです。

ソース中を行ったり来たりとか非常に面倒くさい。スタイルを記述する時間より、行ったり来たりしている時間の方が多いとさえ思えます。そんな悩みを解決するのがこのSassです。

スタイルシートを効率的に記述するためのもので、スタイルシートが書けさえすれば非常にとっつきやすいはず。本書はそんなSassの紹介から、導入方法、活用方法まで非常に分かりやすく教えてくれる良書です。

非常に入りやすい

CSSのファイルの拡張子をSCSSにしただけでSassのファイルになります。Sassだからといって何か特殊な記述方法をしなければならないわけではないのです。拡張子がscssになっただけで、中身はCSSのままでも何ら問題ありません（それだけだとSassにする意味は無いですが）。

Sassの便利な機能を知らなくても、自分で少しずつ勉強しながら、使い方がわかったものだけ徐々に試していくなんてこともできます。

環境を構築することが、若干ハードルが高い人もいるかもしれません。そういう人はこの教科書が詳しく説明してくれているので、購入するといいでしょう。

それにネットにSassの情報はたくさんあるし、調べればお金をかけずとも勉強することは可能でしょう。私もこの教科書を買っておきながら、ドットインストールでSassの動画を見て勉強しました。

とりあえずネストにして記述するだけ、変数を使うだけといった簡単なところからSassの便利な機能を使っていくといいのではないでしょうか。

具体例

たとえば、当サイトで利用させて頂いているカエレバブログパーツのスタイルシートの設定です。

私のサイトでは、CSSだとこのようになるものが・・・

.shoplinkamazon , .shoplinkkindle , .shoplinkrakuten , .shoplinkseven , .shoplinkbk1 , .shoplinkkino , .shoplinkehon , .shoplinkyahoo , .shoplinkyahooAuc{
    float: left;
    margin: 5px;
    border: 1px solid #5484D2;
    background-color: #EDF2FA;
}
.shoplinkamazon:hover , .shoplinkkindle:hover , .shoplinkrakuten:hover , .shoplinkseven:hover , .shoplinkbk1:hover , .shoplinkkino:hover , .shoplinkehon:hover , .shoplinkyahoo:hover , .shoplinkyahooAuc:hover{
    background-color: #FAA; 
}
.shoplinkamazon , .shoplinkkindle {
    background-image: url(images/amazon.png);
    background-repeat: no-repeat;
    background-position: 2px 3px;
}
.shoplinkrakuten{
    background-image: url(images/rakuten.png);
    background-repeat: no-repeat;
    background-position: 2px 3px;
}
.shoplinkseven{
    background-image: url(images/7net.png);
    background-repeat: no-repeat;
    background-position: 2px 3px;
}
.shoplinkyahoo , .shoplinkyahooAuc{
    background-image: url(images/yahoo.png);
    background-repeat: no-repeat;
    background-position: 2px 3px;
}
.shoplinkbk1{
    background-image: url(images/bk1.png);
    background-repeat: no-repeat;
    background-position: 2px 3px;
}
.shoplinkehon{
    background-image: url(images/e-hon.png);
    background-repeat: no-repeat;
    background-position: 2px 3px;
}
.shoplinkkino{
    background-image: url(images/kino.png);
    background-repeat: no-repeat;
    background-position: 2px 3px;
}

Sassを利用すると、次のようにコンパクトな記述で済みます。

$shoplink-list:amazon,kindle,rakuten,seven,bk1,kino,ehon,yahoo,yahooAuc;
@each $item in $shoplink-list{
    .shoplink#{$item}{
        float: left;
        margin: 5px;
        border: 1px solid $main-accent-color;
        background:url(images/#{$item}.png) $main-color no-repeat 2px 3px;
        &:hover{
                background-color:#faa;
        }
    }
}

Chrome Developer Toolとの連携

Chrome Developer toolは、調べたい対象の要素に適用されているプロパティの値を確認したりすることができます。さらにその記載が、スタイルシートの何行目にあるかを確認することもできます。とても便利な機能です。

しかしSCSSにしてしまうと、CSSの行数を表示されても意味がありません。なぜなら、編集するのはSCSSのファイルだからです。便利なはずのSassを導入した結果、どこの記述を直せばよいのかわからなくなり、逆に不便になってしまうではないか。

私も最初そうでしたが、ちゃんと対応策があります。Sourcemapを出力することにより、SCSSファイルでの記述箇所を表示させることができるようになるのです。

Sassのバージョン3.3以降をインストール

これはSourcemapの出力をするためには、Sassのバージョン3.3以降でないと対応していないためです。今のところプレバージョンなので、GUI環境とかで使う場合は使えないかもしれません。

Macの場合は次のコマンドでインストールしているSassのバージョンをアップデートしましょう。

sudo gem update —system
sudo gem update sass —pre

まだSassをインストールしていない場合は、sudo gem install sass -preでインストールしましょう。（Sassの教科書を見ながらプレバージョンのインストールをすればOK）

Google Chrome Canaryのインストール

普通のChromeだと対応していないので、Google Chrome Canaryをインストール。

Cmd + Option + iでDeveloper Toolを起動し、歯車のアイコンを押して設定画面を表示。[General] → [Sources] → [Enable CSS Source Maps]にチェックを入れれば準備は完了。

–sourcemapオプションを付けてコンパイル

後はデバッグをしたいScssファイルを、–sourcemapオプションを付けてコンパイルすればOKです。出力されたCSSファイルをChrome Canaryで表示させれば、Scssファイルでの行数が表示されます。

この環境があればSassでのデザイン作業が捗ります。

ただ、Chromeのインスペクタを使って適用されているスタイルを書き換えてしまうと、表示される行数がCSSのものに変わってしまうのが難点です。再読み込みしたらまたScssの行数を表示してくれるが、もう少し融通効かないかなぁ・・・と思わなくもない。

取っ付き易く非常に捗る

Sassを使うことで何が楽になるかといえば、メンテナンスが非常に楽になることでしょう。記述する行数が減るということは、その分見やすくなるということです。また、一部のスタイルを変更しようと思った時に、修正する箇所が減るということでもあります。

基本的にCSSと記述方法が変わらないため、プログラミングを新たに勉強することに比べれば、とても取っ付き易いです。

私も今現在、このサイトで使っているスタイルシートをSassに切り替えている最中なのですが、ちょっとずつ見やすくなっていくのがうれしいです。CSSのままでは記述がごちゃごちゃしていて、とてもではないがデザインの変更などする気が起きませんでした。

Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語
posted with ヨメレバ
平澤 隆,森田 壮 インプレスジャパン 2013-09-13
Amazonで購入
楽天ブックスで購入
紀伊國屋書店で購入

GenのAmazonほしいものリスト

Amazonのほしいものリストを公開しています。仕事で欲しいもの、単なる趣味としてほしいもの、リフレッシュのために欲しいものなどを登録しています。 寄贈いただけると泣いて喜びます。大したお礼はできませんが、よりよい情報発信へのモチベーションに繋がりますので、ご検討いただければ幸いです。

記事の内容に修正リクエストを送る

関連記事