The commonly used a mixin

The background image

@mixin bg-image($url){ background-image: url($url + "@2x.png"); @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){ background-image: url($url + "@3x.png"); .icon{@include bg-image(logo); }Copy the code

Text does not wrap

@mixin no-wrap(){ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }.box {@include no-wrap()}Copy the code

Extended Click area (mostly mobile)

@mixin extend-click(){ position: relative; &:before{ content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; .box {@include extend-click()}Copy the code

Multi-line text overflow…

@mixin multiEllipsis($line:2){ overflow : hidden; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: $line; -webkit-box-orient: vertical; }.text{@include multiEllipsis(3)}.text{@include multiEllipsis(3)}Copy the code

transparency

@mixin opacity($opacity) { opacity: $opacity; $opacity-ie: $opacity * 100; filter: alpha(opacity=$opacity-ie); .box {@include opacity(0.8); }Copy the code

Remove the floating

@mixin clearfix() { &:before, &:after { content: ""; display: table; } &:after { clear: both; .box {@include clearfix()}Copy the code

Beautify the placeholder placeholder style

@mixin beauty-placeholder($fz, $color: #999, $align: left) { &:-moz-placeholder { font-size: $fz; color: $color; text-align: $align; } &:-ms-input-placeholder { font-size: $fz; color: $color; text-align: $align; } &::-webkit-input-placeholder { font-size: $fz; color: $color; text-align: $align; Input {@include beauty-placeholder(25px, #eee, left)}Copy the code

Beautify text selection

@mixin beauty-select($color, $bgcolor) { &::selection { color: $color; background-color: $bgcolor; .text {@include beauty-select(# FFF, #000)}Copy the code

Frosted glass effect

@mixin blur($blur: 10px) { -webkit-filter: blur($blur); -moz-filter: blur($blur); -o-filter: blur($blur); -ms-filter: blur($blur); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='${blur}'); filter: blur($blur); *zoom: 1; }.box {@include blur(10px)}Copy the code

Filter: Shows color photos to black and white photos, preserving image layers

@mixin grayscale() { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); .img {@include grayscale()}Copy the code

The text centered

@mixin center($height:100%){ height: $height; line-height: $height; Text-align: center}; text-align: center; @include center(30px) }Copy the code

Modify the background color, etc

@mixin background($border-radius:5px, $bg-color:#eee, $color:#fff, $font-weight:400){ border-radius: $border-radius; background-color: $bg-color; color: $color; font-weight: $font-weight; Container {@include background(10px, #eee, # FFF, 700)}Copy the code

flex

@mixin flex ($direction: row, $justify-content: flex-start, $align-items: flex-start,$flex-wrap: nowrap) { display: flex; flex-direction: $direction; justify-content: $justify-content; align-items: $align-items; flex-wrap: $flex-wrap; .box {include flex(row,flex-start,flex-start,wrap)}Copy the code

Mouse hover displays the underline

@mixin hoverLine($height:2px,$color:$color-text-primary){
    position: relative;
    &:hover::after{
            content: '';
            position: absolute;
            height:$height;
            width: 100%;
            background-color: $color;
            bottom: 0;
            left: 0;

}
Copy the code


Copy the code


} span{@include hoverLine(2px,$color-white); }




Some common global styles 


Click show hand


.pointer {
    cursor: pointer;
}
Copy the code


Use the style to hover on a character icon


.ibass--default{ color: red; transition: color .5s; cursor: pointer; &:hover { color: blue; }}Copy the code


Text is not allowed to be selected


.noselect{
  user-select: none;
}
Copy the code


Click is invalid


.click--invalid {
    pointer-events: none;
}
Copy the code







This is the end of sharing, if you have any good mixin can share together, let us make progress together




I am the south flying goose, you can call me flying goose, I am a striver, in the realization of wealth and freedom on the road……


I like to share, and I like to think; I have my own life plans and dreams; But sometimes it’s confusing…


I am engaged in the IT industry and have studied many and miscellaneous technical fields: PHP, MySQL, Linux, JavaScript, Node.js, NoSQL, PhotoShop, audio and video processing, architecture cluster, network communication, life skills, three views of life, being a person, doing things and reading…


Love Bohemian life, do not like to be constrained, like to discuss problems with others, do not like to quarrel with people, although sometimes others will give you different ideas, but, I can also be very clear to know yourself, I know what I want


I always write down my thoughts and things to do in the near future on the Nuggets, I hope you pay attention to me, I am a striver, my name is Nanfeiyan