本文共 10432 字，大约阅读时间需要 34 分钟。
Less 是一个Css 预编译器, 意思指的是它可以扩展Css语言, 添加功能如允许变量(variables), 混合(mixins), 函数(functions) 和许多其他的技术, 让你的Css更具维护性, 主题性, 扩展性
$ npm install -g less
进入 src/main.js 进行配置
import './less/normalize.css'import './less/base.less'
@headerHeight: 0.42rem;* { box-sizing: border-box;}html,body { height: 100%; padding: 0; margin: 0;}body { /* overflow: hidden;*/ font-size: 0.12rem; background-color: #f4f4f4; overflow-x: hidden}a,button,input,li { -webkit-tap-highlight-color: transparent;}a,a:active,a:focus,a:hover,a:visited { text-decoration: none;}body,html a { color: #333;}ul,li { list-style: none; padding: 0; margin: 0;}textarea { border: 0; outline: none;}button { outline: none;}input { padding-left: 0.1rem; padding-right: 0.1rem; outline: none; border: none;}.full-width { width: 100%;}.full-height { height: 100%;}.hidden { overflow: hidden;}.fl { float: left;}.fr { float: right;}/*文字溢出...*/.text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.txt-center { text-align: center;}.txt-left { text-align: left;}.pos-r { position: relative;}.pos-a { position: absolute;}.pos-f { position: fixed;}.overflow-y-auto { overflow-y: auto}.fix-ios-scroll { -webkit-overflow-scrolling: touch;}.containFooter { padding-bottom: 0.6rem;}.containHeader { padding-top: 0.42rem;}.clearfix:after { content: ""; display: table; clear: both;}/*禁止长按选中*/*:not(input, textarea) { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}.curren-circle { width: 0.5rem; height: 0.5rem; line-height: 0.5rem; background: #5EADFF; border: 1px solid #FFFFFF; box-shadow: 0 3px 11px 0 #5EADFF; border-radius: 0.5rem; color: #ffffff; font-size: 0.12rem; text-align: center; vertical-align: middle;}.normal-circle { width: 0.35rem; height: 0.35rem; line-height: 0.35rem; background: #CCCCCC; border: 2px solid #FFFFFF; border-radius: 0.35rem; color: #ffffff; font-size: 0.12rem; text-align: center; vertical-align: middle;}.custom-style { .mint-cell-text { font-size: 0.15rem; color: #333333; line-height: 0.15rem; } .mint-field-core { font-size: 0.15rem; color: #333333; line-height: 0.15rem; background: #F4F4F4; border-radius: 0.03rem; padding: 0.06rem 0.1rem; } .mint-cell-title { width: 0.8rem; }}.button-next.disabled { background: rgba(80, 159, 241, 0.60);}.button-next { background: #509FF1; border-radius: 3px; color: #fff; outline: none; display: inline-block; height: 0.46rem; line-height: 0.46rem; vertical-align: middle; text-align: center; font-size: 0.17rem;}[contenteditable="true"],input,textarea { -webkit-user-select: auto !important; -khtml-user-select: auto !important; -moz-user-select: auto !important; -ms-user-select: auto !important; -o-user-select: auto !important; user-select: auto !important;}@font-face { // 字体文件引入 // font-family: 'Farrington'; // src: url('./Farrington-7B-Qiqi.ttf');} /*! normalize.css v2.1.3 | MIT License | git.io/normalize *//* ========================================================================== HTML5 display definitions ========================================================================== *//** * Correct `block` display not defined in IE 8/9. */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary { display: block;}/** * Correct `inline-block` display not defined in IE 8/9. */audio,canvas,video { display: inline-block;}/** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */audio:not([controls]) { display: none; height: 0;}/** * Address `[hidden]` styling not present in IE 8/9. * Hide the `template` element in IE, Safari, and Firefox < 22. */[hidden],template { display: none;}/* ========================================================================== Base ========================================================================== *//** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */}/** * Remove default margin. */body { margin: 0;}/* ========================================================================== Links ========================================================================== *//** * Remove the gray background color from active links in IE 10. */a { background: transparent;}/** * Address `outline` inconsistency between Chrome and other browsers. */a:focus { outline: thin dotted;}/** * Improve readability when focused and also mouse hovered in all browsers. */a:active,a:hover { outline: 0;}/* ========================================================================== Typography ========================================================================== *//** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari 5, and Chrome. */h1 { font-size: 2em; margin: 0.67em 0;}/** * Address styling not present in IE 8/9, Safari 5, and Chrome. */abbr[title] { border-bottom: 1px dotted;}/** * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. */b,strong { font-weight: bold;}/** * Address styling not present in Safari 5 and Chrome. */dfn { font-style: italic;}/** * Address differences between Firefox and other browsers. */hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0;}/** * Address styling not present in IE 8/9. */mark { background: #ff0; color: #000;}/** * Correct font family set oddly in Safari 5 and Chrome. */code,kbd,pre,samp { font-family: monospace, serif; font-size: 1em;}/** * Improve readability of pre-formatted text in all browsers. */pre { white-space: pre-wrap;}/** * Set consistent quote types. */q { quotes: "\201C" "\201D" "\2018" "\2019";}/** * Address inconsistent and variable font size in all browsers. */small { font-size: 80%;}/** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}sup { top: -0.5em;}sub { bottom: -0.25em;}/* ========================================================================== Embedded content ========================================================================== *//** * Remove border when inside `a` element in IE 8/9. */img { border: 0;}/** * Correct overflow displayed oddly in IE 9. */svg:not(:root) { overflow: hidden;}/* ========================================================================== Figures ========================================================================== *//** * Address margin not present in IE 8/9 and Safari 5. */figure { margin: 0;}/* ========================================================================== Forms ========================================================================== *//** * Define consistent border, margin, and padding. */fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;}/** * 1. Correct `color` not being inherited in IE 8/9. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */legend { border: 0; /* 1 */ padding: 0; /* 2 */}/** * 1. Correct font family not being inherited in all browsers. * 2. Correct font size not being inherited in all browsers. * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. */button,input,select,textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 2 */ margin: 0; /* 3 */}/** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */button,input { line-height: normal;}/** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. * Correct `select` style inheritance in Firefox 4+ and Opera. */button,select { text-transform: none;}/** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */button,html input[type="button"], /* 1 */input[type="reset"],input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */}/** * Re-set default cursor for disabled elements. */button[disabled],html input[disabled] { cursor: default;}/** * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */input[type="checkbox"],input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */}/** * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box;}/** * Remove inner padding and search cancel button in Safari 5 and Chrome * on OS X. */input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration { -webkit-appearance: none;}/** * Remove inner padding and border in Firefox 4+. */button::-moz-focus-inner,input::-moz-focus-inner { border: 0; padding: 0;}/** * 1. Remove default vertical scrollbar in IE 8/9. * 2. Improve readability and alignment in all browsers. */textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */}/* ========================================================================== Tables ========================================================================== *//** * Remove most spacing between table cells. */table { border-collapse: collapse; border-spacing: 0;} 转载地址：http://uhupo.baihongyu.com/