Sassを勉強し始めの時に見て参考になった@mixinスニペット+α

2014.01.27 Category:CSS Tag:

Compassを導入するだけで格段に便利になりますが、世の中にはもっと便利にを追求されたものがあるようです。

@mixinとは？？

なんども同じスタイルを定義するとき、@mixinを使うと何度も同じ事を書かなくて済みますし、何よりスタイルを一括で管理できるようになります。

ミックスインによってCSSの定義をグルーピングし、何度も呼び出して使いまわすことができます。

「@mixin」でミックスインは定義され、セレクタ内で「@include」で呼び出します。

※　ミックスイン名は数字で始めることはできません

参考になった@mixinスニペット

そんな便利なミックスイン。使わないと！とSassを始めた頃に見て回って参考にしたコードをまとめました。

1.　SCSS Mixin for a Lined Paper Effect

SCSS Mixin for a Lined Paper Effect　｜　coderwall

ノートの罫線のように下線が表示される@mixin

2.　SASS MIXIN FOR AUTO-NUMBERING

See the Pen SASS MIXIN FOR AUTO-NUMBERING WITH CSS by Ahmed El Gabri (@ahmedelgabri) on CodePen.

SASS MIXIN FOR AUTO-NUMBERING　｜　codepen

ol要素を自動ナンバリングする@mixin

3.　SASS Triangle Mixin

SASS Triangle Mixin　｜　forrst

ol要素を自動ナンバリングする@mixin

4.　sass mixin for rem font sizing & line height with px fallback

@mixin font-size($sizeValue: 16, $line: $sizeValue * 1.5) {
    font-size: ($sizeValue) + px;
    line-height: ($line) + px;
    font-size: ($sizeValue / 16) + rem;
    line-height: ($line / 16) + rem;
}

@mixin font-size($sizeValue: 16, $line: $sizeValue * 1.5) {

font-size: ($sizeValue) + px;

line-height: ($line) + px;

font-size: ($sizeValue / 16) + rem;

line-height: ($line / 16) + rem;

}

sass mixin for rem font sizing & line height with px fallback　｜　coderwall

文字の大きさとline-heightを定義する@mixin

5.　Cross Browser CSS Rotation Sass Mixin

 @mixin rotate($degrees) {
    -webkit-transform: rotate($degrees);
    -moz-transform: rotate($degrees);
    -ms-transform: rotate($degrees);
    -o-transform: rotate($degrees);
    transform: rotate($degrees);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=#{-1*sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)})";
    filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=#{-1*sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)});
}

@mixin rotate($degrees) {

-webkit-transform: rotate($degrees);

-moz-transform: rotate($degrees);

-ms-transform: rotate($degrees);

-o-transform: rotate($degrees);

transform: rotate($degrees);

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=#{-1*sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)})";

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=#{-1*sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)});

}

Cross Browser CSS Rotation Sass Mixin　｜　coderwall

回転を定義する@mixin