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

  • このエントリーをはてなブックマークに追加

前回SassとCompassの記事(SassとCompassを使って楽しくCSSコーディング!)をかいてから、だいぶ時間もたっていろいろ使いやすいようにmixinを作ったりしたので新しくまとめたいと思います!


  • 参考に : 自分のサイトの構成(GitHub

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.scssclass.scsscommon.scssdefault.scssimport.scsssprite.scsstemplates.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: "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 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関係を使えるように(_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を使わせて頂いています。

このページの先頭へ戻る

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対応で画像サイズを半分にしたいときには便利です。

  1. まず前提として、config.rbのimages_dirを設定してください。
  2. width,heightが必要ない場合には第2引き数をfalseにする。
  3. 複数画像を指定したい場合は配列で
    (例: ('test.png','test2.gif',linear-gradient(#000,#fff)
  4. 複数画像を指定した場合は第3引き数に複数指定する。
    (例: ('0 0 no-repeat','left top repeat','0 0 no-repeat')
  5. 関数実行後$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

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

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

SCSS

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

CSS

width: 100px; 

half-image-height

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

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

SCSS

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

CSS

height: 100px; 

sprite-info

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

初期設定・説明

@include sprite-info(
	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

p {
	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寄せにする。webkitに対応したサイトを作る際に役立ちます。

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

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

  1. 吹き出し風にしたい場合に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で設定されてることを考慮)
);

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の%に変換したい場合

font-size: es(12,'%',16);
//または
$font-unit: '%';
$font-sizeDefault: 16;
font-size: es(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,'','%',16);
//または
$font-unit: '%';
$font-sizeDefault: 16;
@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を付ける

  1. @include clearfix();とかくとclearfixクラスがclearfixとなるcssが出力される。
  2. @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;
}

このページの先頭へ戻る

実際にcssに出力されるscssの管理

自分がサイトを作るときにこのような構造で作っています。それぞれ作りやすいページ構成があると思いますので、一例としてさらっと説明しています。

  • 参考に : 自分のサイトの構成(GitHub

class.scss

サイト全体で使われる共通クラス用

common.scss

header,footerなどの共通のレイアウト用

default.scss

リセット用

site.scss

このサイトで使うdefaultで設定したいcss

import.scss

読み込み用

sprite.scss

スプライト画像生成用

templates.scss

ページに個別で設定したいcss用

このページの先頭へ戻る

コメント : 0

コメントフォーム

トラックバック : 0

http://develo.org/mt/mt-tb.cgi/109

このページの先頭へ戻る