scss 萨斯のミックスイン集。

Posted 2021-05-18

// ==========
// Mixins

// ==========
// Vendor prefix
// ベンダープリフィックス付きのプロパティを自動生成します。
// @param $prop {property name} プロパティ名
// @param $value {?} 値

@mixin vendor-prefix ($prop, $value) {
	#{$prop}: $value;
	@if $vp-moz {
		-moz-#{$prop}: $value;
	}
	@if $vp-ms {
		-ms-#{$prop}: $value;
	}
	@if $vp-o {
		-o-#{$prop}: $value;
	}
	@if $vp-webkit {
		-webkit-#{$prop}: $value;
	}
}

// ==========
// Clearfix

@mixin clearfix {
	@if ($support-ie6 or $support-ie7) {
		*zoom: 1;
	}
	&:before, &:after {
		content: "";
		display: table;
	}
	&:after {
		clear: both;
	}
}

// ==========
// Inline block

@mixin inline-block {
	display: inline-block;
	@if ($support-ie6 or $support-ie7) {
		*display: inline;
		*zoom: 1;
	}
}

// ==========
// Delete the gaps between inline-blocks
// @param $item {string} アイテムのセレクタ
// @param $font-size {size} アイテム内のフォントサイズ

@mixin delete-inline-block-gap ($item, $font-size) {
	font-size: 0;
	letter-spacing: -1px;
	word-spacing: -1px;
	> #{$item} {
		display: inline-block;
		font-size: $font-size;
		letter-spacing: normal;
		word-spacing: normal;
	}
}

// ==========
// 禁則処理を行います。

@mixin word-wrap {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

// ==========
// 改行しないようにします。

@mixin nowrap {
	overflow-wrap: normal;
	white-space: nowrap;
	word-wrap: normal;
}

// ==========
// <pre>内で文字列の折り返すようにします。

@mixin pre-word-wrap {
	overflow: auto;
	overflow-wrap: break-word;
	white-space: pre-wrap;
	word-wrap: break-word;
}

// ==========
// Elipsis
// 内部の文字列の幅が要素の幅を超えたときに改行せずに最後に「…」を表示して文字列を省略します。

@mixin ellipsis {
	overflow: hidden;
	overflow-wrap: normal;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-wrap: normal;
}

// ==========
// Kerning
// フォントによっては、カーニングの自動調整や合字処理を行います。

@mixin kerning {
	text-rendering: optimizeLegibility;
}

// ==========
// Add counter
// カウンター要素を付加します。
// @param $name {str}
// @param $before {bool}
// @param $after {bool}
 
@mixin add-counter ($name, $before, $after) {
	counter-increment: $name;
	@if ($before) {
		&:before {
			content: counter($name);
		}
	}
	@if ($after) {
		&:after {
			content: counter($name);
		}
	}
}

// ==========
// Hide text
// 内包する文字列を隠します。

@mixin hide-text {
	border: 0;
	font: 0/0 a;
	text-shadow: none;
	color: transparent;
}

// ==========
// Columns
// @param $col {number}
// @param $gap {length}
// @param $width {length}
// @param $rule {string}

@mixin column ($col, $width, $gap, $rule) {
	column-count: $col;
	column-gap: $gap;
	column-width: $width;
	column-rule: $rule;
}

@mixin column-after {
	column-after: column;
}

@mixin column-inside {
	column-inside: avoid-column;
}

// ==========
// Opacity
// クロスブラウザ版の不透明度です。
// @param $alpha {number} 1～0の不透明度

@mixin opacity ($alpha) {
	opacity: $alpha;
	@if ($support-ie6 or $support-ie7) {
		filter: alpha(opacity=#{$alpha * 100});
	}
	@if ($support-ie8) {
		-ms-filter: "alpha(opacity=#{$alpha * 100})";
	}
}

// ==========
// Reset <select>'s default style
// select要素のスタイルをリセットします。

@mixin appearance {
	-moz-appearance: button;
	-webkit-appearance: button;
	appearance: button;	
}

// ==========
// Vertical center
// 子要素を縦位置の中央に寄せます。
// このミックスインは、セレクタのfont-sizeを0にするので、
// 内部でテキストを表示する場合は、その要素に対してfont-sizeを設定し直す必用があります。
// @param $target-selector {CSS selector} 中央寄せする要素のセレクタ

@mixin vertical-center ($target-selector) {
	font-size: 0;
	#{$target-selector} {
		@include inline-block;
		vertical-align: middle;
	}
	&:before,
	.vertical-center__ghost {
		@include inline-block;
		content: '';
		height: 100%;
		margin-left: -10px;
		vertical-align: middle;
		width: 10px; 
	}
}

// ==========
// Vertical gradient
// 縦方向のグラデーションを設定します。
// @param $top {color} もっとも上の色
// @param $bottom {color} もっとも下の色
// @param $fallback {color} グラデーションに対応していない場合の色

@mixin vertical-gradient ($top, $bottom, $fallback) {
	background: $fallback;
	@if ($vp-moz) {
		background: -moz-linear-gradient(top, $top 0%, $bottom 100%);
	}
	background: -webkit-gradient(
		linear, left top, left bottom,
		color-stop(0.00, $top),
		color-stop(1.00, $bottom)
	);
	background: linear-gradient(
		to bottom,
		$top 0%,
		$bottom 100%
	);
	@if ($use-css3pie and $use-css3pie-gradient) {
		-pie-background: linear-gradient($top 0%, $bottom 100%);
	}
	@if $use-ie-filter {
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$top', endColorstr='$bottom',GradientType=0 );
	}
}

// ==========
// Triangle
// 三角形を描画します。
// @param $color {color} 色
// @param $datum {'top'|'right'|'bottom'|'left'} 底辺の方向
// @param $shape {string} border-widthの値

@mixin triangle ($color, $datum, $shape) {
	border-color: transparent;
	border-#{$datum}-color: $color;
	border-style: solid;
	border-width: $shape;
	content: '';
	height: 0;
	position: absolute;
	width: 0;
}

// ==========
// Resister fontface
// ウェブフォントを読みこませます。
// @param $name {string} フォント名の定義
// @param $source {string} フォントのパス+ファイル名（拡張子は不要）

@mixin register-font-face ($name, $source) {
	font-family: $name;
	font-style: normal;
	font-weight: normal;
	src: url("#{$source}.eot");
	src:
		url("#{$source}.eot?#iefix") format("embedded-opentype"), // IE6～IE8
		url("#{$source}.woff") format("woff"), // 主要最新ブラウザ向け
		url("#{$source}.ttf") format("truetype"), // IE以外の旧ブラウザ向け
		url("#{$source}.svg##{$name}") format("svg"); // その他のブラウザ向け
}

// ==========
// CSS3PIE
// CSS3PIE を適用します。
// @param $url {sting} CSS3PIEのURL

@mixin css3pie ($url) {
	@if ($use-css3pie) {
		behavior: $url;
		position: relative;
	}
}

// ==========
// Media query (max-width)
// ウィンドウの最大幅を基準としたメディアクエリを設定します。
// @param $break-point {size} 最大値のブレークポイント（～以下）
// @param $ratio {number} 解像度

@mixin media-query-max-width ($break-point) {
	@media screen and (max-width: $break-point) {
		@content;
	}
}

// ==========
// Media query (pixel ratio)
// デバイスの解像度を基準としたメディアクエリを設定します。
// @param $ratio {number} 解像度

@mixin media-query-ratio ($ratio) {
	@media screen and (-webkit-device-pixel-ratio: $ratio) {
		@content;
	}
}