SCSS Mixin

USAGE

@importで必要なSCSSファイルを読み込みます。

たとえば、メディアクエリの_mq.scssを読み込むためには

@import "mq";

とします。拡張子と先頭の_は不要です。

また別ディレクトリにある場合は、以下のように指定します。

@import "scss/mq";

_output-margin.scss

余白調整用のクラスを生成します。

@import 'spacing';
@import 'output-margin';
@include output-margin;

デフォルトでは、margin-top margin-bottom を 1px毎に指定したクラスが生成され、20px以降は、10px毎のクラスが50pxまで生成されます。 ネガティブマージンも同様に出力されます。

.mt00 {
  margin-top: 0px !important; }
.mt01 {
  margin-top: 1px !important; }
/*省略*/
.mt20 {
  margin-top: 20px !important; }
.mt30 {
  margin-top: 30px !important; }
/*省略*/
.mtN01 {
  margin-top: -1px !important; }
/*省略*/
.mbN01 {
  margin-bottom: -1px !important; }

変更したい場合はmixinの中身を調整してください。

_rem.scss

px指定と、rem指定を併記する場合に使用します。

@import 'rem';
html {
	font-size: 62.5%; /*=10px*/
}
.rem {
	@include rem(font-size, 12px);
	@include rem(margin, 1.4rem 1.2rem);
}

pxを指定しても、remを指定しても相互変換され、両方の値が書き出されます。

.rem {
	font-size: 12px;
	font-size: 1.2rem;
	margin: 14px 12px;
	margin: 1.4rem 1.2rem;
}

なお、以下のようにすることで、pxの出力をやめることができます。

@import 'rem'
$rem-legacy-support: false;

引数

• $property : プロパティ名
• $values : remに変換するpx、もしくはpxに変換するrem

_trbl.scss

画像を、中央揃えすることができます。

@import 'trbl';
.trbl {
	position: relative;
	img {
		@include trbl;
	}
}

画像の親要素をposition: relative;にする必要があります。

.trbl {
	position: relative;
	.trbl-item {
		@include trbl(100px, 100px);
	}
}

また画像でない場合は高さと幅を指定する必要があります。

引数

• $width : 画像でない場合、幅が必要となります
• $height : 画像でない場合、高さが必要となります

_mq.scss

メディアクエリを簡単に記述するためのショートカットです。 引数の説明は以下のコードを参照してください。

@import 'mq';

@include min-screen(801px) {
	/* 画面の幅が801px以上の時 */
	.block { background-color:red; }
};
@include screen(481px, 800px) {
	/* 画面の幅が481px以上、800以下の時 */
	.block { background-color:green; }
};
@include max-screen(480px) {
	/* 画面の幅が480px以下の時 */
	.block { background-color:blue; }
};
@include min-screen-h(801px) {
	/* 画面の高さが801px以上の時 */
	.block { background-color:tomato; }
};
@include screen-h(481px, 800px) {
	/* 画面の高さが481px以上、800以下の時 */
	.block { background-color:lime; }
};
@include max-screen-h(480px) {
	/* 画面の高さが480px以下の時 */
	.block { background-color:pink; }
};

_link-underline.scss

a要素の下線の有無を操作するものです。

@import 'link-underline';

a {
	@include link-underline(line-to-none);
}

こうすると、以下のように出力されます。

a:link, a:visited {
  text-decoration: underline; }
a:hover, a:active, a:focus {
  text-decoration: none; }

引数の文字列により振る舞いを変更します。

• line-to-none : :link,:visitedは下線あり、それ以外はなし
• line : どの状態でも下線あり
• none-to-line : :link,:visitedは下線なし、それ以外はあり
• none : どの状態でも下線なし