おすすめmixin
SCSS
@charset "utf-8";
/* table of content -----------------
1.縦横中央配置
2.vwフォントサイズ自動計算
3.position absolute(縦・横の中央配置)
4.before,after用
5.media query
-----------------------------------*/
//1.縦横中央配置
@mixin flexacenter {
align-items: center;
justify-content: center;
}
//2.vwフォントサイズ自動計算
@function get_vw($size, $viewport:375){
$rate: 100 / $viewport;
@return $rate * $size * 1vw;
}
@mixin fz_vw($font_size:10){
font-size: $font_size * 1px;
font-size: get_vw($font_size);
}
//3.position absolute(縦・横の中央配置)
@mixin positionabsolute50 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
@mixin positionabsolutex {
position: absolute;
top: 50%;
transform: translate(0,-50%);
}
@mixin positionabsolutey {
position: absolute;
left: 50%;
transform: translate(-50%,0);
}
//4.before,after用
@mixin beforeaftercontent {
content: "";
display: block;
}
//5.media query
$breakpoint_sp: 767px;
$breakpoint_pc: 768px;
@mixin sp {
@media screen and (max-width: $breakpoint_sp) {
@content;
}
}
@mixin pc {
@media screen and (min-width: $breakpoint_pc) {
@content;
}
}
(Visited 419 times, 1 visits today)