楽しくコーディング！Sass,Compassのデフォルトmixinとカスタム関数

Data

2014/08/27

Tag

site: http://develo.org/2014/05/19/0935.html
GitHub: https://github.com/kamem/compass.default

Sass,Compass関連のフォルダ構成

├config.rb
├ rb
|   ├ develo.rb
|   ├ skyward_design.rb
|   └
└ sass
    ├ _animation.scss
    ├ _keyframes.sass
    ├ _extension_decimal.scss
    ├ _extension_import.scss
    ├ _extension_sprite.scss
    ├ _extension.scss
    ├ _setting_site.scss
    ├ _setting.scss
    ├ common.scss
    ├ default.scss
    ├ import.scss
    ├ sprite.scss
    ├ templates.scss
    └ test.scss

カスタム関数（rb）

develo.rb （GitHub）

skyward_design.rb（GitHub）

全てのscssに共通で読み込む必要なmixinなどのimport（_extension_import.scss）

@import "compass/css3/",
"setting",
"setting_site",
"compass/support",
"animation",
"_keyframes",
"extension_decimal",
"extension";

設定用scss（_setting.scss,_setting_site.scss）

_setting.scss

compassで使用する変数の設定

//config.rb指定したimages_dirの値
$images_dir: "html/img/";

//HTML5の場合は「true」
$html5: true;
//Retina対応
$isRetina: false;
//base64対応
$isBase64: false;

//compass ブラウザサポート
$legacy-support-for-ie6: true;
$legacy-support-for-ie7: true;

$experimental-support-for-webkit: true;
$experimental-support-for-mozilla: true;
$experimental-support-for-opera: true;
$experimental-support-for-microsoft: true;
$experimental-support-for-khtml: false;

//ie9用 svg
$experimental-support-for-svg: true;

_setting_site.scss

サイトを作る際に全体で使う変数の設定。

例

//font
$font-sizeDefault: 10; // 基準となるフォントサイズ（htmlに指定する値）
$font-size: 16; // よく使うfont-size
$font-unit: rem; // 使う単位
$font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;

//ページの横幅
$base-width: 736;
$base-width-big: 798;

// 標準テキストカラー
$textColor : #500;

