_mixins.scss
// ==========
// 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;
}
}