【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜知らないと損な機能編

はじめに

基礎編、Compass基礎編ともにたくさんのシェアありがとうございます。この記事は若干釣りっぽいタイトルをつけてしまい・・・あぁ「知らないとちょっと損な機能編」に書き換えようか迷ったけど保存せずにそっとタブを閉じました。

今回は知っている人にとってはそんなの基本だろう！っと思うようなものですが自分のようなマニュアルを読まない日本人向けに（といってもドキュメント英語だし・・・）SCSSを使う際に知らないと（ちょっと）損な機能について紹介したいと思います。

SCSSで扱うファイルの違い - partials

SCSSで扱えるファイルには2つの種類「アウトプットされるファイル」と「インポート専用のファイル」があります。
このインポート専用ファイルのことをpartials（パーシャル）と呼ぶそうです。

インポート専用ファイルは先頭にアンダースコアを指定し「_sample.scss」のようなファイル名になります。あるファイルに@importする場合は先頭のアンダースコアと、拡張子を抜いた以下のような指定になります。

@import "sample";

.cssを読み込むには？

ちなみに普通のCSSファイルを読み込む時は拡張子を指定します。「old.css」を読み込む場合は以下のような指定です。

@import "old.css";

複数のファイルを一括読み込みするには？

複数のファイルを一行で読み込みたい場合は、カンマ「,」で区切ります。

@import "sample", "base", "extra";

セレクタの中で@importを使ってネストする

@importはセレクタの中でも使うことができます。セレクタの中で@importを使うと、インポートしたファイルがセレクタの中に読み込まれ、セレクタがネストされます。

たとえば、以下のようなsample.scssがあったとします。

.sample
{
	font-size : 150%;
}

このファイルをインポートしてみます。

.parent
{
	@import "sample";
}

アウトプットされるCSSはこんな感じ。

.parent .sample
{
	font-size : 150%;
}

ちょっと特殊な使い方ですが、何か便利な時があるかもしれません・・・

コメント指定の種類 + 1

SCSSのコメント指定には2つの種類があります。「複数行型 /* ... */」と「単一行型 //...」です。
CSSでは「複数行型」のみでしたがSCSSを使うことで「単一行型」のコメントが指定できるようになります。

複数行のコメント - /* */

/* *****************************
 *
 * comment
 *
 **************************** */
.comment
{
	...
}

単一行のコメント - //

SCSSで使えるようになる単一行コメントですが、コメントアウトがとても楽になりますね。

.comment
{
	//display  : none;
	width    : 100px; //comment box width
}

追記：コメントを強制的に残す

ライセンス関係のコメントなどで、強制的に残したい場合にはコメントにエクスフラメーションマーク「!」をつけます。
※失念しているのをTwitterで指摘していただきました。

これはアウトプットモードのEnvironmentでコメントを削除する指定にしていても残ります。

/* *****************************
 * !comment
 **************************** */
 .comment
{
	...
}

いただいたコメント。

コメント方法は3種類だったりする。確かcompressed時のコメント削除回避用にエクスクラメーションをつける /*! ここコメント */ があったような… “すぐに使えるSCSS入門｜知らないと損な機能編” http://t.co/Qhh0OVVw

— Shingo Fukuyama (@fokotate) October 25, 2012

親セレクタの指定 - &

セレクタをネストしている時に、親セレクタを指定したくなるときがあります。
そんなときは&を使いましょう。ネストだけでも十分便利ですが、&を使うことでよりコードの量を短くすることができます。

SCSS

アンカータグの:hover指定をする時に&を使うことで親要素を指定することができます。

a.parent
{
	text-decoration : none;
	
	&:hover
	{
		text-decoration : underline;
	}
}

Output CSS

しっかり指定されていますね。

a.parent {
  text-decoration: none;
}

a.parent:hover {
  text-decoration: underline;
}

変数の便利な使い方

変数にはいくつかの便利な使い方が用意されています。知っているとちょっとした手間を省いたり、Mixinを作る時に便利です。

変数を使った補完 - #{}

変数を使い、セレクタの指定に変数を使ったり、属性を変数で置き換えたりすることもできます。ちょっとしたMixinを作ってみましょう。

//配列のようなカンマ区切りの値が入った変数
$PREFIX_TYPES:  -webkit-, -moz-, -ms-, -o-, '';

//prefix指定を含むborder-radiusをはき出すMixin
@mixin custom-border-radius( $num )
{
        //$PREFIX_TYPES は配列のようなもので下の@eachでループさせ$prefixに値を入れます。
        @each $prefix in $PREFIX_TYPES
        {
                //ループされた$prefixを#{}を使って補完します。
                #{$prefix}border-radius: $num;
        }
}

.vars
{
        //作ったMixinを使ってみます
        @include custom-border-radius( 5px );
}

アウトプットしてみると・・・@eachで抜き出した値がしっかり補完されていますね。

.vars {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

デフォルト値の指定 - !default

変数に「!default」が指定されている場合、変数に値が入っていれば値が適用されず、値が入っていなければ!defaultの値を指定するようになります。言葉ではわかりにくいので、コードで表してみます。

$width  : 100px;
$width  : 1000px !default;
$height : 600px  !default;

.wrapper
{
        width  : $width;
        height : $height;
}

アウトプットしてみると・・・。これはMixinやモジュールを作る時に使えそうですね。

.wrapper {
  width: 100px;
  height: 600px;
}

@extendの使い方

@extendは子孫セレクタも一緒に継承されるので注意が必要です。
例えば、継承先のセレクタではdisplayをデフォルト値にしたい時に@extendで継承すると子孫セレクタまで継承され、思わぬバグに繋がります。

SCSS

.list_style
{
        display : block;

        .item_style
        {
                display : inline;
        }
}

.tile_style
{
        @extend .list_style;

        .item_style
        {
                width : 300px;
        }
}

Output CSS

4行目に.tile_styleにdisplay: inline;が継承されてしまっていますね。

.list_style, .tile_style {
  display: block;
}
.list_style .item_style, .tile_style .item_style {
  display: inline;
}
.tile_style .item_style {
  width: 300px;
}

@extendを使う際は、子孫セレクタまで継承されることを覚えておきましょう。具体例を挙げればclearfixなどに使うのが望ましいですね。

アウトプットモードについて

SCSSにはアウトプットモードに関する設定があり、Scout.appを使うことで簡単にアウトプットモードの指定を行うことができます。

Environment

Scoutが生成するCSSファイルに対してコメントを付けるか付けないかの設定します。「production」がコメント無しの指定です。

Output Style

SCSSには4つのアウトプットスタイルが用意されています。実際にどのようにアウトプットされるか紹介します。

• :nested
• :expanded
• :compact
• :compressed

:nested

ネスト構造を表現した構造になっています。

.list {
  margin: 20px 0 0 0; }
  .list .item {
    list-style: none;
    font-size: 100%; }

:expanded

ネスト構造を無くし一般的なCSSの構造になっています。

.list {
  margin: 20px 0 0 0;
}
.list .item {
  list-style: none;
  font-size: 100%;
}

:compact

セレクタ内部のスペースや改行が削除されています。

.list { margin: 20px 0 0 0; }
.list .item { list-style: none; font-size: 100%; }

:compressed

改行もスペースもしっかり削除されています。

.list{margin:20px 0 0 0}.list .item{list-style:none;font-size:100%}

:compressedは無駄なものがほとんどなくなるのでファイルサイズの削減にも繋がりますね。

まとめ

基本といえば基本ですが知ってると知ってないとでは全然違うちょっとした機能の紹介でした。
次回はより深い機能について紹介したいと思います。