// 標準リンクカラー
$linkColor : #39c;
$linkColor_hover : #f39;
$linkColor_visited : rgba(#39c,0.7);
$linkColor_active : #39c;

//mediaQueryの基準となる幅
$mediaQuery-large: 798;
$mediaQuery-middle: 480;
$mediaQuery-small: 320;

animation関係を使えるように（_animation.scss）

下記のanimation関係のCSSを@includeで使えるようにしベンダープレフィックスを付けるようにしてくれる。

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

keyframesを使えるように（_keyframes.scss）

keyframesを@includeで使えるようにしベンダープレフィックスを付けるようにしてくれる。

@include keyframes(anime1) {
  0% {
    @include transform(rotate(720deg));
  }
  100% {
    width: 500px;
    @include transform(rotate(0deg));
  }
}

小数の桁数と丸め方を制御する（_extension_decimal.scss）

下記サイトのscssを使わせて頂いています。

小数の桁数と丸め方を制御する Sass 関数

sprite画像を生成する（_extension_sprite.scss）

スプライト画像を生成し、その画像名のクラスを付けるだけで画像を表示できるようにしてくれる。
これを使うことによりscss編集時に毎回スプライトチェックする問題を回避することができます。
sprite.scssだけ使うことができます。

ほかのscssでspriteの情報を使いたい場合は（_extension.scss: sprite-info）

sprite-make

初期設定・説明

@include sprite-make(
    '', //スプライト化したい画像: sprite-map()の第一引き数にいれるファイル名。（配列で複数指定することができます。）
    5px, //スプライト化した時の画像と画像の間のサイズ: sprite-map()の$spacingの値
    true , // true or false: 吐き出すCSSにクラス名2つをつけるか。（false:「.画像ファイル名」、true:「.スプライト名.画像ファイル名」となります。）
    $isRetina // true or false: Retina対応（画像サイズを半分に）するかしないか（予め_setting.scssで設定されてることを考慮）
);

SCSS

@include sprite_make((
    'num/*.png'
));

css

.num.img1, .num.img2, .num.img3 {
    display: block;
    background-image: url('/html/img/num-sce8bc88143.png');
    background-repeat: no-repeat;
    background-size: 50px 270px;
}

.num.img1 {
    background-position: 0 -220px;
    width: 50px;
    height: 50px;
}

.num.img2 {
    background-position: 0 -110px;
    width: 50px;
    height: 50px;
}

.num.img3 {
    background-position: 0 0;
    width: 50px;
    height: 50px;
}

便利なmixin（_extension.scss）

background-fit

画像のサイズを取得しbackground-size,width,heightをセットする。
CSSで背景に画像を入れる時に毎回サイズを入れる作業を省いてくれます。特にRetina対応で画像サイズを半分にしたいときには便利です。

まず前提として、config.rbのimages_dirを設定してください。
width,heightが必要ない場合には第2引き数をfalseにする。
複数画像を指定したい場合は配列で（例: ('test.png','test2.gif',linear-gradient(#000,#fff)）
複数画像を指定した場合は第3引き数に複数指定する。（例: ('0 0 no-repeat','left top repeat','0 0 no-repeat')）
関数実行後$imgWidth,$imgHeightの中に画像のサイズが入ります。
複数の場合配列に入るのでnth($imgWidth,1),nth($imgHeight,2)のように取ってくることができます。

初期設定・説明

@include background-fit(
    '', // 画像のパス: images_dirで指定したパスからの画像ファイル名（配列で複数指定可能,グラデーション指定も可能）
    true, // true or false: 画像をサイズいっぱいに表示してテキストを消す or 画像とbackgrouns-sizeのみの指定をするか）
    '0 0 no-repeat', // 画像に対してのrepeat position: (複数の場合の例: ('0 0 no-repeat','left top repeat'))
    '', //'!important': !importantを指定したい場合（必要ない場合は空）
    $isBase64, // true or false: base64にするかしないか (予め_setting.scssで設定されてることを考慮）
    $isRetina // true or false: Retina対応（画像サイズを半分に）するかしないか（予め_setting.scssで設定されてることを考慮）
);

SCSS

@include background-fit(
    ("text.png",linear-gradient(rgba(red,0.1),rgba(red,0.3))),
    false,
    ('center 5px no-repeat','0 0 no-repeat')
);

CSS

background: url('/html/img/text.png?1396155926') center 5px no-repeat, linear-gradient(rgba(255, 0, 0, 0.1), rgba(255, 0, 0, 0.3)) 0 0 no-repeat;
background-size: 327px 29px, auto auto;

half-image-width

画像の半分の横幅の値を返す（複数画像を配列で指定可能）

関数実行後$imgWidthの中に画像のサイズが入ります。
複数の場合配列に入るのでnth($imgWidth,1)のように取ってくることができます。

SCSS

width: half-image-width('test.png');

CSS

width: 100px;

half-image-height

画像の半分の高さの値を返す（複数画像を配列で指定可能）

関数実行後$imgHeightの中に画像のサイズが入ります。
複数の場合配列に入るのでnth($imgHeight,1)のように取ってくることができます。

SCSS

height: half-image-width('test.png');

CSS

height: 100px;

sprite-info

スプライト画像のサイズとポジションを設定する

初期設定・説明

@include triangle-set(
    10px, //大きさ: 10px 20px のように2つ値を書くことで横と高さを指定することができます。
    black, // 色
    top //向き: top,right,bottom,left
);

SCSS

$map: sprite-map('num/*.png', $spacing: 5px);
p {
    @include sprite-info($map,img3);
}

CSS

background-image: url('/html/img/num-sce8bc88143.png');
background-size: 50px 270px;
background-position: 0 0;
width: 50px;
height: 50px;

text-shadow-repeat

同じテキストシャドウを繰り返したい場合

SCSS

@include text-shadow-repeat(0 0 3px #000,5);

CSS

text-shadow: 0 0 3px black,0 0 3px black,0 0 3px black,0 0 3px black,0 0 3px black;

box-shadow-repeat

同じボックスシャドウを繰り返したい場合

SCSS

@include box-shadow-repeat(0 0 10px #fff,10);

CSS

box-shadow: 0 0 10px black,0 0 10px black,0 0 10px black,0 0 10px black,0 0 10px black;

display-box-center

display: box;にし中身を縦横のcenter寄せにする。
dwebkitに対応したサイトを作る際に役立ちます。

SCSS

@include display-box-center();

CSS

display: box;
box-align: center;
box-pack: center;

triangle

三角形を作る

初期設定・説明

@include triangle-set(
    10px, //大きさ: 10px 20px のように2つ値を書くことで横と高さを指定することができます。
    black, // 色
    top //向き: top,right,bottom,left
);

triangle-set

作った三角形を向きに合わせてボックスの外側にセットする（吹き出し風になるようにセットする）

吹き出し風にしたい場合にtriangleを使わずこっちを使う。

初期設定・説明

@include triangle-set(
    10px, //大きさ: 10px 20px のように2つ値を書くことで横と高さを指定することができます。
    black, // 色
    top, // 向き: top,right,bottom,left
    50%, // 位置: 三角形をボックスのどの位置にセットするか（真ん中の場合50%）
    after // before or after どちらを使うか
);

arrow

矢印を作る

初期設定・説明

@include arrow(
    10px, // 大きさ
    1px, // 太さ
    white, // 色
    right, // 向き: top,right,bottom,left
);

arrow-set

作った矢印を向きに合わせてボックスにセットする

初期設定・説明

@include arrow-set(
    10px, // 大きさ
    1px, // 太さ
    white, // 色
    right, // 向き: top,right,bottom,left
    50%, // 位置: 三角形をボックスのどの位置にセットするか（真ん中の場合50%）
    after // before or after どちらを使うか
);

background-4corners

4つ角に同じ画像を回転・反転させておきたい場合

初期設定・説明

@include background-4corners(
    '', //images_dirで指定したパスからの画像ファイル名
    $isRetina // true or false Retina対応（画像サイズを半分に）するかしないか
                （初期値は予め_setting.scssで設定されてることを考慮）
);

詳しい仕様の説明は下記より

1つの画像で4つの角を再現するCSS

background-stripe

ストライプ背景の生成

@include background-stripe(
    10, //1つ目のストライプのサイズ
    transparent,    //1つ目のストライプの色
    10, //2つ目のストライプのサイズ
    rgba(255,255,255,0.5), //2つ目のストライプの色
    -45deg //ストライプの角度（45度単位)
);

es

基準となるサイズに対する値を、さまざまな単位にエンコード（encode size）

初期設定・説明

margin: es(
    '', // 変換したいサイズ
    $font-unit, // 変換したい単位（%,em,rem,px）（初期値は予め_setting.scssで設定されてることを考慮）
    $font-sizeDefault // 変換の基準となる値（初期値は予め_setting.scssで設定されてることを考慮）
);

SCSS

例）16pxのサイズのspanを12pxの%に変換したい場合

@include fz(12,'','%',16);
//または
$font-unit: '%';
$font-sizeDefault: 16;
@include fz(12);

CSS

font-size: 75%;

fz

指定した単位にフォントサイズを変換しfont-sizeを代入する

remの場合remが使えない場合のためにpxも出力する

初期設定・説明

＠include fz(
    '', // 変換したいサイズ
    '', //!importantを指定したい場合（必要ない場合は空）
    $font-unit, // 変換したい単位（%,em,rem,px）（初期値は予め_setting.scssで設定されてることを考慮）
    $font-sizeDefault // 変換の基準となる値（初期値は予め_setting.scssで設定されてることを考慮）
);

SCSS

例）16pxのサイズのspanを12pxの%に変換したい場合

@include fz(12,'',rem,10);
//または
$font-unit: rem;
$font-sizeDefault: 10;
@include fz(12);

CSS

font-size: 12px;
font-size: 1.2rem;

golden-ratio

黄金比の計算

初期設定・説明

＠include golden-ratio(
    0, // この数字に対しての黄金比（$num * 1.618）
    false, // trueの場合 第1引き数の数字を元にした（$num / 1.618）
);

silver-ratio

白銀比の計算

初期設定・説明

＠include silver-ratio(
    0, // この数字に対しての黄金比（$num * 1.414）
    false, // trueの場合 第1引き数の数字を元にした（$num / 1.414）
);

clearfix

引き数内のクラスにclearfixを付ける

@include clearfix();とかくとclearfixクラスがclearfixとなるcssが出力される。
@extend %clearfix;することによりクラスを追加していく。

SCSS

@include clearfix();

.test {
    @extend %clearfix;
}

CSS

.clearfix,
.test {
    min-height: 1px;
    _height: 1%;
}
.clearfix:after,
.test:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}