, ,

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

公開日: 2014/09/18
更新日: 2018/11/08

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

Contents

image-url() でイメージを指定する

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

.bg {
  background: image-url('nav-bg.png') repeat-y left top;
    :

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

例えば &:hover など。

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

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

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

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

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

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

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

!default で指定する。

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

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

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

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

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

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

sass-convert

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

% sass-convert test.css test.scss

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

% sass-convert -- recursive  --from css --to scss style/

compass stats

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

% gem install css_parser
% compass stats

補遺

@function

@content

!default