scss 常用mixins
mixins.scss
placeholder
@mixin placeholder($font-size: 16px, $color: #eee) {
::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
font-size: $font-size;
color: $color;
}
}
border-radius
// $direction: top bottom left right
@mixin border-radius($direction, $value: 4px) {
@if $direction == top or $direction == bottom {
border-#{$direction}-left-radius: $value;
border-#{$direction}-right-radius: $value;
}
@else {
border-top-#{$direction}-radius: $value;
border-bottom-#{$direction}-radius: $value;
}
}
position-center
@mixin position-center($direction: 'both') {
position: absolute;
@if $direction == 'vertical' {
top: 50%;
transform: translateY(-50%);
}
@else if $direction == 'horizontal' {
left: 50%;
transform: translateX(-50%);
}
@else {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
ellipsis
@mixin ellipsis($line: 1) {
overflow: hidden;
text-overflow: ellipsis;
@if $line==1 {
white-space: nowrap;
word-wrap: normal;
}
@else {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $line;
}
}
border-1px
@mixin border-1px($color: $border-color, $position: 'before') {
position: relative;
&::#{$position} {
content: '';
pointer-events: none;
display: block;
position: absolute;
left: 0;
top: 0;
transform-origin: 0 0;
border: 1px solid $color;
border-radius: $radius;
box-sizing: border-box;
width: 100%;
height: 100%;
@media (min-resolution: 2dppx) {
width: 200%;
height: 200%;
transform: scale(.5) translateZ(0);
}
@media (min-resolution: 3dppx) {
width: 300%;
height: 300%;
transform: scale(.333) translateZ(0);
}
}
}
safe-area
// 兼容 ipx 底部安全区域
// $side: top bottom left right
@mixin safe-area($side: bottom) {
padding-#{$side}: env(safe-area-inset-#{$side});
}
flex
@mixin flex($justify-content: space-between, $align-items: center) {
display: flex;
justify-content: $justify-content;
align-items: $align-items;
}
@mixin flex-column($justify-content: space-between, $align-items: center) {
display: flex;
justify-content: $justify-content;
align-items: $align-items;
flex-direction: column;
}
胖胖熊笔记,笔记已迁移