楽しくコーディング!Sass,Compassのデフォルトmixinとカスタム関数
※ 一部仕様変更に伴い仕様が違っている箇所がありますのでご注意ください。
├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
develo.rb (GitHub)
skyward_design.rb(GitHub)
@import "compass/css3/",
"setting",
"setting_site",
"compass/support",
"animation",
"_keyframes",
"extension_decimal",
"extension";
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;
サイトを作る際に全体で使う変数の設定。
例
//font
$font-sizeDefault: 10; // 基準となるフォントサイズ(htmlに指定する値)
$font-size: 16; // よく使うfont-size
$font-unit: rem; // 使う単位
$font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "MS Pゴシック", "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関係のCSSを@includeで使えるようにしベンダープレフィックスを付けるようにしてくれる。
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
keyframesを@includeで使えるようにしベンダープレフィックスを付けるようにしてくれる。
@include keyframes(anime1) {
0% {
@include transform(rotate(720deg));
}
100% {
width: 500px;
@include transform(rotate(0deg));
}
}
下記サイトのscssを使わせて頂いています。
スプライト画像を生成し、その画像名のクラスを付けるだけで画像を表示できるようにしてくれる。 これを使うことによりscss編集時に毎回スプライトチェックする問題を回避することができます。 sprite.scssだけ使うことができます。
ほかのscssでspriteの情報を使いたい場合は(_extension.scss: sprite-info)
@include sprite-make(
'', //スプライト化したい画像: sprite-map()の第一引き数にいれるファイル名。(配列で複数指定することができます。)
5px, //スプライト化した時の画像と画像の間のサイズ: sprite-map()の$spacingの値
true , // true or false: 吐き出すCSSにクラス名2つをつけるか。(false:「.画像ファイル名」、true:「.スプライト名.画像ファイル名」となります。)
$isRetina // true or false: Retina対応(画像サイズを半分に)するかしないか(予め_setting.scssで設定されてることを考慮)
);
@include sprite_make((
'num/*.png'
));
.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;
}
画像のサイズを取得し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で設定されてることを考慮)
);
@include background-fit(
("text.png",linear-gradient(rgba(red,0.1),rgba(red,0.3))),
false,
('center 5px no-repeat','0 0 no-repeat')
);
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;
画像の半分の横幅の値を返す(複数画像を配列で指定可能)
- 関数実行後$imgWidthの中に画像のサイズが入ります。
複数の場合配列に入るのでnth($imgWidth,1)のように取ってくることができます。
width: half-image-width('test.png');
width: 100px;
画像の半分の高さの値を返す(複数画像を配列で指定可能)
- 関数実行後$imgHeightの中に画像のサイズが入ります。
複数の場合配列に入るのでnth($imgHeight,1)のように取ってくることができます。
height: half-image-width('test.png');
height: 100px;
スプライト画像のサイズとポジションを設定する
@include triangle-set(
10px, //大きさ: 10px 20px のように2つ値を書くことで横と高さを指定することができます。
black, // 色
top //向き: top,right,bottom,left
);
$map: sprite-map('num/*.png', $spacing: 5px);
p {
@include sprite-info($map,img3);
}
background-image: url('/html/img/num-sce8bc88143.png');
background-size: 50px 270px;
background-position: 0 0;
width: 50px;
height: 50px;
同じテキストシャドウを繰り返したい場合
@include text-shadow-repeat(0 0 3px #000,5);
text-shadow: 0 0 3px black,0 0 3px black,0 0 3px black,0 0 3px black,0 0 3px black;
同じボックスシャドウを繰り返したい場合
@include box-shadow-repeat(0 0 10px #fff,10);
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寄せにする。 dwebkitに対応したサイトを作る際に役立ちます。
@include display-box-center();
display: box;
box-align: center;
box-pack: center;
三角形を作る
@include triangle-set(
10px, //大きさ: 10px 20px のように2つ値を書くことで横と高さを指定することができます。
black, // 色
top //向き: top,right,bottom,left
);
作った三角形を向きに合わせてボックスの外側にセットする(吹き出し風になるようにセットする)
- 吹き出し風にしたい場合にtriangleを使わずこっちを使う。
@include triangle-set(
10px, //大きさ: 10px 20px のように2つ値を書くことで横と高さを指定することができます。
black, // 色
top, // 向き: top,right,bottom,left
50%, // 位置: 三角形をボックスのどの位置にセットするか(真ん中の場合50%)
after // before or after どちらを使うか
);
矢印を作る
@include arrow(
10px, // 大きさ
1px, // 太さ
white, // 色
right, // 向き: top,right,bottom,left
);
作った矢印を向きに合わせてボックスにセットする
@include arrow-set(
10px, // 大きさ
1px, // 太さ
white, // 色
right, // 向き: top,right,bottom,left
50%, // 位置: 三角形をボックスのどの位置にセットするか(真ん中の場合50%)
after // before or after どちらを使うか
);
4つ角に同じ画像を回転・反転させておきたい場合
@include background-4corners(
'', //images_dirで指定したパスからの画像ファイル名
$isRetina // true or false Retina対応(画像サイズを半分に)するかしないか
(初期値は予め_setting.scssで設定されてることを考慮)
);
詳しい仕様の説明は下記より
ストライプ背景の生成
@include background-stripe(
10, //1つ目のトライプのサイズ
transparent, //1つ目のストライプの色
10, //2つ目のストライプのサイズ
rgba(255,255,255,0.5), //2つ目のストライプの色
-45deg //ストライプの角度(45度単位)
);
基準となるサイズに対する値を、さまざまな単位にエンコード(encode size)
margin: es(
'', // 変換したいサイズ
$font-unit, // 変換したい単位(%,em,rem,px)(初期値は予め_setting.scssで設定されてることを考慮)
$font-sizeDefault // 変換の基準となる値(初期値は予め_setting.scssで設定されてることを考慮)
);
例)16pxのサイズのspanを12pxの%に変換したい場合
@include fz(12,'','%',16);
//または
$font-unit: '%';
$font-sizeDefault: 16;
@include fz(12);
font-size: 75%;
指定した単位にフォントサイズを変換しfont-sizeを代入する
- remの場合remが使えない場合のためにpxも出力する
@include fz(
'', // 変換したいサイズ
'', //!importantを指定したい場合(必要ない場合は空)
$font-unit, // 変換したい単位(%,em,rem,px)(初期値は予め_setting.scssで設定されてることを考慮)
$font-sizeDefault // 変換の基準となる値(初期値は予め_setting.scssで設定されてることを考慮)
);
例)16pxのサイズのspanを12pxの%に変換したい場合
@include fz(12,'',rem,10);
//または
$font-unit: rem;
$font-sizeDefault: 10;
@include fz(12);
font-size: 12px;
font-size: 1.2rem;
黄金比の計算
@include golden-ratio(
0, // この数字に対しての黄金比($num * 1.618)
false, // trueの場合 第1引き数の数字を元にした($num / 1.618)
);
白銀比の計算
@include silver-ratio(
0, // この数字に対しての黄金比($num * 1.414)
false, // trueの場合 第1引き数の数字を元にした($num / 1.414)
);
引き数内のクラスにclearfixを付ける
@include clearfix();
とかくとclearfixクラスがclearfixとなるcssが出力される。@extend %clearfix;
することによりクラスを追加していく。
@include clearfix();
.test {
@extend %clearfix;
}
.clearfix,
.test {
min-height: 1px;
_height: 1%;
}
.clearfix:after,
.test:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
- Copyright 2014 © kamem
- http://www.opensource.org/licenses/mit-license.php