Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

187 lines (142 sloc) 3.942 kB

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 : どの状態でも下線なし
Jump to Line
Something went wrong with that request. Please try again.