@importで必要なSCSSファイルを読み込みます。
たとえば、メディアクエリの_mq.scssを読み込むためには
@import "mq";とします。拡張子と先頭の_は不要です。
また別ディレクトリにある場合は、以下のように指定します。
@import "scss/mq";余白調整用のクラスを生成します。
@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の中身を調整してください。
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
画像を、中央揃えすることができます。
@import 'trbl';
.trbl {
position: relative;
img {
@include trbl;
}
}画像の親要素をposition: relative;にする必要があります。
.trbl {
position: relative;
.trbl-item {
@include trbl(100px, 100px);
}
}また画像でない場合は高さと幅を指定する必要があります。
$width: 画像でない場合、幅が必要となります$height: 画像でない場合、高さが必要となります
メディアクエリを簡単に記述するためのショートカットです。 引数の説明は以下のコードを参照してください。
@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; }
};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: どの状態でも下線なし