[Sass & Compass] Sass・Compass まわりの便利だけど忘れがちな Tips

また気がついたら書き足すかも。

[markdown]
## image-url() でイメージを指定する

config.rb でイメージパスを一括制御するために必要。CSS Sprite などにも影響。
.scss 内では `image-url()` を必ず使うようにすると、パスの変更が発生したときに対応がしやすい。

“`css
.bg {
background: image-url(‘nav-bg.png’) repeat-y left top;
:
“`

## & で親セレクタを参照する

例えば `&:hover` など。

“`css
@mixin bg-opacity($background, $opacity) {
display: block;
position: relative;
&:after {
content: “”;
background: url($background) repeat-y left top;
:
“`

## mixin の引数に初期値を与える

変数名に続けて初期値を書きます。

“`css
@mixin bordered-box($width, $style:solid, $color:black) {
border: $width $style $color;
:
“`

利用時に変更したい箇所だけ指定したい場合。

“`css
.box {
@include borderd-box(1px, $color:blue);
:
“`

## 変数にディフォルト値を持たせる

`!default` で指定する。

“`css
$color: black !default;
@mixin bordered-box($width, $style:solid, $color) {
border: $width $style $color;
:
“`

@import する先に $color が設定されている場合は、このディフォルト値は使われず上書きされます。

“`css
$color: red;
@import “foo”;
.box {
@include bordered-box(1px);
:
“`

## プレースホルダーセレクタ

無駄なセレクタを出力せずにすみます。

“`css
%clearfix {
@include clearfix;
}
div.sample {
@extend clearfix;
:
“`

## sass-convert

`sass-convert` で CSS を SCSS へ変換。セレクタのネスト化を行う。
SCSS <-> SASS や CSS <-> SASS も可能。

“`prettyprinted
% sass-convert test.css test.scss
“`

ディレクトリごと変換する場合は、このように書くそう。

“`prettyprinted
% sass-convert — recursive –from css –to scss style/
“`

## compass stats

css_parser という gem をインストールしておきます。

“`prettyprinted
% gem install css_parser
% compass stats
“`

> * [CSS – 君は知っているか、あのCompassのstatsコマンドを！ – Qiita](http://qiita.com/t32k/items/8609ffe0868da3e485a6)

## 補遺

### @function

> * [sassの抑えておきたいfunctionの使い方 « NAVER Engineers' Blog](http://tech.naver.jp/blog/?p=845)
> * [WebTecNote – [Sass+Compass] Rubyで作るカスタム関数と設定](http://tenderfeel.xsrv.jp/css/compass-css/1240/)

### @content

> * [【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜Mixinsを作ってみよう編 ｜ Developers.IO](http://dev.classmethod.jp/ria/html5/web-desiner-corder-scss-create-mixin/)
> * [@content（ver 3.2〜）｜sass｜study｜kanapple.net](http://kanapple.net/study/archives/51)

### !default

> * [Sassの!defaultフラグの使い方と使われ方 – Weblog – Hail2u.net](http://hail2u.net/blog/webdesign/how-to-use-bang-default-flag-in-sass-and-how-it-works.html)
[/markdown]