1. /*------------------------------------
    2. ├   布局                              ┆
    3. └------------------------------------*/
    4. // 盒子宽高
    5. .size(@w, @h) {
    6.   width: @w;
    7.   height: @h;
    8. }
    9. // 最小尺寸, 兼容IE6
    10. .min-width(@min-w) {
    11.   min-width: @min-w;
    12.   _width: @min-w;
    13. }
    14. .min-height(@min-h) {
    15.   min-height: @min-h;
    16.   _height: @min-h;
    17. }
    18. // 内联块级元素, 兼容IE6
    19. .dib() {
    20.   display: inline-block;
    21.   *display: inline;
    22.   *zoom: 1;
    23. }
    24. // 固定定位, 兼容IE6
    25. .fixed() {
    26.   position: fixed;
    27.   _position: absolute;
    28.   *zoom: 1;
    29. }
    30. // 统一盒模型
    31. .border-box() {
    32.   *,
    33.   *:after,
    34.   *:before {
    35.     -webkit-box-sizing: border-box;
    36.     -moz-box-sizing: border-box;
    37.     box-sizing: border-box;
    38.   }
    39. }
    40. // 文字图片居中
    41. .center(text-x) {
    42.   text-align: center;
    43. }
    44. .center(text-y) {
    45.   display: table-cell;
    46.   vertical-align: middle;
    47. }
    48. // 块级元素水平居中
    49. .center(auto-x) {
    50.   display: block;
    51.   margin-left: auto;
    52.   margin-right: auto;
    53. }
    54. // 居中, 不确定尺寸, 不兼容 IE6
    55. .center(unknown) {
    56.   position: absolute;
    57.   top: 0;
    58.   left: 0;
    59.   right: 0;
    60.   bottom: 0;
    61.   margin: auto;
    62. }
    63. .center(unknown-x) {
    64.   position: absolute;
    65.   left: 0;
    66.   right: 0;
    67.   margin-left: auto;
    68.   margin-right: auto;
    69. }
    70. .center(unknown-y) {
    71.   position: absolute;
    72.   top: 0;
    73.   bottom: 0;
    74.   margin-top: auto;
    75.   margin-bottom: auto;
    76. }
    77. // 居中, 确定尺寸, 兼容 IE6
    78. .center(known, @w, @h) {
    79.   .size(@w, @h);
    80.   position: absolute;
    81.   top: 50%;
    82.   left: 50%;
    83.   margin-top: -(@w / 2);
    84.   margin-left: -(@h / 2);
    85. }
    86. .center(known-x, @w) {
    87.   width: @w;
    88.   position: absolute;
    89.   left: 50%;
    90.   margin-left: -(@h / 2);
    91. }
    92. .center(known-y, @h) {
    93.   height: @h;
    94.   position: absolute;
    95.   top: 50%;
    96.   margin-top: -(@w / 2);
    97. }
    98. // 居中, CSS3 平移方式, 兼容性不行
    99. .center(translate) {
    100.   position: absolute;
    101.   top: 50%;
    102.   left: 50%;
    103.   transform: translate(-50%, -50%);
    104. }
    105. // 居中, Flex 方式, 兼容性不行
    106. .center(flex) {
    107.   display: flex;
    108.   align-items: center;
    109.   justify-content: center;
    110. }
    111. // 多个子项布局
    112. .list(float, @w: 25%) {
    113.   float: left;
    114.   width: @w;
    115. }
    116. .list(inline, @w: 25%) {
    117.   .dib();
    118.   width: @w;
    119. }
    120. .list(flex) {
    121.   flex: 1;
    122. }
    123. // 遮罩层, 全屏遮罩、区域遮罩
    124. .over-screen(fixed) {
    125.   .fixed();
    126.   top: 0;
    127.   left: 0;
    128.   right: 0;
    129.   bottom: 0;
    130. }
    131. .over-screen(absolute) {
    132.   position: absolute;
    133.   top: 0;
    134.   left: 0;
    135.   right: 0;
    136.   bottom: 0;
    137. }
    138. // 容器宽高比固定
    139. // 100* 1/1 = 100%
    140. // 100* 3/4 = 75%
    141. .fixed-ratio(@padding-top: 100%) {
    142.   position: relative;
    143.   width: 100%;
    144.   height: 0;
    145.   padding-top: @padding-top;
    146.   img {
    147.     position: absolute;
    148.     top: 0;
    149.     left: 0;
    150.     width: 100%;
    151.     height: 100%;
    152.   }
    153. }
    154. // 扩展点击区域
    155. .extend-click() {
    156.   position: relative;
    157.   &:before {
    158.     content: '';
    159.     position: absolute;
    160.     top: -10px;
    161.     left: -10px;
    162.     right: -10px;
    163.     bottom: -10px;
    164.   }
    165. }
    166. // 定宽居中页面布局
    167. .layout-page(@width: 1200px) {
    168.   width: @width;
    169.   margin-left: auto;
    170.   margin-right: auto;
    171. }
    172. // 侧边栏
    173. // 主要区域：overflow: hidden; margin-left: xx; margin-right: xx;
    174. .sidebar(left, @width) {
    175.   position: absolute;
    176.   top: 0;
    177.   left: 0;
    178.   width: @width;
    179. }
    180. .sidebar(right, @width) {
    181.   position: absolute;
    182.   top: 0;
    183.   right: 0;
    184.   width: @width;
    185. }
    186. /*-------------------------------------
    187. ├   字体                              ┆
    188. └------------------------------------*/
    189. // 字体大小
    190. .fz(@fz) {
    191.   font-size: @fz;
    192. }
    193. // 字体大小与行高
    194. .fz(@fz, @lh) {
    195.   font-size: @fz;
    196.   line-height: @lh;
    197. }
    198. // 字体大小、行高、高度
    199. .fz(@fz, @h, @lh: @h) {
    200.   font-size: @fz;
    201.   height: @h;
    202.   line-height: @lh;
    203. }
    204. // 行高与高度
    205. .lh(@h, @lh: @h) {
    206.   height: @h;
    207.   line-height: @lh;
    208. }
    209. // 字体颜色, 包括链接与非链接
    210. .color(@color) {
    211.   color: @color;
    212. }
    213. // 字体颜色 + 自身 Hover
    214. .color(@color, @hovercolor) {
    215.   color: @color;
    216.   &:hover {
    217.     color: @hovercolor;
    218.   }
    219. }
    220. // 字体颜色 + 链接 Hover
    221. .color(@color, @acolor, @hovercolor) {
    222.   color: @color;
    223.   a {
    224.     color: @acolor;
    225.     &:hover {
    226.       color: @hovercolor;
    227.     }
    228.   }
    229. }
    230. // 正常字体样式
    231. .normal-font() {
    232.   font-weight: normal;
    233.   font-style: normal;
    234. }
    235. // 辅助性文字（灰色）
    236. .assist-font(@color: #b0b0b0, @fz: 14px) {
    237.   color: @color;
    238.   font-size: @fz;
    239. }
    240. // 禁止换行, 文本溢出省略号显示 (一行)
    241. .ellipsis() {
    242.   white-space: normal;
    243.   word-wrap: break-word;
    244.   word-break: break-all;
    245.   -o-text-overflow: ellipsis;
    246.   -ms-text-overflow: ellipsis;
    247.   text-overflow: ellipsis;
    248.   overflow: hidden;
    249. }
    250. // 文本溢出省略号显示 (多行)
    251. // 只支持 webkit 浏览器, 解决方案：高度 = 行高*行数
    252. // height: 90px; line-height: 30px; -webkit-line-clamp: 3;
    253. .ellipsis-mult(@n: 3) {
    254.   display: -webkit-box;
    255.   -webkit-box-orient: vertical;
    256.   -webkit-line-clamp: @n;
    257.   word-break: break-all;
    258.   -o-text-overflow: ellipsis;
    259.   -ms-text-overflow: ellipsis;
    260.   text-overflow: ellipsis;
    261.   overflow: hidden;
    262. }
    263. // 书写模式：牌匾从右至左水平单行排版效果、文笺从右至左、从上至下排版效果
    264. .retext(x) {
    265.   direction: rtl;
    266.   unicode-bidi: bidi-override;
    267. }
    268. .retext(y) {
    269.   writing-mode: tb-rl;
    270.   writing-mode: vertical-rl;
    271. }
    272. // 文字透明
    273. .transparent-text() {
    274.   font: 0/0 serif;
    275.   text-shadow: none;
    276.   color: transparent;
    277. }
    278. // 文字隐藏（常用于SEO优化）
    279. // <a href="" title="Logo SEO 优化 "><h1 class="logo">xx</h1></a>
    280. .hidden-text() {
    281.   text-indent: -9999px;
    282.   overflow: hidden;
    283.   text-align: left;
    284. }
    285. // 文字外发光效果
    286. .glow-text(@r: 10px, @color: gold) {
    287.   text-shadow: 0 0 @r @color;
    288. }
    289. /*-------------------------------------
    290. ├   图像                              ┆
    291. └------------------------------------*/
    292. // 用 max-width 来防止图片撑破容器
    293. .max-img() {
    294.   display: block;
    295.   max-width: 100%;
    296.   height: auto;
    297. }
    298. // 2x 3x 背景图片
    299. .bg-image(@url) {
    300.   background-image: url("@url + '@2x.png'");
    301.   @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    302.     background-image: url("@url + '@3x.png'");
    303.   }
    304. }
    305. // 全屏大图背景
    306. .fullscreen-bg(@url) {
    307.   width: 100vw;
    308.   height: 100vh;
    309.   background: url(@url) no-repeat 50% 50%;
    310.   background-size: cover;
    311. }
    312. // 滤镜: 将彩色照片显示为黑白照片
    313. .grayscale() {
    314.   filter: grayscale(100%);
    315.   -webkit-filter: grayscale(100%);
    316.   -moz-filter: grayscale(100%);
    317.   -ms-filter: grayscale(100%);
    318.   -o-filter: grayscale(100%);
    319. }
    320. /*-------------------------------------
    321. ├   动效                              ┆
    322. └------------------------------------*/
    323. // 链接默认无下划线，hover后有下划线的样式
    324. .hover-link() {
    325.   text-decoration: none;
    326.   &:hover {
    327.     text-decoration: underline;
    328.   }
    329. }
    330. // 将链接变成默认的文字样式
    331. .unstyled-link() {
    332.   color: inherit;
    333.   cursor: inherit;
    334.   text-decoration: inherit;
    335.   &:active,
    336.   &:focus {
    337.     outline: none;
    338.   }
    339. }
    340. // 盒子阴影
    341. // box-shadow: 水平阴影的位置, 垂直阴影的位置, 模糊距离, 阴影的大小, 阴影的颜色, 阴影开始方向（默认是从里往外，设置inset就是从外往里）;
    342. // box-shadow: h-shadow v-shadow blur spread color inset;
    343. .box-shadow() {
    344.   box-shadow: 0px 14px 26px 0px rgba(0, 0, 0, 0.1);
    345. }
    346. // 盒子 Hover
    347. .box-hover() {
    348.   // box-shadow: 0px 1px 2px 0px rgba(84, 107, 107, .4);
    349.   transition: all 0.2s linear;
    350.   &:hover {
    351.     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    352.     transform: translate3d(0, -2px, 0);
    353.   }
    354. }
    355. .box-hover2() {
    356.   transition: transform 0.5s ease;
    357.   &:hover {
    358.     transform: translateX(10px);
    359.   }
    360. }
    361. // 三维闪动 bug 处理
    362. .transform-fix() {
    363.   -webkit-backface-visibility: hidden;
    364.   -webkit-transform-style: preserve-3d;
    365. }
    366. // Animation
    367. .ani(@name, @time: 1s, @ease: ease-in-out, @fillmode: forwards) {
    368.   animation-name: @name;
    369.   animation-duration: @time;
    370.   animation-timing-function: @ease;
    371.   animation-fill-mode: @fillmode;
    372. }
    373. /*-------------------------------------
    374. ├   功能                              ┆
    375. └------------------------------------*/
    376. // 浮动, 兼容 IE6
    377. .fl() {
    378.   float: left;
    379.   *display: inline;
    380.   _display: inline;
    381. }
    382. .fr() {
    383.   float: right;
    384.   *display: inline;
    385.   _display: inline;
    386. }
    387. // 清除浮动
    388. .clearfix() {
    389.   *zoom: 1;
    390.   &:after {
    391.     display: block;
    392.     clear: both;
    393.     content: '';
    394.     visibility: hidden;
    395.     height: 0;
    396.   }
    397. }
    398. .clearfix(table) {
    399.   *zoom: 1;
    400.   &:before,
    401.   &:after {
    402.     content: ' ';
    403.     display: table;
    404.     clear: both;
    405.   }
    406. }
    407. // 禁止文本被选择
    408. .user-select() {
    409.   -webkit-user-select: none;
    410.   -moz-user-select: none;
    411.   -ms-user-select: none;
    412.   user-select: none;
    413. }
    414. // 隐藏鼠标手势
    415. .hide-cursor() {
    416.   cursor: none !important;
    417. }
    418. // 鼠标禁用样式，但仍然可以触发事件
    419. // <input type="text" disabled="disabled">
    420. .disabled() {
    421.   cursor: not-allowed;
    422. }
    423. // 禁用元素事件
    424. // 1. 阻止任何点击动作的执行
    425. // 2. 使链接显示为默认光标(cursor:default)
    426. // 3. 阻止触发hover和active状态
    427. // 4. 阻止JavaScript点击事件的触发
    428. .pointer-events() {
    429.   pointer-events: none;
    430. }
    431. // 模糊
    432. .blur(@blur: 10px) {
    433.   filter: blur(@blur);
    434.   -webkit-filter: blur(@blur);
    435.   -moz-filter: blur(@blur);
    436.   -o-filter: blur(@blur);
    437.   -ms-filter: blur(@blur);
    438.   filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='@{blur}');
    439.   *zoom: 1;
    440. }
    441. // 透明度, 兼容 IE8
    442. .opacity(@opacity: 20) {
    443.   opacity: @opacity / 100;
    444.   filter: alpha(opacity= @opacity);
    445. }
    446. // 用伪类来显示打印时 a 标签的链接
    447. .print-link() {
    448.   @media print {
    449.     a[href]:after {
    450.       content: ' (' attr(href) ') ';
    451.     }
    452.   }
    453. }
    454. // 隔行换色
    455. .zebra-lists(odd, @color) {
    456.   &.odd {
    457.     > li:nth-child(odd) {
    458.       background-color: @color;
    459.     }
    460.   }
    461. }
    462. .zebra-lists(even, @color) {
    463.   &.even {
    464.     > li:nth-child(even) {
    465.       background: green;
    466.     }
    467.   }
    468. }
    469. // 首字下沉
    470. .first-letter(@font-size: 6em) {
    471.   &::first-letter {
    472.     float: left;
    473.     line-height: 1;
    474.     font-size: @font-size;
    475.   }
    476. }
    477. // 特殊标记段落第一行
    478. .first-line() {
    479.   &::first-line {
    480.     color: red;
    481.   }
    482. }
    483. // 美化选中文本
    484. .beauty-select() {
    485.   &::selection {
    486.     color: #fff;
    487.     background-color: #6bc30d;
    488.     text-shadow: none;
    489.   }
    490. }
    491. // 美化占位符 placeholder 样式
    492. .beauty-placeholder(@fz, @color: #999, @align: left) {
    493.   &:-moz-placeholder {
    494.     font-size: @fz;
    495.     color: @color;
    496.     text-align: @align;
    497.   }
    498.   &:-ms-input-placeholder {
    499.     font-size: @fz;
    500.     color: @color;
    501.     text-align: @align;
    502.   }
    503.   &::-webkit-input-placeholder {
    504.     font-size: @fz;
    505.     color: @color;
    506.     text-align: @align;
    507.   }
    508. }
    509. // 美化占位符 placeholder 样式（自定义属性和值）
    510. .beauty-placeholder(custom, @property, @value) {
    511.   &:-moz-placeholder {
    512.     @{property}: @value;
    513.   }
    514.   &:-ms-input-placeholder {
    515.     @{property}: @value;
    516.   }
    517.   &::-webkit-input-placeholder {
    518.     @{property}: @value;
    519.   }
    520. }
    521. /*-------------------------------------
    522. ├   图形                              ┆
    523. └------------------------------------*/
    524. // 三角形
    525. .triangle(@width: 4px,@color: #000) {
    526.   display: inline-block;
    527.   width: 0;
    528.   height: 0;
    529.   vertical-align: middle;
    530.   border-top: @width solid @color;
    531.   border-left: @width solid transparent;
    532.   border-right: @width solid transparent;
    533. }
    534. // 三角形箭头气泡效果, IE6-7 无表现
    535. .arrow(top, @w: 10px, @color, @x: 50%) {
    536.   position: relative;
    537.   &:before {
    538.     position: absolute;
    539.     bottom: 100%;
    540.     left: @x;
    541.     content: ' ';
    542.     height: 0;
    543.     width: 0;
    544.     pointer-events: none;
    545.     border-style: solid;
    546.     border-color: transparent;
    547.     border-bottom-color: @color;
    548.     border-width: unit(@w, px);
    549.     @margin: -@w;
    550.     margin-left: unit(@margin, px);
    551.   }
    552. }
    553. .arrow(right, @w: 10px, @color, @y: 50%) {
    554.   position: relative;
    555.   &:before {
    556.     position: absolute;
    557.     left: 100%;
    558.     top: @y;
    559.     content: ' ';
    560.     height: 0;
    561.     width: 0;
    562.     pointer-events: none;
    563.     border-style: solid;
    564.     border-color: transparent;
    565.     border-left-color: @color;
    566.     border-width: unit(@w, px);
    567.     @margin: -@w;
    568.     margin-top: unit(@margin, px);
    569.   }
    570. }
    571. .arrow(bottom, @w: 10px, @color, @x: 50%) {
    572.   position: relative;
    573.   &:before {
    574.     position: absolute;
    575.     top: 100%;
    576.     left: @x;
    577.     content: ' ';
    578.     height: 0;
    579.     width: 0;
    580.     pointer-events: none;
    581.     border-style: solid;
    582.     border-color: transparent;
    583.     border-top-color: @color;
    584.     border-width: unit(@w, px);
    585.     @margin: -@w;
    586.     margin-left: unit(@margin, px);
    587.   }
    588. }
    589. .arrow(left, @w: 10px, @color, @y: 50%) {
    590.   position: relative;
    591.   &:before {
    592.     position: absolute;
    593.     right: 100%;
    594.     top: @y;
    595.     content: ' ';
    596.     height: 0;
    597.     width: 0;
    598.     pointer-events: none;
    599.     border-style: solid;
    600.     border-color: transparent;
    601.     border-right-color: @color;
    602.     border-width: unit(@w, px);
    603.     @margin: -@w;
    604.     margin-top: unit(@margin, px);
    605.   }
    606. }
    607. // 三角形箭头气泡效果, 带边框
    608. .arrow-with-border(top, @w: 10px, @color, @border-w: 1px, @border-color, @x: 50%) {
    609.   position: relative;
    610.   &:before,
    611.   &:after {
    612.     bottom: 100%;
    613.     left: @x;
    614.     content: ' ';
    615.     height: 0;
    616.     width: 0;
    617.     position: absolute;
    618.     pointer-events: none;
    619.     border-style: solid;
    620.     border-color: transparent;
    621.   }
    622.   &:after {
    623.     border-bottom-color: @color;
    624.     border-width: unit(@w, px);
    625.     @margin: -@w;
    626.     margin-left: unit(@margin, px);
    627.   }
    628.   &:before {
    629.     border-bottom-color: @border-color;
    630.     @arrbo: @w+ @border-w;
    631.     border-width: unit(@arrbo, px);
    632.     @margin-bo: -@arrbo;
    633.     margin-left: unit(@margin-bo, px);
    634.   }
    635. }
    636. .arrow-with-border(bottom, @w: 10px, @color, @border-w: 1px, @border-color, @x: 50%) {
    637.   position: relative;
    638.   &:before,
    639.   &:after {
    640.     top: 100%;
    641.     left: @x;
    642.     content: ' ';
    643.     height: 0;
    644.     width: 0;
    645.     position: absolute;
    646.     pointer-events: none;
    647.     border-style: solid;
    648.     border-color: transparent;
    649.   }
    650.   &:after {
    651.     border-top-color: @color;
    652.     border-width: unit(@w, px);
    653.     @margin: -@w;
    654.     margin-left: unit(@margin, px);
    655.   }
    656.   &:before {
    657.     border-top-color: @border-color;
    658.     @arrbo: @w+ @border-w;
    659.     border-width: unit(@arrbo, px);
    660.     @margin-bo: -@arrbo;
    661.     margin-left: unit(@margin-bo, px);
    662.   }
    663. }
    664. .arrow-with-border(left, @w: 10px, @color, @border-w: 1px, @border-color, @y: 50%) {
    665.   position: relative;
    666.   &:before,
    667.   &:after {
    668.     top: @y;
    669.     right: 100%;
    670.     content: ' ';
    671.     height: 0;
    672.     width: 0;
    673.     position: absolute;
    674.     pointer-events: none;
    675.     border-style: solid;
    676.     border-color: transparent;
    677.   }
    678.   &:after {
    679.     border-right-color: @color;
    680.     border-width: unit(@w, px);
    681.     @margin: -@w;
    682.     margin-top: unit(@margin, px);
    683.   }
    684.   &:before {
    685.     border-right-color: @border-color;
    686.     @arrbo: @w+ @border-w;
    687.     border-width: unit(@arrbo, px);
    688.     @margin-bo: -@arrbo;
    689.     margin-top: unit(@margin-bo, px);
    690.   }
    691. }
    692. .arrow-with-border(right, @w: 10px, @color, @border-w: 1px, @border-color, @y: 50%) {
    693.   position: relative;
    694.   &:before,
    695.   &:after {
    696.     top: @y;
    697.     left: 100%;
    698.     content: ' ';
    699.     height: 0;
    700.     width: 0;
    701.     position: absolute;
    702.     pointer-events: none;
    703.     border-style: solid;
    704.     border-color: transparent;
    705.   }
    706.   &:after {
    707.     border-left-color: @color;
    708.     border-width: unit(@w, px);
    709.     @margin: -@w;
    710.     margin-top: unit(@margin, px);
    711.   }
    712.   &:before {
    713.     border-left-color: @border-color;
    714.     @arrbo: @w+ @border-w;
    715.     border-width: unit(@arrbo, px);
    716.     @margin-bo: -@arrbo;
    717.     margin-top: unit(@margin-bo, px);
    718.   }
    719. }
    720. /*-------------------------------------
    721. ├   组件                              ┆
    722. └------------------------------------*/
    723. // 吸顶导航
    724. .fix-header(@h: 70px) {
    725.   .fixed();
    726.   top: 0;
    727.   left: 0;
    728.   width: 100%;
    729.   height: @h;
    730.   z-index: 1000;
    731.   // background-color: rgba(256, 256, 256, .92);
    732.   // border-bottom: 1px solid rgba(7, 17, 27, 0.1);
    733.   // box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
    734. }
    735. // 吸底导航
    736. .fix-header(@h: 70px) {
    737.   .fixed();
    738.   left: 0;
    739.   bottom: 0;
    740.   width: 100%;
    741.   height: @h;
    742.   z-index: 1000;
    743. }
    744. // 输入框
    745. .input-text() {
    746.   display: block;
    747.   width: 100%;
    748.   padding: 4px 8px;
    749.   font-size: 14px;
    750.   line-height: 1.42858;
    751.   color: #333;
    752.   border: 1px solid #ddd;
    753.   background-color: #fff;
    754.   border-radius: 3px;
    755. }
    756. // 分割线
    757. // <span class="separator">|/-</span>
    758. .separator() {
    759.   margin: 0 10px;
    760.   color: #999;
    761.   font-size: 14px;
    762. }
    763. // 分割线 / (面包屑导航)
    764. .separator2() {
    765.   &:before {
    766.     padding: 0 5px;
    767.     color: #ccc;
    768.     content: '/\00a0';
    769.   }
    770. }
    771. // <hr class="hr">
    772. // 支付宝：我也是有底线的
    773. .hr() {
    774.   height: 1px;
    775.   margin: 10px 0;
    776.   border: 0;
    777.   clear: both;
    778.   background-color: #e2e2e2;
    779. }
    780. // 改装的 fieldset
    781. // <fieldset><legend>返璞归真</legend></fieldset>
    782. .fieldset() {
    783.   border-color: #d2d2d2;
    784.   border-width: 1px 0 0;
    785.   border-style: solid;
    786.   legend {
    787.     padding: 0 20px;
    788.     text-align: center;
    789.     font-size: 20px;
    790.     font-weight: 300;
    791.   }
    792. }
    793. // 引用区块（模仿 Layui）
    794. // <div class="blockquote">Lorem ipsum dolor sit amet.</div>
    795. .blockquote() {
    796.   margin-bottom: 10px;
    797.   padding: 15px;
    798.   line-height: 22px;
    799.   border-left: 5px solid #009688;
    800.   border-radius: 0 2px 2px 0;
    801.   background-color: #f2f2f2;
    802. }
    803. // 徽章 (椭圆、小圆点)
    804. // <span class="badge">10</span>
    805. .badge(...) {
    806.   position: relative;
    807.   display: inline-block;
    808.   font-size: 12px;
    809.   color: #fff;
    810.   background-color: #ff5722;
    811. }
    812. .badge(ellipse) {
    813.   min-width: 8px;
    814.   height: 18px;
    815.   padding: 2px 6px;
    816.   text-align: center;
    817.   line-height: 18px;
    818.   border-radius: 9px;
    819. }
    820. .badge(dot) {
    821.   width: 8px;
    822.   height: 8px;
    823.   border-radius: 50%;
    824. }
    825. // 关闭按钮
    826. // <button class="close" type="button"><span>&times;</span></button>
    827. .close() {
    828.   position: relative;
    829.   -webkit-appearance: none;
    830.   padding: 0;
    831.   cursor: pointer;
    832.   background: 0 0;
    833.   border: 0;
    834.   font-size: 20px;
    835.   font-weight: 700;
    836.   line-height: 1;
    837.   color: #000;
    838.   text-shadow: 0 1px 0 #fff;
    839.   filter: alpha(opacity=20);
    840.   opacity: 0.2;
    841.   &:hover {
    842.     color: #000;
    843.     text-decoration: none;
    844.     cursor: pointer;
    845.     filter: alpha(opacity=50);
    846.     opacity: 0.5;
    847.   }
    848.   &:before {
    849.     content: '';
    850.     position: absolute;
    851.     top: -10px;
    852.     left: -10px;
    853.     right: -10px;
    854.     bottom: -10px;
    855.   }
    856. }
    857. // 1 像素边框问题
    858. .onepx(...) {
    859.   position: relative;
    860.   &:after {
    861.     content: '';
    862.     display: block;
    863.     position: absolute;
    864.     left: 0;
    865.     width: 100%;
    866.     border-top: 1px solid rgba(7, 17, 27, 0.1);
    867.     transform: scaleY(0.5);
    868.   }
    869. }
    870. .onepx(top) {
    871.   &:after {
    872.     top: 0;
    873.   }
    874. }
    875. .onepx(bottom) {
    876.   &:after {
    877.     bottom: 0;
    878.   }
    879. }
    880. .onepx-easy(top, @color: #ccc) {
    881.   box-shadow: inset 0px -1px 1px -1px @color;
    882. }
    883. .onepx-easy(bottom, @color: #ccc) {
    884.   box-shadow: inset 0px 1px 1px -1px @color;
    885. }