// Less, SCSS,sass,stylus this is a CSS helper, which is indispensable in the project, such as in the construction tool webpack gulp Gurt, improve the development efficiency; // less: // less: // less: // less: // less: // less: // less: // less: // less: // less: // less: // less: // less: // less: // less: // Variable 2. Mix 3. Function 4. Nested 5. Dynamic calculation / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / 1. Variables are denoted by @; There are global variables (@ variables not defined in any element) and local variables (@ variables defined in an element); // variable scope, variables have the approximate rule (a variable defined in an element overrides a variable defined in a non-element with the same name;) // Here are the global variables: @w:800px; @h:80px; @color:#eea37d;@padding:20px; // create a public url variable @img: // create a public url variable @img:".. /./img"; // Set the public road strength for the picture. When the project structure changes, modify its variables. // Attribute variable @s:solid; @c-txt:center; // The selector variable dynamically sets the selector, you can set the selector to use any; @el:element; @elChild:el > ul > li a; // Custom @elattr :{width: 200px; height: 200px; border: solid 1px red; }; / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / 2. // * No argument method (similar to custom variable method). Flex {display:flex; display:-webkit-flex; display:-moz-flex; display:-ms-flex; display:-o-flex; } // * parameter method#el (@a:10px,@b:50px,@c:30px,@color:#000) {border:solid 1px @color; box-shadow: @arguments; @arguments this is a fixed default; width:@c; height:@c; } // Conditional filter // Less Noneif elseBut it has the and when // and operator, which is equivalent to &&, .border(@width,@color,@style) when (@width>2px) and (@color=red){border:@style @color @width; The} // not operator is called only when the border line of the element being called is greater than 2 and color is red. .bg-color(@color) when not (@color>=#fd7722){background:@color; } / /, comma separator: is equal to or operation | |, as long as there is a qualified will be executed. The fz (@ size: 20 px) when (@ size > 50 px), a (@ size < 90 px) {the font - size: @ the size; } // 3. Universal formula method: this is a very efficient numerical function, this is a tool to write. .elPub(@name, @px){ @{name}: @px * px } .pl(@pl) {.elPub(padding-left,@pl); } .pr(@pr) {.elPub(padding-right,@pr); } .padding(@top,@right,@bottom,@left) { .elPub(padding-top,@top); .elPub(padding-right,@right); .elPub(padding-bottom,@bottom); .elPub(padding-left,@left); Fz (@ fz) of}. {. ElPub (fz) of the font size, @} / / calls the method: the RRR {. Pl (20); .pr(20); The padding (10,20,30,40); .fz(20); } / / the following are calls the above set the value of the * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *. The header {width: @ w; // Call the variable 800px on the width property of this element; height:@h; line-height: @h; background: @color; @padding:40px; //@padding this is the local variable padding:@padding; // The @padding of the less variable is 40px; color:#fff;text-align: @c-txt; border:1px#eea37d @s; // Call the attribute variable valuefont-size: 24px; margin: 20px auto; } .main { width:@w; height:@h + 200px - 10px * 1px; Margin: 20px auto; background:url('@{img}/1.jpg'); } // Call the selector variable.@{el} {padding:@h; }#@{el} {padding:@h; }.@{elChild} {padding:@h; }#@{elChild} {padding:@h; @elAttr(); // Call the custom variable.flex; // Call the hybrid method with no arguments or.flex();#el; // Call the parameterized method of the hybrid method
}
.www {
#el(0px); // Call the hybrid parameter method, pass it, and set the first parameter to 0px;width:90px; } .eee { .border(3px,red,solid); // Call conditional filter.bg-color(# 333); // Call the filter method.fz(60px); Hover {body {. Gg {&:hover{//& represents the parent element gg; color:red; }}} <! Box-sizing: border-box; box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-user-select: none; outline: none; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; } body,html{ position: relative; -webkit-overflow-scrolling: touch; color:# 333;
}
a:active,
a:hover {
outline: 0;
}
img {
border: 0;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
-webkit-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } textarea { overflow: auto; } / / universal formula. Px2rem (@ name, @ px) {@ {name} : @ px / 75 * 1 rem. }.w(@width){.px2rem(width,@width); } .h(@height){.px2rem(height,@height); } .w-h(@width,@height) { .px2rem(width,@width); .px2rem(height,@height); } .w100 {width:100%; } .b-radius(@b-radius){ .px2rem(border-radius,@b-radius); .px2rem(-webkit-border-radius,@b-radius); } // border-width (@border-t-width){.px2rem(border-top-width,@border-t-width); } .border-r-width(@border-r-width){.px2rem(border-right-width,@border-r-width); } .border-b-width(@border-b-width){.px2rem(border-bottom-width,@border-b-width); } .border-l-width(@border-l-width){.px2rem(border-left-width,@border-l-width); } .border-w(@width) {.px2rem(border-width,@width); } .line-solid {border-style: solid; } .line-dashed {border-style: dashed; } .border-colr (@color) {border-color:@color; } // padding(@top,@right,@bottom,@left){.px2rem(padding-top,@top); .px2rem(padding-right,@right); .px2rem(padding-bottom,@bottom); .px2rem(padding-left,@left); } .pl(@pl){.px2rem(padding-left,@pl); } .pr(@pr){.px2rem(padding-right,@pr); } .pt(@pt){.px2rem(padding-top,@pt); } .pb(@pb){.px2rem(padding-bottom,@pb); } // position:relative; } .fixed {position:fixed; } .absolute {position:absolute; } .top(@top){.px2rem(top,@top); } .right(@right){.px2rem(right,@right); } .bottom(@bottom){.px2rem(bottom,@bottom); } .left(@left){.px2rem(left,@left); } // margin. Margin (@top,@right,@bottom,@left){.px2rem(margin-top,@top); .px2rem(margin-right,@right); .px2rem(margin-bottom,@bottom); .px2rem(margin-left,@left); } .ml(@ml){.px2rem(margin-left,@ml); } .mr(@mr){.px2rem(margin-right,@mr); } .mt(@mt){.px2rem(margin-top,@mt); } .mb(@mb){.px2rem(margin-bottom,@mb); } /* text */.fz(@fz){.px2rem(font-size,@fz); } .text(@fz,@color){.px2rem(font-size,@fz); color: @color; } .t-left{text-align:left; }.t-center{text-align:center; }.t-right{text-align:right; } .d-block{display:block; } .d-none{display:none; } .d-inline{display:inline; } .d-in-block {display:inline-block; } .f-weight{ font-weight:bold; } .v-middle{vertical-align: middle; } .v-top{vertical-align: top; }. L-height (@l-height){.px2rem(line-height,@l-height)} /* flex{display:flex; display:-webkit-flex; display:-moz-flex; } .flex-inline{display: inline-flex; display:-webkit-inline-flex; display:-moz-inline-flex; } .flex-between {justify-content:space-between; -webkit-justify-content:space-between; -moz-justify-content:space-between } .felx-around {justify-content:space-around; -webkit-justify-content:space-around; -moz-justify-content:space-around; } .flex-start{justify-content:flex-start; -webkit-justify-content:flex-start; -moz-justify-content:flex-start; } .flex-end{justify-content:flex-end; -webkit-justify-content:flex-end; -moz-justify-content:flex-end; } .item-center{align-items:center; -webkit-align-items:center; -moz-align-items:center; } .flex-center {justify-content:center; -webkit-justify-content:center; -moz-justify-content:center; } .flex-wrap{flex-wrap: wrap; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; } .flex1 {flex:1; -webkit-flex: 1; -moz-flex:1; } .flexbetween { .flex; .flex-between; } .w100{width:100%; } .ellipsis1 {overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } .trans4 { transition: all .4s; -webkit-transition: all .4s; -moz-transition: all .4s; }. Scale05 {transform: scale (1.05, 1.05); } // @solid:solid; @dashed:dashed; @imgUrl:'./img';
Copy the code