scss ミックスイン

Posted 2021-05-18

@charset "utf-8";


// フォントサイズ
@mixin fs($num) {
	font-size: $num + px;
	font-size: ($num / 16) + rem;
	// font-size: percentage($num / 16);
}


// テキストを画像置換
@mixin hide {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}


// リストのマーカーデフォルト
@mixin ul($pd: 40, $marker: disc) {
	list-style-type: $marker;
	padding-left: $pd + px;
}

@mixin ol($pd: 40, $marker: decimal) {
	list-style-type: $marker;
	padding-left: $pd + px;
}


// 矢印
@mixin arrow {
	content: "";
	position: absolute;
	border-top: 1px solid;
	border-right: 1px solid;
	transform: rotate(45deg);
}


// opacity
@mixin op($opacity) {
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=#{$opacity * 100});
	opacity: $opacity;
}


// clearfix
@mixin cf {
	&::after {
		content: "";
		display: block;
		clear: both;
	}
}


// ブレークポイント
@mixin min($width) {
	@media screen and (min-width: $width + px) {
		@content;
	}
}

@mixin max($width) {
	@media screen and (max-width: $width + px) {
		@content;
	}
}

// iOS, Android
@mixin rt {
	@media (-webkit-min-device-pixel-ratio: 2) {
		@content;
	}
}


// nth系
@mixin f {
	&:first-child {
		@content;
	}
}
@mixin f-not {
	&:not(:first-child) {
		@content;
	}
}

@mixin l {
	&:last-child {
		@content;
	}
}
@mixin l-not {
	&:not(:last-child) {
		@content;
	}
}

@mixin ft {
	&:first-of-type {
		@content;
	}
}
@mixin ft-not {
	&:not(:first-of-type) {
		@content;
	}
}

@mixin lt {
	&:last-of-type {
		@content;
	}
}
@mixin lt-not {
	&:not(:last-of-type) {
		@content;
	}
}

@mixin n($num) {
	&:nth-child(#{$num}) {
		@content;
	}
}

@mixin nt($num) {
	&:nth-of-type(#{$num}) {
		@content;
	}
}