mixins.scss
assetsにmixins.scssを追加
フォントの指定
code:scss
@mixin noto($size: null, $color: null, $weight: null) {
font-family: $noto-font;
@if $size != null {
font-size: $size;
}
@if $color != null {
color: $color;
}
@if $weight != null {
font-weight: $weight;
}
}
@mixin lato($size: 16px, $color: null, $weight: null) {
font-family: $lato-font;
@if $size != null {
font-size: $size;
}
@if $color != null {
color: $color;
}
@if $weight != null {
font-weight: $weight;
}
}
html {
/* fontのデフォルト設定 */
@include noto($size: 16px, $color: $theme-color, $weight: $font-regular);
line-height: 1.5;
word-spacing: 1px;
font-feature-settings: 'pkna';
}
フォント別にmixinを作っておき、デフォルトの設定はルートに書いておく。
フォント変えたいってときは一緒にフォントサイズとかweightも変えたいってときが多いので。
デフォルト設定そのままでフォントサイズだけ変えたいみたいなときは、直接font-sizeで指定するほうがいいかもだけど、あえて @include noto(20px); ってやったほうが、Notoフォントなんだなってわかる。
variables.scss に $font-regular: 400; とか $font-bold: 700; とか書いておくと、数字なんだっけ？が減らせる。 position: absolute;
code:scss
$z-default: 0;
@mixin absolute(
$t: null, /* top */
$l: null, /* left */
$r: null, /* right */
$b: null, /* bottom */
$m: null, /* margin */
$z: $z-default /* z-index */
) {
position: absolute;
@if $top != null {
top: $t;
}
@if $left != null {
left: $l;
}
@if $right != null {
right: $r;
}
@if $bottom != null {
bottom: $b;
}
@if $m != null {
margin: $m;
}
@if $z != null {
z-index: $z;
}
}
@include absolute(0,0,0,0,auto); で上下左右の中央揃えができるので便利。fixedも作っておくと良き。
また、style/scss/z-index.scss を作って z-index を管理するとより良き
flexBox 使う時
code:scss
@mixin flex(
$wrap: nowrap,
$justifyContent: space-between,
$alignItems: center
) {
display: flex;
flex-wrap: $wrap;
justify-content: $justifyContent;
align-items: $alignItems;
}
よく使うのをデフォルトにしている。
UIとかで、文字が長いと…にしたいとき
code:scss
@mixin threepoint {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}