@mixin

2018.10.25

Sassの@mixinという機能を活用すれば、今まで面倒くさかった記述も、効率的にコーディングが可能です。

@mixin に任意で名前を指定してスタイルを指定することでひとまとまりの定義とすることができます。

使用するときには、@includeで呼び出します。

@mixin font {
     color:#333;
     font-size:14px;
     font-weight:bold;
}
.text {
     @include font;
}

@mixin font {

color:#333;

font-size:14px;

font-weight:bold;

}

.text {

@include font;

}

また変数を使って

@mixin box($size) {
     width: $size;
     height: $size;
}
■scss
.content {
     @include box(300px);
}
■css{
     width: 300px;
     height: 300px;
}

@mixin box($size) {

width: $size;

height: $size;

}

■scss

.content {

@include box(300px);

}

■css{

width: 300px;

height: 300px;

}

変数$sizeに格納されたpxの値がwidthとheightに適用されます。

上記を活用して、指定の多いポジションの指定などを@mixinを使用すると

@mixin position ($top: auto, $right: auto, $bottom: auto, $left: auto) {
     position: absolute;
     top: $top;
     right: $right;
     bottom: $bottom;
     left: $left;
}

.content {
     @include position(10px, 50px, 50px, 0);
}

.content {
  position: absolute;
  top: 10px;
  right: 50px;
  bottom: 50px;
  left: 0px;
}