preface
Some common mixins I summarized during my project are now shared for everyone to learn.
Write based on Less. But CSS preprocessors are interlinked, and you can easily modify them to Sass or Stylus
The code is bound to have errors and bugs, if you can help me modify or supplement, thank you!!
Reference some open source libraries, such as EST, CSSLAB, etc
Usage
/** * Artwork: Mixin.less * Updated: December 14, 2017 * Introduction: 1. A less-based style tool library that encapsulates common mixins to help you write Less code more easily. * 2. Output code only when called to reduce code redundancy and avoid style contamination * 3. It is recommended to use tools such as Postcss, Autoprefixer, less-plugin-Autoprefix, etc. * 4. With all kinds of IE Hack * / / * -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- ├ layout ┆ └ -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * / high/wide/box .size(@w, @h) { width: @w; height: @h; } // Min-width (@min-w) {min-width: @min-w; _width: @min-w; } .min-height(@min-h) { min-height: @min-h; _height: @min-h; } // Inline block level elements, compatible with IE6.dib() { display: inline-block; *display: inline; *zoom: 1; } // Fixed positioning, compatible with IE6.fixed() { position: fixed; _position: absolute; *zoom: 1; } // Unified box model.border -box() { *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; Text-align: center; text-align: center; text-align: center; } .center(text-y) { display: table-cell; vertical-align: middle; } // Block level elements are horizontally centered. Center (auto-x) {display: block; margin-left: auto; margin-right: auto; } // Center, uncertain size, incompatible ie6.center (unknown) {position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .center(unknown-x) { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; } .center(unknown-y) { position: absolute; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; } / / middle and determine the size, compatible with IE6. Center (known, @ w, @ h) {. Size (@ @ w, h); position: absolute; top: 50%; left: 50%; margin-top: -(@w / 2); margin-left: -(@h / 2); } .center(known-x, @w) { width: @w; position: absolute; left: 50%; margin-left: -(@h / 2); } .center(known-y, @h) { height: @h; position: absolute; top: 50%; margin-top: -(@w / 2); } // Center, CSS3 translation. center {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } // center(Flex) {display: Flex; align-items: center; justify-content: center; } // Multiple subitems layout. List (float, @w: 25%) { float: left; width: @w; } .list(inline, @w: 25%) { .dib(); width: @w; } .list(flex) { flex: 1; } // Mask layer, full screen mask, area mask. Over-screen (fixed) {.fixed(); top: 0; left: 0; right: 0; bottom: 0; } .over-screen(absolute) { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } // 100* 1/1 = 100% // 100* 3/4 = 75%. (@padding-top: 100%) {position: relative; width: 100%; height: 0; padding-top: @padding-top; img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }} // Extend the click area.extend-click() {
position: relative;
&:before { content: ' '; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; }} @width: 1200px {width: @width; margin-left: auto; margin-right: auto; } // Sidebar // Main area: overflow: hidden; margin-left: xx; margin-right: xx; .sidebar(left, @width) { position: absolute; top: 0; left: 0; width: @width; } .sidebar(right, @width) { position: absolute; top: 0; right: 0; width: @width; } / * -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- ├ font ┆ └ -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * / / / font size in fz (fz) of @ {the font size: @fz; } // fz(@fz, @lh) {font-size: @fz; line-height: @lh; } / / font size and line height, height of fz (@ fz, @ h, @ lh: @ h) {the font - size: @ fz. height: @h; line-height: @lh; } @h (@h, @lh: @h) {height: @h; line-height: @lh; } // font color, including link and non-link. Color (@color) {color: @color; Hover. Color (@color, @hovercolor) {color: @color; &:hover { color: @hovercolor; // Hover. Color (@color, @acolor, @hovercolor) {color: @color; a { color: @acolor; &:hover { color: @hovercolor; }}} // Normal font styles.normal -font() { font-weight: normal; font-style: normal; } // Assist text (gray). Assist-font (@color:#b0b0b0, @fz: 14px) { color: @color; font-size: @fz; }// Disallow line breaks, text overflow ellipsis display (one line).ellipsis() {
white-space: normal; word-wrap: break-word; word-break: break-all; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; text-overflow:ellipsis; overflow:hidden; } // Text overflow ellipsis display (multiple lines) // webKit browser only, solution: height = line height * line number // height: 90px; line-height: 30px; -webkit-line-clamp: 3; .ellipsis-mult(@n: 3) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: @n; word-break:break-all; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; text-overflow:ellipsis; overflow: hidden; } retext(x) {direction: RTL;} retext(x) {direction: RTL; unicode-bidi: bidi-override; } .retext(y) { writing-mode: tb-rl; writing-mode: vertical-rl; } // Text transparent.transparent -text() { font: 0/0 serif; text-shadow: none; color: transparent; } // <a href="" title="Logo SEO optimization"><h1 class="logo">xx</h1></a>
.hidden-text() { text-indent : -9999px; overflow: hidden; text-align: left; } // Glow-text (@r: 10px, @color: gold) {text-shadow: 0 0 @r@color; } / * -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- ├ image ┆ └ -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * / / / Max - width to prevent picture broken container. The Max -img() { display: block; max-width: 100%; height: auto; {background-image: url(@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'"); }} // fullscreen background.fullscreen-bg (@url) {width: 100vw; height: 100vh; background: url(@url) no-repeat 50% 50%; background-size: cover; } // Filter: displays color photos as black and white photos.grayscale() { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); } / * -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- ├ dynamic effect ┆ └ -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * / / / the default link underline, Hover after the underline style. Hover -link() { text-decoration: none; &:hover { text-decoration: underline; }} // Change the link to the default literal style. Unstyled -link() { color: inherit; cursor: inherit; text-decoration: inherit; &:active, &:focus { outline: none; }} // box shadow // box-shadow: horizontal shadow position, vertical shadow position, blur distance, shadow size, shadow color, shadow start direction (default is inside out, inset is outside in); // box-shadow: h-shadow v-shadow blur spread color inset; .box-shadow{box-shadow: 0px 14px 26px 0px Rgba (0, 0, 0, 0.1); } // box Hoverhover() {
// box-shadow: 0px 1px 2px 0px rgba(84, 107, 107, .4);
transition: all .2s linear;
&:hover {
box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
transform: translate3d(0, -2px, 0);
}
}
.box-hover2() { transition: transform .5s ease; &:hover { transform: translateX(10px); }} // 3d flash bug handling.transform-fix() { -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; } // Animation .ani(@name, @time: 1s, @ease: ease-in-out, @fillmode: forwards) { animation-name: @name; animation-duration: @time; animation-timing-function: @ease; animation-fill-mode: @fillmode; } / * -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- ├ function ┆ └ -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * / / / floating, compatible with IE6.fl() { float: left; *display: inline; _display:inline; }.fr() { float: right; *display: inline; _display:inline; } // Clear the float.clearfix() {
*zoom: 1;
&:after { display: block; clear: both; content: ' '; visibility: hidden; height: 0; }
}
.clearfix(table) {
*zoom: 1;
&:before, &:after { content: ""; display: table; clear: both; }} // Disallows text to be select.user -select() { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } // Hide the mouse gesture. Hide -cursor() { cursor: none ! important; } // Mouse disables styles, but can still trigger events // <inputtype="text" disabled="disabled">.disabled() { cursor: not-allowed; } // Disable element events // 1. Prevent any click action from executing // 2. Make the link display as the default cursor // 3. Stop trigger hover and active state // 4. Stop JavaScript click event trigger. Pointer -events() { pointer-events: none; } // blur. Blur (@blur: 10px) {filter: blur(@blur); -webkit-filter: blur(@blur); -moz-filter: blur(@blur); -o-filter: blur(@blur); -ms-filter: blur(@blur); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='@{blur}'); *zoom: 1; Opacity (@opacity: 20) {opacity: @opacity / 100; filter: alpha(opacity=@opacity); } // Use the pseudo-class to display the link of the a label when printing. Print -link() {
@media print {
a[href]:after { content: "(" attr(href) ")"; Zebra -lists(odd, @color) {&. Odd {>li:nth-child(odd) {background-color: @color; } } } .zebra-lists(even, @color) { &.even { >li:nth-child(even) { background: green; }}} // first letter(@font-size: 6em) {&::first letter{float: left; line-height: 1; font-size: @font-size; }} // specify the first line of the paragraph. First -line() {&::first-line{color: red}} // Beautify the selected text.beauty -select() {
&::selection{
color: #fff;
background-color: #6bc30d;text-shadow: none; }} @fz, @color: placeholder;#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; {// placeholder(custom, @property, @value) {&:-moz-placeholder {@{property}: @value; } &:-ms-input-placeholder { @{property}: @value; } &::-webkit-input-placeholder { @{property}: @value; }} / * -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- ├ graphics ┆ └ -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * / / / triangle. Triangle (@ width: 4px,@color:# 000) {display: inline-block; width: 0; height: 0; vertical-align: middle; border-top: @width solid @color; border-left: @width solid transparent; border-right: @width solid transparent; } arrow(top, @w: 10px, @color, @x: 50%) {position: relative; &:before { position: absolute; bottom: 100%; left: @x; content:""; height: 0; width: 0; pointer-events: none; border-style: solid; border-color: transparent; border-bottom-color: @color; border-width: unit(@w, px); @margin: -@w; margin-left: unit(@margin, px); }
}
.arrow(right, @w: 10px, @color, @y: 50%) {
position: relative;
&:before { position: absolute; left: 100%; top: @y; content: ""; height: 0; width: 0; pointer-events: none; border-style: solid; border-color: transparent; border-left-color: @color; border-width: unit(@w, px); @margin: -@w; margin-top: unit(@margin, px); }
}
.arrow(bottom, @w: 10px, @color, @x: 50%) {
position: relative;
&:before { position: absolute; top: 100%; left: @x; content: ""; height: 0; width: 0; pointer-events: none; border-style: solid; border-color: transparent; border-top-color: @color; border-width: unit(@w, px); @margin: -@w; margin-left: unit(@margin, px); }
}
.arrow(left, @w: 10px, @color, @y: 50%) {
position: relative;
&:before { position: absolute; right: 100%; top: @y; content: ""; height: 0; width: 0; pointer-events: none; border-style: solid; border-color: transparent; border-right-color: @color; border-width: unit(@w, px); @margin: -@w; margin-top: unit(@margin, px); Arrow-with-border (top, @w: 10px, @color, @border-w: 1px, @x: 50%) {position: relative; &:before, &:after { bottom: 100%; left: @x; content:""; height: 0; width: 0; position: absolute; pointer-events: none; border-style: solid; border-color: transparent; }
&:after { border-bottom-color: @color; border-width: unit(@w, px); @margin: -@w; margin-left: unit(@margin, px); }
&:before { border-bottom-color: @border-color; @arrbo: @w+@border-w; border-width: unit(@arrbo, px); @margin-bo: -@arrbo; margin-left: unit(@margin-bo, px); }
}
.arrow-with-border(bottom, @w: 10px, @color, @border-w: 1px, @border-color, @x: 50%) {
position: relative;
&:before, &:after { top: 100%; left: @x; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-style: solid; border-color: transparent; }
&:after { border-top-color: @color; border-width: unit(@w, px); @margin: -@w; margin-left: unit(@margin, px); }
&:before { border-top-color: @border-color; @arrbo: @w+@border-w; border-width: unit(@arrbo, px); @margin-bo: -@arrbo; margin-left: unit(@margin-bo, px); }
}
.arrow-with-border(left, @w: 10px, @color, @border-w: 1px, @border-color, @y: 50%) {
position: relative;
&:before, &:after { top: @y; right: 100%; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-style: solid; border-color: transparent; }
&:after { border-right-color: @color; border-width: unit(@w, px); @margin: -@w; margin-top: unit(@margin, px); }
&:before { border-right-color: @border-color; @arrbo: @w+@border-w; border-width: unit(@arrbo, px); @margin-bo: -@arrbo; margin-top: unit(@margin-bo, px); }
}
.arrow-with-border(right, @w: 10px, @color, @border-w: 1px, @border-color, @y: 50%) {
position: relative;
&:before, &:after { top: @y; left: 100%; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-style: solid; border-color: transparent; } &:after { border-left-color: @color; border-width: unit(@w, px); @margin: -@w; margin-top: unit(@margin, px); } &:before { border-left-color: @border-color; @arrbo: @w+@border-w; border-width: unit(@arrbo, px); @margin-bo: -@arrbo; margin-top: unit(@margin-bo, px); }} / * -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- ├ component ┆ └ -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * / / / navigation. The suction a top fix - the header (@ h: 70px) { .fixed(); top: 0; left: 0; width: 100%; height: @h; z-index: 1000; // background-color: rgba(256, 256, 256, .92); // border-bottom: 1px solid rgba(7, 17, 27, 0.1); Box-shadow: 0px 0px 20px rgba(0,0,0,0.2); } // fix-header(@h: 70px) {.fixed(); left: 0; bottom: 0; width: 100%; height: @h; z-index: 1000; } // Input box.input-text() { display: block; width: 100%; padding: 4px 8px; font-size: 14px; The line - height: 1.42858; color:# 333;
border: 1px solid #ddd;
background-color: #fff;border-radius: 3px; } // <span class= 0"separator">|/-</span>
.separator() {
margin: 0 10px;
color: # 999;font-size: 14px; } // Split line/(breadcrumb navigation).separator2() {
&:before {
padding: 0 5px;
color: #ccc;
content: "/\00a0";
}
}
// <hr class="hr"< p style = "max-width: 100%; clear: both; min-height: 1em;hr() {
height: 1px;
margin: 10px 0;
border: 0;
clear: both;
background-color: #e2e2e2;</legend></ legend></fieldset>fieldset() {
border-color: #d2d2d2;border-width: 1px 0 0; border-style: solid; legend { padding: 0 20px; text-align: center; font-size: 20px; font-weight: 300; }} // reference block (mimicking Layui) // <div class="blockquote">Lorem ipsum dolor sit amet.</div>
.blockquote() {
margin-bottom: 10px;
padding: 15px;
line-height: 22px;
border-left: 5px solid # 009688;
border-radius: 0 2px 2px 0;
background-color: #f2f2f2;<span class= "span" style = "box-sizing: border-box! Important; word-wrap: break-word! Important;"badge">10</span>
.badge(...) {
position: relative;
display: inline-block;
font-size: 12px;
color: #fff;
background-color: #FF5722;} .badge(ellipse) { min-width: 8px; height: 18px; padding: 2px 6px; text-align: center; line-height: 18px; border-radius: 9px; } .badge(dot) { width: 8px; height: 8px; border-radius: 50%; } // close button // <button class="close" type="button"><span>× </span></button> .close() {
position: relative;
-webkit-appearance: none;
padding: 0;
cursor: pointer;
background: 0 0;
border: 0;
font-size: 20px;
font-weight: 700;
line-height: 1;
color: # 000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: .2;
&:hover {
color: # 000;
text-decoration: none;
cursor: pointer;
filter: alpha(opacity=50);
opacity: .5;
}
&:before {
content: ' '; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; }} // 1 pixel border problem.onepx(...) { position: relative; &:after { content:' '; display: block; position: absolute; left: 0; width: 100%; Border-top: 1px solid rgba(7, 17, 27, 0.1); The transform: scaleY (0.5); } } .onepx(top) { &:after { top: 0; } } .onepx(bottom) { &:after { bottom: 0; } } .onepx-easy(top, @color:#ccc) { box-shadow: inset 0px -1px 1px -1px @color; }
.onepx-easy(bottom, @color: #ccc) { box-shadow: inset 0px 1px 1px -1px @color; }
Copy the code