陽炎空華

今更ですが、「SyntaxHighlighter」の導入方法とかのメモをしておこうと思います。

導入方法は、下記の二種類。
1．「SyntaxHighlighter - Download」からファイルをダウンロードし、サーバーにアップロードして利用する方法
2．開発元が提供している「SyntaxHighlighter - Hosting」を利用する方法

私はコードを書き換えたかったのもあり、1．の方法を採ることにしました。
早速、導入！　といきたかったのですが、私が利用している「エムブロ」さんや「ナノ」さんは、サーバーに画像以外のファイルをアップロードできません。
そこで「Dropbox」の公開リンクを利用して導入することにしました。

@mixinを使って、ベンダープレフィックスを自動で出力しようと以下のコードを書いていたのですが、カンマ区切りで値を複数指定できるbox-shadowとかで躓いたのでメモ。

// ベンダープレフィックスを自動で付与する
$set-prefix: '' , -moz- , -webkit-;

// プロパティにプレフィックスを付与
@mixin SetPrefix($name, $value) {
    @each $prefix in $set-prefix {
        #{$prefix}#{$name}: $value;
    }
}

上のような@mixinに下のような値の渡し方をすると、失敗する。

.box_shadow {
	@include SetPrefix(box-shadow,1px 1px 5px #000, -1px -1px 5px #888);
}

引数として渡された値にカンマがあるために「１つのリスト」ではなく「いくつかの引数」として扱われてしまうからだ。
これを解決する方法を探していたところ、以下の記事に行き着きました。

WebTecNote - [Sass] Sass 3.2で実装された新機能がヤバい

解決方法は簡単で、引数の後ろに「...」 （ドット３つ）を付けるだけでした！（※Sassのバージョンが3.2以上が必要）

// プロパティにプレフィックスを付与
@mixin SetPrefix($name, $value...) {
    @each $prefix in $set-prefix {
        #{$prefix}#{$name}: $value;
    }
}

他にも、プレースホルダーセレクタとか、痒い所に手が届くような機能が追加されている模様。
今さらですが、Sassの進化に万歳！