// color===================================== @primaryColor: #f45a40; // bg========================= @primaryBgc: #f45a40; // textC======================= @navTC: #fff; // text-unit===================== @lh: 2.5rem; @fz: 1.2rem; @fw: 600; @ell: ellipsis; // border========================== @radius: 5px; @w: 1px; @s: solid; @c: @primaryColor; @activeBorderColor: @primaryColor; @titleUnderline: @primaryColor; // margin unit=================== @mt-v: 1rem; @mb-v: 1rem; @ml-v: 1rem; @mr-v: 1rem; @mx-v: 1rem; @my-v: 1rem; @mf-v: 0; // padding unit=================== @pt-v: 1rem; @pb-v: 1rem; @pl-v: 1rem; @pr-v: 1rem; @px-v: 1rem; @py-v: 1rem; @pf-v: 0; // shadow======================= @sha-blur: 0; // 模糊 @sha-spread: 5px; // 散布大小 @sha-c: #666; //transition==================== @gdTime: 0.3s; // table================= @tbc: #fff; // 清楚a默认样式======================= .init-a { text-decoration: none; color: inherit; } // border=========================================== .border(@c:@c;@w:@w;@s:@s) { border: @w @s @c; } .border-T(@c:@c;@w:@w;@s:@s;) { border-top: @w @s @c; } .border-B(@c:@c;@w:@w;@s:@s;) { border-bottom: @w @s @c; } .border-R(@c:@c;@w:@w;@s:@s;) { border-right: @w @s @c; } .border-L(@c:@c;@w:@w;@s:@s;) { border-left: @w @s @c; } .titleUnderline(@c:@titleUnderline;@w:4px;@s:solid;) { border-bottom: @w @s @c; } .radius(@r:@radius) { border-radius: @r; } // shadow=============================================== .shadow(@c:@sha-c;@x:0;@y:0;@b:@sha-spread;@s:@sha-blur;) { box-shadow: @x @y @b @s @c; } // table========================= .table { .mx(auto); .my; .border(@tbc); > .tr { .flex-wrap(initial); &:not(:last-child) { .border-B(@tbc); } > .th, .td { &:not(:first-child) { .border-L(@tbc); } flex: 1; align-self: stretch; } } } // table========================= // textStyle================================================= .t-al(@v:center;) { text-align: @v; } .t-t(@val:capitalize) { text-transform: @val; } // https://www.runoob.com/cssref/pr-text-text-transform.html // 参考值val=========================== .t-ell(@w:100%;@v:@ell;) { max-width: @w; white-space: nowrap; text-overflow: @ell; overflow: hidden; } // 参考值: .lh(@v:@lh) { line-height: @v; } .word-break { word-break: break-all; } // font======================================= .fz(@v:@fz;) { font-size: @v; } .fw(@v:@fw) { font-weight: @v; } // bg============================================================== .bg-c(@v:@primaryBgc;@c:@navTC) { background-color: @v; color: @c; } // 手指样式====================== .cur(@s:pointer;) { cursor: @s; } // 参考值: https://www.w3school.com.cn/cssref/pr_class_cursor.asp // margin================== .m(@t:@mt-v;@r:@mr-v;@b:@mb-v;@l:@ml-v;) { margin: @t @r @b @l; } .mf(@v:@mf-v) { margin: @v; } .mt(@v:@mt-v) { margin-top: @v; } .mb(@v:@mb-v) { margin-bottom: @v; } .ml(@v:@ml-v) { margin-left: @v; } .mr(@v:@mr-v) { margin-right: @v; } .mx(@v:@mx-v) { margin-left: @v; margin-right: @v; } .my(@v:@my-v) { margin-top: @v; margin-bottom: @v; } // padding================== .p(@t:@pt-v;@r:@pr-v;@b:@pb-v;@l:@pl-v;) { padding: @t @r @b @l; } .pf(@v:@pf-v) { padding: @v; } .pt(@v:@pt-v) { padding-top: @v; } .pb(@v:@pb-v) { padding-bottom: @v; } .pl(@v:@pl-v) { padding-left: @v; } .pr(@v:@pr-v) { padding-right: @v; } .px(@v:@px-v) { padding-left: @v; padding-right: @v; } .py(@v:@py-v) { padding-top: @v; padding-bottom: @v; } //布局============================ .wh(@w:100%;@h:100%;) { width: @w; height: @h; } .whl(@w:100%;@h:100%;@lh:inherit) { width: @w; height: @h; line-height: @lh; } .maxWh(@w:100%;@h:100%) { max-width: @w; max-height: @h; } .overf(@val:hidden;) { overflow: @val; } //transition======================== .gd(@t:@gdTime) { transition: all @t ease-in-out; } //position .fixed(@t:0;@r:0;@b:0;@l:0;) { position: fixed; top: @t; right: @r; bottom: @b; left: @l; } //float .float(@val:left;) { float: @val; } .clearfix { &:after { content: ""; display: block; clear: both; zoom: 1; } } //flex .flex-wrap(@jcVal:center;@aiVal:center;@fwVal:nowrap;@direction:initial) { display: flex; justify-content: @jcVal; align-items: @aiVal; flex-wrap: @fwVal; flex-direction: @direction; } .inl-flex(@jcVal:center;@aiVal:center;@fwVal:nowrap;@direction:initial) { display: inline-flex; justify-content: @jcVal; align-items: @aiVal; flex-wrap: @fwVal; flex-direction: @direction; } .inl-flex(@j:initial;@a:initial;@w:nowrap;@d:initial;) { display: inline-flex; justify-content: @j; align-items: @a; flex-wrap: @w; flex-direction: @d; } .flex-items(@flexBasis:0%;@flexGrow:1;@flexShrink:1;@alignSelf:initial) { flex-grow: @flexGrow; flex-shrink: @flexShrink; flex-basis: @flexBasis; align-self: @alignSelf; } // animated============================================================== @keyframes fadeInRight { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInRight { animation-name: fadeInRight; }