🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP →
luss - npm Package Compare versions
| a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}h1,h2,h3,h4,h5,h6{font-weight:700}article,aside,details,figcaption,figure,footer,header,menu,nav,section{display:block}body{line-height:1;font-size:12px}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}em,i{font-style:normal}a{text-decoration:none}.dib{display:inline-block}.db{display:block}.di{display:inline}.noselect{user-select:none}.ff-yh{font-family:"\5FAE\8F6F\96C5\9ED1","Microsoft YaHei","\9ED1\4F53","\65B0\5B8B\4F53"}.ff-st{font-family:"\5B8B\4F53",SimSun}.ff-xst{font-family:"\65B0\5B8B\4F53",NSimSun}.ff-ht{font-family:"\9ED1\4F53",SimHei}.ff-zh{font-family:"Microsoft JhengHei"}.txcut{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.noselect{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-khtml-user-select:none;user-select:none}.fillin{left:0;top:0;right:0;bottom:0}.clear{font-size:0;height:0;width:0;clear:both}.center{margin-left:auto;margin-right:auto}.fs-reset{font-size:0}.fs-reset>*{font-size:1rem}.flex{display:flex;align-items:center;justify-content:flex-start}.flex.inline{display:inline-flex}.flex.inline.fix{margin-top:-.14em}.flex.column{flex-direction:column}.flex.jc-start{justify-content:flex-start}.flex.jc-center{justify-content:center}.flex.jc-end{justify-content:flex-end}.flex.jc-between{justify-content:space-between}.flex.jc-around{justify-content:space-around}.flex.between{justify-content:space-between}.flex.around{justify-content:space-around}.flex.ai-start{align-items:flex-start}.flex.ai-center{align-items:center}.flex.ai-end{align-items:flex-end}.flex.ai-stretch{align-items:stretch}.flex.ac-start{align-content:flex-start}.flex.ac-center{align-content:center}.flex.ac-end{align-content:flex-end}.flex.ac-between{align-content:space-between}.flex.ac-around{align-content:space-around}.flex.ac-stretch{align-content:stretch}.flex.wrap{flex-wrap:wrap}.flex.wrap-rev{flex-wrap:wrap-reverse}.flex.wrap-no{flex-wrap:nowrap}.flex.wrap-in{flex-wrap:inherit}.flex.wrap-un{flex-wrap:unset}.as-start{align-self:flex-start}.as-center{align-self:center}.as-end{align-self:flex-end}.as-stretch{align-self:stretch}.fx1{flex:1}.fx2{flex:2}.fx3{flex:3}.fx4{flex:4}.fx5{flex:5}.of.h{overflow:hidden}.of.ya{overflow-y:auto}.of.xa{overflow-x:auto} |
| /** | ||
| 参照js的String.prototype.padStrarts | ||
| @result:padStarts(foo, 5)[@__]; | ||
| 结果:00foo | ||
| */ | ||
| /** | ||
| 针对浮点数优化的padStarts | ||
| @result:padStarts(foo, 5)[@__]; | ||
| 结果:00foo | ||
| */ | ||
| /** | ||
| * 多个range使用 | ||
| .eachRange(range(1,5) range(10,15), { | ||
| hs:@value; | ||
| }) | ||
| */ | ||
| html, | ||
| body, | ||
| div, | ||
| span, | ||
| applet, | ||
| object, | ||
| iframe, | ||
| h1, | ||
| h2, | ||
| h3, | ||
| h4, | ||
| h5, | ||
| h6, | ||
| p, | ||
| blockquote, | ||
| pre, | ||
| a, | ||
| abbr, | ||
| acronym, | ||
| address, | ||
| big, | ||
| cite, | ||
| code, | ||
| del, | ||
| dfn, | ||
| em, | ||
| img, | ||
| ins, | ||
| kbd, | ||
| q, | ||
| s, | ||
| samp, | ||
| small, | ||
| strike, | ||
| strong, | ||
| sub, | ||
| sup, | ||
| tt, | ||
| var, | ||
| b, | ||
| u, | ||
| i, | ||
| center, | ||
| dl, | ||
| dt, | ||
| dd, | ||
| ol, | ||
| ul, | ||
| li, | ||
| fieldset, | ||
| form, | ||
| label, | ||
| legend, | ||
| table, | ||
| caption, | ||
| tbody, | ||
| tfoot, | ||
| thead, | ||
| tr, | ||
| th, | ||
| td, | ||
| article, | ||
| aside, | ||
| canvas, | ||
| details, | ||
| embed, | ||
| figure, | ||
| figcaption, | ||
| footer, | ||
| header, | ||
| menu, | ||
| nav, | ||
| output, | ||
| ruby, | ||
| section, | ||
| summary, | ||
| time, | ||
| mark, | ||
| audio, | ||
| video { | ||
| margin: 0; | ||
| padding: 0; | ||
| border: 0; | ||
| font-size: 100%; | ||
| vertical-align: baseline; | ||
| } | ||
| h1, | ||
| h2, | ||
| h3, | ||
| h4, | ||
| h5, | ||
| h6 { | ||
| font-weight: 700; | ||
| } | ||
| /* HTML5 display-role reset for older browsers */ | ||
| article, | ||
| aside, | ||
| details, | ||
| figcaption, | ||
| figure, | ||
| footer, | ||
| header, | ||
| menu, | ||
| nav, | ||
| section { | ||
| display: block; | ||
| } | ||
| body { | ||
| line-height: 1; | ||
| font-size: 12px; | ||
| } | ||
| ol, | ||
| ul { | ||
| list-style: none; | ||
| } | ||
| blockquote, | ||
| q { | ||
| quotes: none; | ||
| } | ||
| blockquote:before, | ||
| blockquote:after, | ||
| q:before, | ||
| q:after { | ||
| content: ''; | ||
| content: none; | ||
| } | ||
| table { | ||
| border-collapse: collapse; | ||
| border-spacing: 0; | ||
| } | ||
| i, | ||
| em { | ||
| font-style: normal; | ||
| } | ||
| a { | ||
| text-decoration: none; | ||
| } | ||
| .dib { | ||
| display: inline-block; | ||
| } | ||
| .db { | ||
| display: block; | ||
| } | ||
| .di { | ||
| display: inline; | ||
| } | ||
| .noselect { | ||
| user-select: none; | ||
| } | ||
| .ff-yh { | ||
| font-family: "\5FAE\8F6F\96C5\9ED1", "Microsoft YaHei", "\9ED1\4F53", "\65B0\5B8B\4F53"; | ||
| } | ||
| .ff-st { | ||
| font-family: "\5B8B\4F53", "SimSun"; | ||
| } | ||
| .ff-xst { | ||
| font-family: "\65B0\5B8B\4F53", "NSimSun"; | ||
| } | ||
| .ff-ht { | ||
| font-family: "\9ED1\4F53", "SimHei"; | ||
| } | ||
| .ff-zh { | ||
| font-family: "Microsoft JhengHei"; | ||
| } | ||
| .txcut { | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| white-space: nowrap; | ||
| } | ||
| .noselect { | ||
| -moz-user-select: none; | ||
| -webkit-user-select: none; | ||
| -ms-user-select: none; | ||
| -khtml-user-select: none; | ||
| user-select: none; | ||
| } | ||
| .fillin { | ||
| left: 0; | ||
| top: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| } | ||
| .clear { | ||
| font-size: 0; | ||
| height: 0; | ||
| width: 0; | ||
| clear: both; | ||
| } | ||
| .center { | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| } | ||
| .fs-reset { | ||
| font-size: 0; | ||
| } | ||
| .fs-reset > * { | ||
| font-size: 1rem; | ||
| } | ||
| .flex { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: flex-start; | ||
| } | ||
| .flex.inline { | ||
| display: inline-flex; | ||
| } | ||
| .flex.inline.fix { | ||
| margin-top: -0.14em; | ||
| } | ||
| .flex.column { | ||
| flex-direction: column; | ||
| } | ||
| .flex.jc-start { | ||
| justify-content: flex-start; | ||
| } | ||
| .flex.jc-center { | ||
| justify-content: center; | ||
| } | ||
| .flex.jc-end { | ||
| justify-content: flex-end; | ||
| } | ||
| .flex.jc-between { | ||
| justify-content: space-between; | ||
| } | ||
| .flex.jc-around { | ||
| justify-content: space-around; | ||
| } | ||
| .flex.between { | ||
| justify-content: space-between; | ||
| } | ||
| .flex.around { | ||
| justify-content: space-around; | ||
| } | ||
| .flex.ai-start { | ||
| align-items: flex-start; | ||
| } | ||
| .flex.ai-center { | ||
| align-items: center; | ||
| } | ||
| .flex.ai-end { | ||
| align-items: flex-end; | ||
| } | ||
| .flex.ai-stretch { | ||
| align-items: stretch; | ||
| } | ||
| .flex.ac-start { | ||
| align-content: flex-start; | ||
| } | ||
| .flex.ac-center { | ||
| align-content: center; | ||
| } | ||
| .flex.ac-end { | ||
| align-content: flex-end; | ||
| } | ||
| .flex.ac-between { | ||
| align-content: space-between; | ||
| } | ||
| .flex.ac-around { | ||
| align-content: space-around; | ||
| } | ||
| .flex.ac-stretch { | ||
| align-content: stretch; | ||
| } | ||
| .flex.wrap { | ||
| flex-wrap: wrap; | ||
| } | ||
| .flex.wrap-rev { | ||
| flex-wrap: wrap-reverse; | ||
| } | ||
| .flex.wrap-no { | ||
| flex-wrap: nowrap; | ||
| } | ||
| .flex.wrap-in { | ||
| flex-wrap: inherit; | ||
| } | ||
| .flex.wrap-un { | ||
| flex-wrap: unset; | ||
| } | ||
| .as-start { | ||
| align-self: flex-start; | ||
| } | ||
| .as-center { | ||
| align-self: center; | ||
| } | ||
| .as-end { | ||
| align-self: flex-end; | ||
| } | ||
| .as-stretch { | ||
| align-self: stretch; | ||
| } | ||
| .fx1 { | ||
| flex: 1; | ||
| } | ||
| .fx2 { | ||
| flex: 2; | ||
| } | ||
| .fx3 { | ||
| flex: 3; | ||
| } | ||
| .fx4 { | ||
| flex: 4; | ||
| } | ||
| .fx5 { | ||
| flex: 5; | ||
| } | ||
| .of.h { | ||
| overflow: hidden; | ||
| } | ||
| .of.ya { | ||
| overflow-y: auto; | ||
| } | ||
| .of.xa { | ||
| overflow-x: auto; | ||
| } |
| a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}h1,h2,h3,h4,h5,h6{font-weight:700}article,aside,details,figcaption,figure,footer,header,menu,nav,section{display:block}body{line-height:1;font-size:12px}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}em,i{font-style:normal}a{text-decoration:none} |
| /** | ||
| 参照js的String.prototype.padStrarts | ||
| @result:padStarts(foo, 5)[@__]; | ||
| 结果:00foo | ||
| */ | ||
| /** | ||
| 针对浮点数优化的padStarts | ||
| @result:padStarts(foo, 5)[@__]; | ||
| 结果:00foo | ||
| */ | ||
| /** | ||
| * 多个range使用 | ||
| .eachRange(range(1,5) range(10,15), { | ||
| hs:@value; | ||
| }) | ||
| */ | ||
| html, | ||
| body, | ||
| div, | ||
| span, | ||
| applet, | ||
| object, | ||
| iframe, | ||
| h1, | ||
| h2, | ||
| h3, | ||
| h4, | ||
| h5, | ||
| h6, | ||
| p, | ||
| blockquote, | ||
| pre, | ||
| a, | ||
| abbr, | ||
| acronym, | ||
| address, | ||
| big, | ||
| cite, | ||
| code, | ||
| del, | ||
| dfn, | ||
| em, | ||
| img, | ||
| ins, | ||
| kbd, | ||
| q, | ||
| s, | ||
| samp, | ||
| small, | ||
| strike, | ||
| strong, | ||
| sub, | ||
| sup, | ||
| tt, | ||
| var, | ||
| b, | ||
| u, | ||
| i, | ||
| center, | ||
| dl, | ||
| dt, | ||
| dd, | ||
| ol, | ||
| ul, | ||
| li, | ||
| fieldset, | ||
| form, | ||
| label, | ||
| legend, | ||
| table, | ||
| caption, | ||
| tbody, | ||
| tfoot, | ||
| thead, | ||
| tr, | ||
| th, | ||
| td, | ||
| article, | ||
| aside, | ||
| canvas, | ||
| details, | ||
| embed, | ||
| figure, | ||
| figcaption, | ||
| footer, | ||
| header, | ||
| menu, | ||
| nav, | ||
| output, | ||
| ruby, | ||
| section, | ||
| summary, | ||
| time, | ||
| mark, | ||
| audio, | ||
| video { | ||
| margin: 0; | ||
| padding: 0; | ||
| border: 0; | ||
| font-size: 100%; | ||
| vertical-align: baseline; | ||
| } | ||
| h1, | ||
| h2, | ||
| h3, | ||
| h4, | ||
| h5, | ||
| h6 { | ||
| font-weight: 700; | ||
| } | ||
| /* HTML5 display-role reset for older browsers */ | ||
| article, | ||
| aside, | ||
| details, | ||
| figcaption, | ||
| figure, | ||
| footer, | ||
| header, | ||
| menu, | ||
| nav, | ||
| section { | ||
| display: block; | ||
| } | ||
| body { | ||
| line-height: 1; | ||
| font-size: 12px; | ||
| } | ||
| ol, | ||
| ul { | ||
| list-style: none; | ||
| } | ||
| blockquote, | ||
| q { | ||
| quotes: none; | ||
| } | ||
| blockquote:before, | ||
| blockquote:after, | ||
| q:before, | ||
| q:after { | ||
| content: ''; | ||
| content: none; | ||
| } | ||
| table { | ||
| border-collapse: collapse; | ||
| border-spacing: 0; | ||
| } | ||
| i, | ||
| em { | ||
| font-style: normal; | ||
| } | ||
| a { | ||
| text-decoration: none; | ||
| } |
| declare const boxRule: [RegExp, Function]; | ||
| declare const sizeRule: (RegExp | ((gp: string[], conf: any) => any))[]; | ||
| declare const colorRule: (RegExp | ((gp: string[], conf: any) => any))[]; | ||
| /** | ||
| * 解析pug中的unocss定义 | ||
| * @param pugImporter {} 即import("pug") | ||
| */ | ||
| declare const extractorPugFactory: (pugImporter: Promise<any>) => () => { | ||
| name: string; | ||
| order: number; | ||
| extract(ctx: any): Promise<undefined>; | ||
| }; | ||
| declare const rules: ([RegExp, Function] | (RegExp | ((gp: string[], conf: any) => any))[])[]; | ||
| export { sizeRule, boxRule, colorRule, rules, extractorPugFactory, }; | ||
| /** | ||
| import {rules, extractorPugFactory} from "luss/dist/unocss-luss"; | ||
| const extractorPug = extractorPugFactory(import("pug")); | ||
| import {extractorSplit, presetUno} from 'unocss' | ||
| Unocss({ | ||
| extractors: [ | ||
| extractorPug(), | ||
| extractorSplit, | ||
| ], | ||
| rules: [ | ||
| boxRule, sizeRule, | ||
| ], | ||
| }) | ||
| */ |
| "use strict"; | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| exports.extractorPugFactory = exports.rules = exports.colorRule = exports.boxRule = exports.sizeRule = void 0; | ||
| // 媒体查询 | ||
| const breakPoints = [640, 768, 1024, 1280, 1536, 1920]; | ||
| const mediaQueryDic = { | ||
| "xs": `(max-width: ${breakPoints[0]}px)`, | ||
| "sm": `(min-width: ${breakPoints[0]}px) and (max-width: ${breakPoints[1]}px)`, | ||
| "md": `(min-width: ${breakPoints[1]}px) and (max-width: ${breakPoints[2]}px)`, | ||
| "lg": `(min-width: ${breakPoints[2]}px) and (max-width: ${breakPoints[3]}px)`, | ||
| "xl": `(min-width: ${breakPoints[3]}px) and (max-width: ${breakPoints[4]}px)`, | ||
| "2xl": `(min-width: ${breakPoints[4]}px) and (max-width: ${breakPoints[5]}px)`, | ||
| "3xl": `(min-width: ${breakPoints[5]}px)`, | ||
| }; | ||
| // 伪类 | ||
| const preonduDic = { | ||
| "ho": "$selector$:hover", | ||
| "be": "$selector$::before", | ||
| "af": "$selector$::after", | ||
| "son": "$selector$ > *", | ||
| "deep-son": "$selector$ *", | ||
| }; | ||
| // 媒体查询和伪类 | ||
| const mediaQueryAndPreonduList = Object.keys({ | ||
| ...mediaQueryDic, | ||
| ...preonduDic, | ||
| }); | ||
| const boxModeDic = { | ||
| m: "margin", | ||
| p: "padding", | ||
| b: "border", | ||
| o: "outline", | ||
| }; | ||
| const directBaseDic = { | ||
| t: "top", | ||
| r: "right", | ||
| b: "bottom", | ||
| l: "left", | ||
| }; | ||
| const directPlusDic = { | ||
| ...directBaseDic, | ||
| h: "left,right", | ||
| x: "left,right", | ||
| v: "top,bottom", | ||
| y: "top,bottom", | ||
| }; | ||
| const sizeValueDic = { | ||
| ...directBaseDic, | ||
| w: "width", | ||
| h: "height", | ||
| s: "width,height", | ||
| lh: "line-height", | ||
| lhh: "line-height, height", | ||
| f: "font-size", | ||
| fz: "font-size", | ||
| }; | ||
| const unitDic = { | ||
| x: "px", | ||
| px: "px", | ||
| p: "%", | ||
| e: "em", | ||
| r: "rem", | ||
| "vh": "vh", | ||
| "vw": "vw", | ||
| }; | ||
| const unitList = "xp".split(""); | ||
| const boxModelKeyList = Object.keys(boxModeDic); | ||
| const directionKeyList = Object.keys(directPlusDic); | ||
| // 媒体查询和伪类正则 | ||
| const mediaQueryAndPreonduReg = `(?:(${mediaQueryAndPreonduList.join("|")})_)?`; | ||
| // 数字和单位的正则 | ||
| const numberAndUnitRegString = `((\\d+(-\\d+)?)|a)` + | ||
| `(${unitList.join("|")})?` + | ||
| "(i)?"; | ||
| const keys = Object.keys; | ||
| const valueParser = function (value, isNega = false) { | ||
| if (value == "a" || value == "auto") { | ||
| return "auto"; | ||
| } | ||
| if (/^0/.test(value)) { | ||
| value = value.replace(/^0/, "0."); | ||
| } | ||
| value = value.replace(/-/, "."); | ||
| const ratio = isNega ? -1 : 1; | ||
| value = parseFloat(value) * ratio + ""; | ||
| return value; | ||
| }; | ||
| const beforeRuleOutput = (conf, matched, originRet) => { | ||
| let { rawSelector, currentSelector, variantHandlers, theme } = conf; | ||
| let { prefix } = matched; | ||
| // 媒体查询 | ||
| const mqCondiString = mediaQueryDic[prefix] || ""; | ||
| // 伪类 | ||
| const preonduString = preonduDic[prefix] || ""; | ||
| // 媒体查询 | ||
| if (mqCondiString) { | ||
| // const selector = e(rawSelector); | ||
| const selector = rawSelector; | ||
| const rulePropString = Object.keys(originRet).reduce((result, key) => { | ||
| return result + `${key}:${originRet[key]};`; | ||
| }, ""); | ||
| const ruleString = `html ${selector}{${rulePropString}}`; | ||
| const fullString = `@media ${mqCondiString}{${ruleString}}`; | ||
| return fullString; | ||
| } | ||
| // 伪类 | ||
| else if (preonduString) { | ||
| const selector = rawSelector; | ||
| const ruleName = "html " + preonduString.replace(/\$selector\$/, selector); | ||
| const rulePropString = Object.keys(originRet).reduce((result, key) => { | ||
| return result + `${key}:${originRet[key]};`; | ||
| }, ""); | ||
| const ruleString = `${ruleName}{${rulePropString}}`; | ||
| return ruleString; | ||
| } | ||
| // 正常规则 | ||
| else { | ||
| return originRet; | ||
| } | ||
| }; | ||
| const boxRuleReg = new RegExp("^" | ||
| + mediaQueryAndPreonduReg | ||
| + "(-)?" | ||
| + `(${boxModelKeyList.join("|")})` | ||
| + `(${directionKeyList.join("|")})?` | ||
| + numberAndUnitRegString | ||
| + "$"); | ||
| const boxRule = [ | ||
| boxRuleReg, | ||
| (gp, conf) => { | ||
| let [, prefix, nega, prop, dire, value, , , unit = "e", important = false] = gp; | ||
| let { rawSelector, currentSelector, variantHandlers, theme } = conf; | ||
| console.log(conf, 222); | ||
| important = important ? " !important" : ""; | ||
| const _prop = boxModeDic[prop]; | ||
| let _dires = directPlusDic[dire]; | ||
| let _unit = unitDic[unit]; | ||
| let keys = []; | ||
| // outline模式下没有方向之别 | ||
| if ("o" == prop) { | ||
| _dires = ""; | ||
| } | ||
| // 处理有方向的和没有方向的情况 | ||
| if (_dires) { | ||
| _dires.split(",").forEach((_dire) => { | ||
| keys.push(_prop + "-" + _dire); | ||
| }); | ||
| } | ||
| else { | ||
| keys.push(_prop); | ||
| } | ||
| //处理border和outline的情况 | ||
| if (["b", "o"].indexOf(prop) >= 0) { | ||
| keys = keys.map(s => s + "-width"); | ||
| } | ||
| let _value = value; | ||
| _value = valueParser(_value, !!nega); | ||
| const ret = keys.reduce((result, key) => { | ||
| result[key] = _value + _unit + important; | ||
| return result; | ||
| }, {}); | ||
| return beforeRuleOutput(conf, { prefix }, ret); | ||
| } | ||
| ]; | ||
| exports.boxRule = boxRule; | ||
| const sizeRule = [ | ||
| new RegExp("^" | ||
| + mediaQueryAndPreonduReg | ||
| + "(-)?" | ||
| + `(${keys(sizeValueDic).join("|")})` | ||
| + numberAndUnitRegString | ||
| + "$"), | ||
| (gp, conf) => { | ||
| let [, prefix, nega, prop, value, , , unit = "e", important = false] = gp; | ||
| important = important ? " !important" : ""; | ||
| const _prop = sizeValueDic[prop]; | ||
| let keys = _prop.split(","); | ||
| let _value = valueParser(value, !!nega); | ||
| if (_value != "auto") { | ||
| _value = _value + unitDic[unit] + important; | ||
| } | ||
| const ret = keys.reduce((result, key) => { | ||
| result[key] = _value; | ||
| return result; | ||
| }, {}); | ||
| return beforeRuleOutput(conf, { prefix }, ret); | ||
| } | ||
| ]; | ||
| exports.sizeRule = sizeRule; | ||
| // 颜色相关 | ||
| const colorDic = { | ||
| "co": "color", | ||
| "cl": "color", | ||
| "bg": "background-color", | ||
| "bc": "border-color", | ||
| }; | ||
| const colorRuleRgString = `^${mediaQueryAndPreonduReg}(${Object.keys(colorDic).join("|")})-([\\w\\d#]+)(i)?$`; | ||
| const colorRule = [ | ||
| new RegExp(colorRuleRgString), | ||
| (gp, conf) => { | ||
| let [, prefix, type, value, important = false] = gp; | ||
| const { colors } = conf.theme; | ||
| const [__, color, index = "DEFAULT"] = value.match(/([a-zA-Z]+)(\d+)?/); | ||
| let colorValue = ""; | ||
| const colorSeries = colors[color]; | ||
| if (colorSeries) { | ||
| colorValue = colorSeries[index] || ""; | ||
| } | ||
| if (!colorValue) { | ||
| return ""; | ||
| } | ||
| if (important) { | ||
| colorValue += " !important"; | ||
| } | ||
| const colorProp = colorDic[type]; | ||
| const ret = { [colorProp]: colorValue }; | ||
| return beforeRuleOutput(conf, { prefix }, ret); | ||
| } | ||
| ]; | ||
| exports.colorRule = colorRule; | ||
| const regexVueTemplate = /<template.*?lang=['"]pug['"][^>]*?>\r?\n([\s\S]*?\n)<\/template>/gm; | ||
| /** | ||
| * 解析pug中的unocss定义 | ||
| * @param pugImporter {} 即import("pug") | ||
| */ | ||
| const extractorPugFactory = function (pugImporter) { | ||
| return function extractorPug() { | ||
| async function compile(code, id) { | ||
| //@ts-ignore | ||
| const Pug = await pugImporter; | ||
| try { | ||
| return Pug.compile(code, { filename: id })(); | ||
| } | ||
| catch { | ||
| } | ||
| } | ||
| return { | ||
| name: "pug", | ||
| order: -1, | ||
| async extract(ctx) { | ||
| if (!ctx.id) | ||
| return; | ||
| if (ctx.id.match(/\.pug$/) || ctx.id.match(/\?vue&type=template/)) { | ||
| try { | ||
| ctx.code = await compile(ctx.code, ctx.id) || ctx.code; | ||
| } | ||
| catch { | ||
| } | ||
| } | ||
| else if (ctx.id.match(/\.vue$/)) { | ||
| const matches = Array.from(ctx.code.matchAll(regexVueTemplate)); | ||
| let tail = ""; | ||
| for (const match of matches) { | ||
| if (match && match[1]) { | ||
| tail += `\n${await compile(match[1], ctx.id)}`; | ||
| } | ||
| } | ||
| if (tail) { | ||
| ctx.code = `${ctx.code}\n\n${tail}`; | ||
| } | ||
| } | ||
| return void 0; | ||
| } | ||
| }; | ||
| }; | ||
| }; | ||
| exports.extractorPugFactory = extractorPugFactory; | ||
| const rules = [sizeRule, boxRule, colorRule]; | ||
| exports.rules = rules; | ||
| /** | ||
| import {rules, extractorPugFactory} from "luss/dist/unocss-luss"; | ||
| const extractorPug = extractorPugFactory(import("pug")); | ||
| import {extractorSplit, presetUno} from 'unocss' | ||
| Unocss({ | ||
| extractors: [ | ||
| extractorPug(), | ||
| extractorSplit, | ||
| ], | ||
| rules: [ | ||
| boxRule, sizeRule, | ||
| ], | ||
| }) | ||
| */ | ||
| //# sourceMappingURL=unocss-luss.js.map |
| {"version":3,"file":"unocss-luss.js","sourceRoot":"","sources":["../src/unocss-luss.ts"],"names":[],"mappings":";;;AAEA,OAAO;AACP,MAAM,WAAW,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;AACvD,MAAM,aAAa,GAAQ;IACvB,IAAI,EAAE,eAAe,WAAW,CAAC,CAAC,CAAC,KAAK;IACxC,IAAI,EAAE,eAAe,WAAW,CAAC,CAAC,CAAC,uBAAuB,WAAW,CAAC,CAAC,CAAC,KAAK;IAC7E,IAAI,EAAE,eAAe,WAAW,CAAC,CAAC,CAAC,uBAAuB,WAAW,CAAC,CAAC,CAAC,KAAK;IAC7E,IAAI,EAAE,eAAe,WAAW,CAAC,CAAC,CAAC,uBAAuB,WAAW,CAAC,CAAC,CAAC,KAAK;IAC7E,IAAI,EAAE,eAAe,WAAW,CAAC,CAAC,CAAC,uBAAuB,WAAW,CAAC,CAAC,CAAC,KAAK;IAC7E,KAAK,EAAE,eAAe,WAAW,CAAC,CAAC,CAAC,uBAAuB,WAAW,CAAC,CAAC,CAAC,KAAK;IAC9E,KAAK,EAAE,eAAe,WAAW,CAAC,CAAC,CAAC,KAAK;CAC5C,CAAA;AAED,KAAK;AACL,MAAM,UAAU,GAAQ;IACpB,IAAI,EAAE,kBAAkB;IACxB,IAAI,EAAE,oBAAoB;IAC1B,IAAI,EAAE,mBAAmB;IACzB,KAAK,EAAE,gBAAgB;IACvB,UAAU,EAAE,cAAc;CAC7B,CAAA;AAED,UAAU;AACV,MAAM,wBAAwB,GAAG,MAAM,CAAC,IAAI,CAAC;IACzC,GAAG,aAAa;IAChB,GAAG,UAAU;CAChB,CAAC,CAAC;AAGH,MAAM,UAAU,GAAQ;IACpB,CAAC,EAAE,QAAQ;IACX,CAAC,EAAE,SAAS;IACZ,CAAC,EAAE,QAAQ;IACX,CAAC,EAAE,SAAS;CACf,CAAC;AAEF,MAAM,aAAa,GAAQ;IACvB,CAAC,EAAE,KAAK;IACR,CAAC,EAAE,OAAO;IACV,CAAC,EAAE,QAAQ;IACX,CAAC,EAAE,MAAM;CACZ,CAAA;AAED,MAAM,aAAa,GAAQ;IACvB,GAAG,aAAa;IAChB,CAAC,EAAE,YAAY;IACf,CAAC,EAAE,YAAY;IACf,CAAC,EAAE,YAAY;IACf,CAAC,EAAE,YAAY;CAClB,CAAA;AAED,MAAM,YAAY,GAAQ;IACtB,GAAG,aAAa;IAChB,CAAC,EAAE,OAAO;IACV,CAAC,EAAE,QAAQ;IACX,CAAC,EAAE,cAAc;IACjB,EAAE,EAAE,aAAa;IACjB,GAAG,EAAE,qBAAqB;IAC1B,CAAC,EAAE,WAAW;IACd,EAAE,EAAE,WAAW;CAClB,CAAA;AAED,MAAM,OAAO,GAAQ;IACjB,CAAC,EAAE,IAAI;IACP,EAAE,EAAE,IAAI;IACR,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,KAAK;IACR,IAAI,EAAE,IAAI;IACV,IAAI,EAAE,IAAI;CACb,CAAA;AAED,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;AAChC,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;AAC/C,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;AAEnD,YAAY;AACZ,MAAM,uBAAuB,GAAG,OAAO,wBAAwB,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAA;AAE/E,WAAW;AACX,MAAM,sBAAsB,GACxB,oBAAoB;IACpB,IAAI,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI;IAC1B,MAAM,CACT;AAED,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;AACzB,MAAM,WAAW,GAAG,UAAU,KAAa,EAAE,SAAkB,KAAK;IAChE,IAAI,KAAK,IAAI,GAAG,IAAI,KAAK,IAAI,MAAM,EAAE;QACjC,OAAO,MAAM,CAAC;KACjB;IACD,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;QAClB,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;KACrC;IACD,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;IAChC,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9B,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;IACvC,OAAO,KAAK,CAAC;AACjB,CAAC,CAAA;AAGD,MAAM,gBAAgB,GAAG,CAAC,IAAQ,EAAE,OAAW,EAAE,SAAa,EAAE,EAAE;IAC9D,IAAI,EAAE,WAAW,EAAE,eAAe,EAAE,eAAe,EAAE,KAAK,EAAE,GAAG,IAAI,CAAA;IACnE,IAAI,EAAC,MAAM,EAAC,GAAG,OAAO,CAAC;IAEvB,OAAO;IACP,MAAM,aAAa,GAAG,aAAa,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IAElD,KAAK;IACL,MAAM,aAAa,GAAG,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IAE/C,OAAO;IACP,IAAG,aAAa,EAAE;QACd,mCAAmC;QACnC,MAAM,QAAQ,GAAG,WAAW,CAAC;QAC7B,MAAM,cAAc,GAAI,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,GAAG,EAAC,EAAE;YACjE,OAAO,MAAM,GAAG,GAAG,GAAG,IAAI,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC;QAChD,CAAC,EAAE,EAAE,CAAC,CAAC;QACP,MAAM,UAAU,GAAG,QAAQ,QAAQ,IAAI,cAAc,GAAG,CAAC;QACzD,MAAM,UAAU,GAAG,UAAU,aAAa,IAAI,UAAU,GAAG,CAAA;QAC3D,OAAO,UAAU,CAAC;KACrB;IAED,KAAK;SACA,IAAG,aAAa,EAAC;QAClB,MAAM,QAAQ,GAAG,WAAW,CAAC;QAE7B,MAAM,QAAQ,GAAG,OAAO,GAAG,aAAa,CAAC,OAAO,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;QAC3E,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,EAAE;YACjE,OAAO,MAAM,GAAG,GAAG,GAAG,IAAI,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC;QAChD,CAAC,EAAE,EAAE,CAAC,CAAC;QACP,MAAM,UAAU,GAAG,GAAG,QAAQ,IAAI,cAAc,GAAG,CAAC;QACpD,OAAO,UAAU,CAAC;KACrB;IAED,OAAO;SACH;QACA,OAAO,SAAS,CAAC;KACpB;AACL,CAAC,CAAA;AAED,MAAM,UAAU,GAAG,IAAI,MAAM,CACzB,GAAG;MACD,uBAAuB;MACvB,MAAM;MACN,IAAI,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG;MAChC,IAAI,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI;MAClC,sBAAsB;MACtB,GAAG,CACR,CAAA;AAED,MAAM,OAAO,GAAuB;IAChC,UAAU;IACV,CAAC,EAAW,EAAE,IAAQ,EAAE,EAAE;QACtB,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,AAAD,EAAG,AAAD,EAAG,IAAI,GAAG,GAAG,EAAE,SAAS,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC;QAChF,IAAI,EAAE,WAAW,EAAE,eAAe,EAAE,eAAe,EAAE,KAAK,EAAE,GAAG,IAAI,CAAA;QACnE,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;QACvB,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;QAC3C,MAAM,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,CAAA;QAC9B,IAAI,MAAM,GAAG,aAAa,CAAC,IAAI,CAAC,CAAA;QAChC,IAAI,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;QACzB,IAAI,IAAI,GAAa,EAAE,CAAC;QAExB,mBAAmB;QACnB,IAAG,GAAG,IAAE,IAAI,EAAE;YACV,MAAM,GAAG,EAAE,CAAC;SACf;QAED,iBAAiB;QACjB,IAAG,MAAM,EAAE;YACP,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,KAAY,EAAE,EAAE;gBACvC,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,GAAG,KAAK,CAAC,CAAC;YACnC,CAAC,CAAC,CAAA;SACL;aAAI;YACD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACpB;QAED,qBAAqB;QACrB,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;YAC/B,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC;SACtC;QAED,IAAI,MAAM,GAAG,KAAK,CAAC;QACnB,MAAM,GAAG,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;QACrC,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,MAAW,EAAE,GAAG,EAAE,EAAE;YACzC,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,GAAG,KAAK,GAAG,SAAS,CAAC;YACzC,OAAO,MAAM,CAAC;QAClB,CAAC,EAAE,EAAE,CAAC,CAAC;QACP,OAAO,gBAAgB,CAAC,IAAI,EAAE,EAAC,MAAM,EAAC,EAAE,GAAG,CAAC,CAAC;IACjD,CAAC;CACJ,CAAC;AAkHE,0BAAO;AAhHX,MAAM,QAAQ,GAAG;IACb,IAAI,MAAM,CACN,GAAG;UACD,uBAAuB;UACvB,MAAM;UACN,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG;UACnC,sBAAsB;UACtB,GAAG,CACR;IACD,CAAC,EAAW,EAAE,IAAQ,EAAE,EAAE;QACtB,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,AAAD,EAAG,AAAD,EAAG,IAAI,GAAG,GAAG,EAAE,SAAS,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC;QAC1E,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;QAC3C,MAAM,KAAK,GAAG,YAAY,CAAC,IAAI,CAAC,CAAA;QAChC,IAAI,IAAI,GAAa,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACtC,IAAI,MAAM,GAAG,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;QACxC,IAAI,MAAM,IAAI,MAAM,EAAE;YAClB,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC;SAC/C;QACD,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,MAAW,EAAE,GAAG,EAAE,EAAE;YACzC,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;YACrB,OAAO,MAAM,CAAC;QAClB,CAAC,EAAE,EAAE,CAAC,CAAC;QACP,OAAO,gBAAgB,CAAC,IAAI,EAAE,EAAC,MAAM,EAAC,EAAE,GAAG,CAAC,CAAC;IACjD,CAAC;CACJ,CAAA;AAuFG,4BAAQ;AArFZ,OAAO;AACP,MAAM,QAAQ,GAAQ;IAClB,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,kBAAkB;IACxB,IAAI,EAAE,cAAc;CACvB,CAAA;AAED,MAAM,iBAAiB,GAAG,IAAI,uBAAuB,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,qBAAqB,CAAC;AAC9G,MAAM,SAAS,GAAG;IACd,IAAI,MAAM,CAAC,iBAAiB,CAAC;IAC7B,CAAC,EAAW,EAAE,IAAQ,EAAE,EAAE;QACtB,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC;QACpD,MAAM,EAAC,MAAM,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAE5B,MAAM,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,GAAG,SAAS,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,mBAAmB,CAAU,CAAC;QAEjF,IAAI,UAAU,GAAG,EAAE,CAAC;QACpB,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;QACjC,IAAI,WAAW,EAAE;YACb,UAAU,GAAG,WAAW,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;SACzC;QACD,IAAI,CAAC,UAAU,EAAE;YACb,OAAO,EAAE,CAAC;SACb;QAED,IAAI,SAAS,EAAE;YACX,UAAU,IAAI,aAAa,CAAC;SAC/B;QAED,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;QACjC,MAAM,GAAG,GAAG,EAAC,CAAC,SAAS,CAAC,EAAE,UAAU,EAAC,CAAC;QACtC,OAAO,gBAAgB,CAAC,IAAI,EAAE,EAAC,MAAM,EAAC,EAAE,GAAG,CAAC,CAAC;IACjD,CAAC;CACJ,CAAA;AAqDG,8BAAS;AAnDb,MAAM,gBAAgB,GAAG,oEAAoE,CAAC;AAE9F;;;GAGG;AACH,MAAM,mBAAmB,GAAG,UAAS,WAAwB;IACzD,OAAO,SAAS,YAAY;QACxB,KAAK,UAAU,OAAO,CAAC,IAAW,EAAE,EAAS;YAEzC,YAAY;YACZ,MAAM,GAAG,GAAG,MAAM,WAAW,CAAC;YAC9B,IAAI;gBACA,OAAO,GAAG,CAAC,OAAO,CAAC,IAAI,EAAE,EAAC,QAAQ,EAAE,EAAE,EAAC,CAAC,EAAE,CAAC;aAC9C;YAAC,MAAM;aACP;QACL,CAAC;QACD,OAAO;YACH,IAAI,EAAE,KAAK;YACX,KAAK,EAAE,CAAC,CAAC;YACT,KAAK,CAAC,OAAO,CAAC,GAAO;gBACjB,IAAI,CAAC,GAAG,CAAC,EAAE;oBACP,OAAO;gBACX,IAAI,GAAG,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC,KAAK,CAAC,qBAAqB,CAAC,EAAE;oBAC/D,IAAI;wBACA,GAAG,CAAC,IAAI,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC;qBAC1D;oBAAC,MAAM;qBACP;iBACJ;qBAAM,IAAI,GAAG,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE;oBAC/B,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,CAAa,CAAC;oBAC5E,IAAI,IAAI,GAAG,EAAE,CAAC;oBACd,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;wBACzB,IAAI,KAAK,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE;4BACnB,IAAI,IAAI,KAAK,MAAM,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC;yBAClD;qBACJ;oBACD,IAAI,IAAI,EAAE;wBACN,GAAG,CAAC,IAAI,GAAG,GAAG,GAAG,CAAC,IAAI,OAAO,IAAI,EAAE,CAAC;qBACvC;iBACJ;gBACD,OAAO,KAAK,CAAC,CAAC;YAClB,CAAC;SACJ,CAAC;IACN,CAAC,CAAA;AACL,CAAC,CAAA;AASG,kDAAmB;AAPvB,MAAM,KAAK,GAAG,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC;AAMzC,sBAAK;AAIT;;;;;;;;;;;;;GAaG"} |
+13
| const luss = require('src/unocss/unocss-luss'); | ||
| import {sizeRule, boxRule, colorRule, rules} from "src/unocss/unocss-luss"; | ||
| import extractorPug from "src/unocss/extractor-pug"; | ||
| export { | ||
| sizeRule, | ||
| boxRule, | ||
| colorRule, | ||
| rules, | ||
| extractorPug | ||
| } |
Sorry, the diff of this file is too big to display
| @import (once) "vars"; | ||
| @import "functions"; | ||
| .reset-function; | ||
| @import (once) "rules"; | ||
| .flex-function; | ||
| .overflow-function; | ||
| @import "functions"; | ||
| .reset-function; |
| @import (once) "vars"; | ||
| //设置了单位 | ||
| .__write(@key,@value,@defaultUnit:px) when not(get-unit(@value)=~"") or not(isnumber(@value)){ | ||
| @{key}:@value; | ||
| } | ||
| //没有设置单位的情况 | ||
| .__write(@key,@value,@defaultUnit:px) when(get-unit(@value)=~"") and (isnumber(@value)){ | ||
| @{key}:unit(@value,@defaultUnit); | ||
| } | ||
| .__class_write(@className,@keyList,@valueList){ | ||
| .@{className}{ | ||
| .__writes(@keyList,@valueList); | ||
| } | ||
| } | ||
| .__class_write-hover(@className,@keyList,@valueList){ | ||
| .@{className}{ | ||
| &:hover{ | ||
| .__writes(@keyList,@valueList); | ||
| } | ||
| } | ||
| } | ||
| .__class_write_with_important(@className,@keyList,@valueList){ | ||
| .__class_write(@className,@keyList,@valueList); | ||
| .__class_write(~"@{className}-i",@keyList,@valueList) !important; | ||
| } | ||
| .__class_write_with_important-hover(@className,@keyList,@valueList){ | ||
| .__class_write-hover(~"@{className}-hover",@keyList,@valueList); | ||
| .__class_write-hover(~"@{className}-hover-i",@keyList,@valueList) !important; | ||
| } | ||
| .__writes(@keyList,@value) when (length(@value)=1){ | ||
| @leng:length(@keyList); | ||
| ._loop(@n) when(@n<=@leng){ | ||
| @key:extract(@keyList,@n); | ||
| .__write(@key,@value,~""); | ||
| ._loop(@n + 1); | ||
| } | ||
| ._loop(1) | ||
| } | ||
| .__writes(@keyList, @valueList) when (length(@valueList)>1){ | ||
| @leng:length(@keyList); | ||
| ._loop(@n) when(@n<=@leng){ | ||
| @key:extract(@keyList,@n); | ||
| @value:extract(@valueList,@n); | ||
| .__write(@key,@value,~""); | ||
| ._loop(@n + 1); | ||
| } | ||
| ._loop(1) | ||
| } | ||
| //透明度调整 | ||
| ._alpha(@val:80){ opacity: @val * 0.01; filter: alpha(opacity=@val); } | ||
| ._op(@value){._alpha(@value * 100)} | ||
| //横向padding | ||
| ._ph(@value:auto){padding-left: @value; padding-right: @value;} | ||
| //纵向padding | ||
| ._pv(@value:auto){padding-top: @value; padding-bottom: @value;} | ||
| //横向margin | ||
| ._mh(@value:auto){margin-left: @value; margin-right: @value;} | ||
| //纵向margin | ||
| ._mv(@value:auto){margin-top: @value; margin-bottom: @value;} | ||
| //block尺寸，同时设置长宽 | ||
| ._size(@size){._size(@size,@size)} | ||
| ._size(@width,@height){ | ||
| .__write(width,@width,px); | ||
| .__write(height,@height,px); | ||
| } | ||
| //设置高度时，同时设置line-height | ||
| ._size_lh(@width,@height){ | ||
| ._size(@width,@height); | ||
| .__write(line-height,@height,px) | ||
| } | ||
| ._size_lh(@s){ | ||
| ._size_lh(@s,@s) | ||
| } | ||
| //设置尺寸时候，同时设置margin没size尺寸的一般（负） | ||
| ._size_rever_margin(@width,@height){ | ||
| ._size(@width,@height); | ||
| margin-left:-@width * 0.5; | ||
| margin-top :-@height*0.5; | ||
| } | ||
| ._size_rever_margin(@size){ | ||
| ._size_rever_margin(@size,@size); | ||
| } | ||
| ._size_revert_margin_lh(@width,@height){ | ||
| ._size_rever_margin(@width,@height); | ||
| line-height: @height; | ||
| } | ||
| ._size_revert_margin_lh(@size){ | ||
| ._size_revert_margin_lh(@size,@size); | ||
| } | ||
| ._fillin(@value:0){ | ||
| .__writes(left top right bottom, @value) | ||
| } | ||
| //reset; | ||
| .reset-function(){ | ||
| html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, | ||
| img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center, dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, | ||
| tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, | ||
| summary,time, mark, audio, video { | ||
| margin: 0;padding: 0;border: 0;font-size: 100%;vertical-align: baseline; | ||
| } | ||
| h1, h2, h3, h4, h5, h6{ font-weight: 700;} | ||
| /* HTML5 display-role reset for older browsers */ | ||
| article, aside, details, figcaption, figure, footer, header, menu, nav, section { display: block;} | ||
| body {line-height: 1; font-size: 12px;} | ||
| ol, ul{ list-style: none; } | ||
| blockquote, q {quotes: none;} | ||
| blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;} | ||
| i,em{font-style: normal;} | ||
| a{ text-decoration: none;} | ||
| } | ||
| //ie旋转 | ||
| //@ang只支持deg | ||
| ._ieRotate(@ang,@width,@height){ | ||
| @deg:pi()*2 - unit(convert(unit(@ang,deg),"rad")); //ie角度正好和w3c旋转相反 | ||
| @sin:sin(@deg); | ||
| @cos:cos(@deg); | ||
| @fsin:-@sin; | ||
| @fcos:-@cos; | ||
| @w:unit(@width); | ||
| @h:unit(@height); | ||
| @dx:-@w/2*@cos+@h/2*@sin+@w/2; | ||
| @dy:-@w/2*@sin - @h/2*@cos+@h/2; | ||
| filter:progid:DXImageTransform.Microsoft.Matrix(Dx=@dx, Dy=@dy,M11=@cos,M12=@sin,M21=@fsin,M22=@cos,sizingMethod="auto expand"); | ||
| } | ||
| //ie 的旋转 | ||
| ._ieRotate(@ang,@size){ | ||
| .ieRotate(@ang, @size, @size); | ||
| } | ||
| //形成三角 | ||
| .triangle(@size,@dir:left,@color:#08c,@blankColor:transparent){ | ||
| border: @size solid @blankColor; | ||
| border-@{dir}-width: 0; | ||
| ._size_lh(0); | ||
| ._dib; | ||
| .____write() when(@dir=right){border-left-color:@color;} | ||
| .____write() when(@dir=bottom){border-top-color:@color;} | ||
| .____write() when(@dir=left){border-right-color:@color;} | ||
| .____write() when(@dir=top){border-bottom-color:@color;} | ||
| .____write; | ||
| } | ||
| //形成斜三角(45整数倍三角) | ||
| .triangle45(@size,@dira:left,@dirb:bottom,@color:#08c,@blankColor:transparent){ | ||
| border: @blankColor solid @size * 0.5; | ||
| border-@{dira}-color:@color; | ||
| border-@{dirb}-color:@color; | ||
| line-height: 0; | ||
| font-size: 0; | ||
| ._size(0); | ||
| &:extend(.dib); | ||
| } | ||
| //----形成三角 | ||
| //用来生一个宽度序列 | ||
| //参数1 @main_w有三种形式 | ||
| // 形式1:1000px 表示总宽度为1000,单元格间距为0 | ||
| // 形式2:1000px 12px 表示总宽度为1000,单元格间距为12px，无两边空白 | ||
| // 形式3:1000px _12px 表示总宽度为1000,单元格间距为12px，两边有空白 | ||
| //参数2 @col_width_list 传入1-(n-1)各单元格宽度,最后一个单元格宽度由计算获得 | ||
| //举例 .row1{.gen_grid(1000px 10px,60px,100px,90px,88px, 180px); >*{.iblock};} | ||
| .gen_grid(@main_w__gap,@col_width_list){ | ||
| @leng:length(@col_width_list); | ||
| //分析第一参数 | ||
| @p_list:`(function(index){ | ||
| index = index || 0; | ||
| var para = "@{main_w__gap}".replace(/\[|\]|,/g,""); | ||
| var leng = @{leng}; | ||
| var ar = para.split(" "); | ||
| ar[1] = ar[1] || "0px"; | ||
| var main_w = ar[0]; | ||
| var gap_w=ar[1].replace(/^_|\-/,""); | ||
| if(/^\_/.test(ar[1])){ | ||
| leng = leng + 2; | ||
| }else{ | ||
| leng = leng; | ||
| } | ||
| var resultList = [main_w, gap_w,leng]; | ||
| return resultList[index-1]; | ||
| })`; | ||
| //提取参数1的定义 | ||
| @main_w:~`@{p_list}(1)`; | ||
| @gap_w:~`@{p_list}(2)`; | ||
| @gap_num:~`@{p_list}(3)`; | ||
| //计算最后一个单元格宽度 | ||
| @last_w:~`(function(){ | ||
| var arg = eval("@{col_width_list}".replace(/px/g,"")); | ||
| var main_w = parseInt("@{main_w}"); | ||
| var gap_num = @{gap_num}; | ||
| var gap_w = parseInt("@{gap_w}"); | ||
| var w=0; | ||
| //只有两列的情况 | ||
| if(arg.length === undefined) arg = [arg]; | ||
| arg.map(function(n){ | ||
| w+=n; | ||
| }); | ||
| var lstw = (main_w - w - gap_num*gap_w); | ||
| bindvar("gd.lastw",lstw); | ||
| return lstw; | ||
| })()`; | ||
| width:~`(function(){ | ||
| var main_w = parseInt("@{main_w}"); | ||
| var gap_num = @{gap_num}; | ||
| var leng = @{leng}; | ||
| var gap_w = parseInt("@{gap_w}"); | ||
| if(gap_num>leng){ | ||
| return (main_w - gap_w) + "px; padding-left:" + gap_w + "px"; | ||
| }else{ | ||
| return main_w + "px"; | ||
| } | ||
| })()`; | ||
| //定义循环 | ||
| .gen_grid_loop(@times,@paras) when(@times >0){ | ||
| .gen_grid_loop(@times - 1, @paras); | ||
| >.cell-@{times}{ | ||
| width: extract(@paras,@times); | ||
| margin-right: @gap_w; | ||
| } | ||
| } | ||
| //生成1-(n-1)的宽度 | ||
| .gen_grid_loop(@leng , @col_width_list); | ||
| //生成n的宽度 | ||
| @leng_p1:@leng+1; | ||
| >.cell-last,>.cell-@{leng_p1}{ | ||
| width:unit(@last_w,px); | ||
| } | ||
| //消除间隔 | ||
| font-size: 0; | ||
| //white-space: normal; | ||
| //对单元格的一些公共设置 | ||
| >*{ | ||
| &:extend(.dib); font-size: @fsize; | ||
| } | ||
| } | ||
| .gen_grid_line(@main_w__gap,@col_width_list){ | ||
| .gen_grid(@main_w__gap,@col_width_list); | ||
| white-space: nowrap; | ||
| >*{white-space: normal;} | ||
| } | ||
| // | ||
| ._colsets(@colList,@fullWidth,@innerGap:0,@edgeGap:0){ | ||
| @leng:@length(@colList); | ||
| @lastWidth:@fullWidth; | ||
| ._loop(@n) when(@n<=@length){ | ||
| @w:extract(@colList,@n); | ||
| //@lastWidth | ||
| >*:nth-child(@{n}){ | ||
| width:@w; | ||
| margin-right: @innerGap; | ||
| } | ||
| ._loop(@n+1); | ||
| } | ||
| ._loop(1); | ||
| } | ||
| //生成列均等的网格布局 | ||
| //@main_width整体宽度 | ||
| //@gap间隔 | ||
| //@n网格猎数 | ||
| //@edge_gap间隔是否在边沿 | ||
| //@cell_width_offset宽度微调 | ||
| ._gen_grid_average(@main_width,@n,@gap:0,@edge_gap:false,@cell_width_offset:0){ | ||
| .gen_comm(){ | ||
| padding-top: @gap; | ||
| padding-bottom: @gap; | ||
| //margin-left: -@gap/2; | ||
| text-indent: 0; | ||
| left: -@gap*0.5; | ||
| position: relative; | ||
| font-size: 0; | ||
| >*{ | ||
| &:extend(.dib); | ||
| font-size: 14px; | ||
| min-height: @gap; | ||
| margin-bottom: @gap; | ||
| .margin_h(@gap*0.5); | ||
| } | ||
| } | ||
| .gen(@main_width,@gap,@n,@edge_gap) when(@edge_gap = true){ | ||
| @cellw:(@main_width - (@n + 1)*@gap)/@n + @cell_width_offset; | ||
| width: @main_width; | ||
| padding-left: @gap; | ||
| >*{ | ||
| width: @cellw; | ||
| } | ||
| } | ||
| .gen(@main_width,@gap,@n,@edge_gap) when(@edge_gap = false){ | ||
| @cellw:(@main_width - (@n)*@gap)/@n + @cell_width_offset; | ||
| width: @main_width + @gap; | ||
| >*{ | ||
| width: @cellw; | ||
| } | ||
| } | ||
| .gen_comm; | ||
| .gen(@main_width,@gap,@n,@edge_gap); | ||
| } | ||
| //半透明背景，兼容ie | ||
| ._bgcolor_alpha(@bgcolor: rgba(0,0,0,.51)){ | ||
| filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr = argb(@bgcolor), endColorstr=argb(@bgcolor)); | ||
| background-color:@bgcolor; | ||
| } | ||
| ._bgcolor_alpha(@rgb,@alpha){ | ||
| @rgba:~`(function(){ | ||
| var obj = __get_rgba_object('@{rgb}',@{alpha}); | ||
| return getRGBA('@{rgb}',@{alpha}); | ||
| })(this)`; | ||
| @argb_16:~`(function(){ | ||
| return getARGB('@{rgb}',@{alpha}) | ||
| })(this)`; | ||
| filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr= @argb_16, endColorstr=@argb_16); | ||
| background-color:@rgba; | ||
| } | ||
| .loopColorList(@list){ | ||
| @leng:length(@list); | ||
| .loop(@n)when(@n>0){ | ||
| @cl:extract(@list,@n); | ||
| @cl-val:@@cl; | ||
| .__class_write_with_important(~"cl-@{cl}", color, @@cl); | ||
| .cl-@{cl}-hover:hover{color:@@cl;} | ||
| .cl-@{cl}-hover-i:hover{color:@@cl !important;} | ||
| .__class_write_with_important(~"bg-@{cl}", background-color, @@cl); | ||
| .bg-@{cl}-hover:hover{background-color:@@cl;} | ||
| .bg-@{cl}-hover-i:hover{background-color:@@cl !important;} | ||
| .__class_write_with_important(~"bd-@{cl}", border-color, @@cl); | ||
| .loop(@n - 1); | ||
| } | ||
| .loop(@leng); | ||
| } | ||
| //蚂蚁线生成器 | ||
| .ant-line-factory(@tick-color:@grey300, @tick-length:0.5em, @gap-length:0.75em, @gap-color:transparent){ | ||
| background-image: repeating-linear-gradient(-45deg, @tick-color 0, @tick-color 0.25em, @gap-color 0, @gap-color @gap-length); | ||
| } | ||
| //规定表格个列的宽度和对齐方式,自动宽度传入-1 | ||
| //ex: 0/auto 表示不干涉该列宽度 | ||
| //.table-1{ | ||
| // .tableColSet(18em right 5em 2em, 15px, 0, 0, 10%); | ||
| //} | ||
| //.table-1第一列宽度18em,第二列15px,第三列自动... | ||
| .tableColSet(@rest...){ | ||
| .loop(@n) when (@n>0){ | ||
| >tbody>tr>*,>tr>*{ | ||
| @value:extract(@widthList,@n); | ||
| @leng:length(@value); | ||
| @width:extract(@value,1); | ||
| @align:extract(@value,2); | ||
| @paddingLeft:extract(@value,3); | ||
| @paddingRight:extract(@value,4); | ||
| &:nth-child(@{n}){ | ||
| & when(@width>0){ | ||
| width: @width; | ||
| } | ||
| & when(iskeyword(@align)){ | ||
| text-align:@align; | ||
| } | ||
| & when(isnumber(@paddingLeft)){ | ||
| padding-left:@paddingLeft; | ||
| } | ||
| & when(isnumber(@paddingRight)){ | ||
| padding-right:@paddingRight; | ||
| } | ||
| } | ||
| } | ||
| .loop(@n - 1); | ||
| } | ||
| @widthList:@rest; | ||
| @le:length(@widthList); | ||
| .loop(@le); | ||
| } | ||
| /** | ||
| 参照js的String.prototype.padStrarts | ||
| @result:padStarts(foo, 5)[@__]; | ||
| 结果:00foo | ||
| */ | ||
| .padStarts(@string, @length:3, @padString:"0000000000"){ | ||
| @__: replace(~"@{padString}@{string}", ".+(.{@{length}}?)$", "$1"); | ||
| } | ||
| /** | ||
| 针对浮点数优化的padStarts | ||
| @result:padStarts(foo, 5)[@__]; | ||
| 结果:00foo | ||
| */ | ||
| .floatPadStarts(@number, @length:3, @padString:"0000000000"){ | ||
| @nMod:mod(@number, 1); | ||
| .calc() when (@nMod = 0){ | ||
| @__ : .padStarts(@number, @length, @padString)[@__]; | ||
| } | ||
| .calc() when not (@nMod = 0){ | ||
| @__ : replace(~"@{padString}@{number}", ".+(.{@{length}}?)(?=\.)", "$1"); | ||
| } | ||
| @__:.calc()[@__]; | ||
| } | ||
| /** | ||
| * 多个range使用 | ||
| .eachRange(range(1,5) range(10,15), { | ||
| hs:@value; | ||
| }) | ||
| */ | ||
| .eachRange(@rangeLs, @rules){ | ||
| each(@rangeLs, { | ||
| each(@value, { | ||
| @rules(); | ||
| }) | ||
| }) | ||
| } | ||
| ._lh(@height){ | ||
| line-height: @height; | ||
| height: @height; | ||
| } | ||
| .md-colors-function(){ | ||
| @ls:@colors-list; | ||
| .loopColorList(@ls); | ||
| } | ||
| .shortcut-class-function(){ | ||
| //宽度生成 | ||
| .ew{ | ||
| each(range(3, 30), { | ||
| &.w@{value}{ | ||
| width:unit(@value, em) !important; | ||
| } | ||
| }) | ||
| } | ||
| //一个类似表单布局的结构 | ||
| .form-gala{ | ||
| >.item{ | ||
| margin: 0.75em 0; | ||
| display: flex; | ||
| align-items: center; | ||
| >.label{ | ||
| padding-right: 0.75em; | ||
| } | ||
| >.el{ | ||
| flex: 1; | ||
| } | ||
| .force{ | ||
| each(range(4, 24), { | ||
| &.w@{value}{ | ||
| flex: unset; | ||
| flex-shrink: 0; | ||
| width:unit(@value + 0.5, em); | ||
| } | ||
| }) | ||
| } | ||
| } | ||
| each(range(4, 21), { | ||
| &.w@{value},&.lw@{value}{ | ||
| >.item{ | ||
| >.label{ | ||
| flex: unset; | ||
| width:unit(@value + 0.5, em); | ||
| } | ||
| } | ||
| } | ||
| }) | ||
| &.label-right{ | ||
| .item{ | ||
| >.label{ | ||
| text-align: right; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| .__class_write(bg-icon, background-repeat background-position, no-repeat ~"50% 50%"); | ||
| .__class_write(noselect, -moz-user-select -webkit-user-select -ms-user-select -khtml-user-select user-select, none none none none none); | ||
| .__class_write(txcut, overflow -text-overflow white-space, hidden ellipsis nowrap); | ||
| .__class_write_with_important(ib, display, inline-block); | ||
| .__class_write_with_important(db, display, block); | ||
| .__class_write_with_important(center, margin-left margin-right,auto auto); | ||
| // 不可见，但是仍可以加载 | ||
| .__class_write_with_important(v-hide,top left position clip clip, -50px -50px absolute rect(1px 1px 1px 1px) rect(1px, 1px, 1px, 1px)); | ||
| //center | ||
| .__class_write_with_important(center,margin-left margin-right,auto auto); | ||
| //对其方式 | ||
| .__class_write_with_important(tr,text-align,right); | ||
| .__class_write_with_important(tc,text-align,center); | ||
| .__class_write_with_important(tl,text-align,left); | ||
| .__class_write_with_important(pa,position,absolute); | ||
| .__class_write_with_important(pr,position,relative); | ||
| .__class_write_with_important(ps,position,static); | ||
| .__class_write_with_important(db, display,block); | ||
| .__class_write_with_important(di, display, inline); | ||
| .__class_write_with_important(dib,display,inline-block); | ||
| // | ||
| .__class_write_with_important(cp,cursor,pointer); | ||
| .__class_write_with_important(cd,cursor,default); | ||
| .__class_write_with_important(bbox, box-sizing, border-box); | ||
| .__class_write_with_important(cbox, box-sizing, content-box); | ||
| // | ||
| .__class_write_with_important(wnw, white-space, nowrap); | ||
| .__class_write_with_important(wnn, white-space, normal); | ||
| .__class_write_with_important(hide, display, none); | ||
| .__class_write_with_important(bg-coveride, background-size, cover); | ||
| .__class_write_with_important(background-size, background-size, contain); | ||
| .__class_write_with_important(fit-cover, object-fit, cover); | ||
| .__class_write_with_important(fit-contain, object-fit, contain); | ||
| .__class_write_with_important(ts-late-x--50p, transform, translateX(-50%)); | ||
| .__class_write_with_important(ts-late-y--50p, transform, translateY(-50%)); | ||
| .__class_write(bd1px, border-width border-style, 1px solid); | ||
| each(range(0, 5), { | ||
| .__class_write_with_important(~"h@{value}px", height , unit(@value, px)); | ||
| .__class_write_with_important(~"w@{value}px", height ,unit(@value, px)); | ||
| .__class_write_with_important(~"bt@{value}px", border-top-width ,unit(@value, px)); | ||
| .__class_write_with_important(~"br@{value}px", border-right-width , unit(@value, px)); | ||
| .__class_write_with_important(~"bb@{value}px", border-bottom-width , unit(@value, px)); | ||
| .__class_write_with_important(~"bl@{value}px", border-left-width , unit(@value, px)); | ||
| .__class_write_with_important(~"b@{value}px", border-width , unit(@value, px)); | ||
| .__class_write_with_important(~"s@{value}px", width height, unit(@value, px)); | ||
| }) | ||
| .__class_write_with_important(b-solid, brder-style, solid); | ||
| .__class_write_with_important(b-dotted, brder-style, dotted); | ||
| .__class_write_with_important(b-dashed, brder-style, dashed); | ||
| .__class_write_with_important(b-double, brder-style, double); | ||
| .__class_write_with_important(h-auto, height, auto); | ||
| .__class_write_with_important(w-auto, width, auto); | ||
| .__class_write_with_important(bg-size-cover, background-size, cover); | ||
| .__class_write_with_important(bg-size-contain, background-size, contain); | ||
| .__class_write_with_important(bg-size-100p, background-size, ~"100% 100%"); | ||
| //z的设置 | ||
| each(range(0, 5000, 100){ | ||
| .__class_write_with_important(~"z@{value}", z-index ,@value); | ||
| }) | ||
| //border-raduis | ||
| each(0 1 2 3 4 5 7 8 9,{ | ||
| .__class_write_with_important(~"bdr@{value}", border-radius ,unit(@value, px)); | ||
| }) | ||
| .__class_write_with_important(bdr50p, border-radius, 50%); | ||
| //font-width | ||
| each(range(100, 700, 100){ | ||
| .__class_write_with_important(~"fw@{value}", font-weight ,@value); | ||
| }) | ||
| .__class_write_with_important(fw-auto, font-weight ,inherit); | ||
| .toolkitGen(@gp, @value-list){ | ||
| @n:length(@value-list); | ||
| //距离 | ||
| .write(@key,@value) when(@gp = "distance"){ | ||
| .__class_write_with_important(~"m@{key}", margin, @value); | ||
| .__class_write_with_important(~"mh@{key}", margin-left margin-right, @value @value); | ||
| .__class_write_with_important(~"mv@{key}", margin-top margin-bottom, @value @value); | ||
| .__class_write_with_important(~"ml@{key}", margin-left, @value); | ||
| .__class_write_with_important(~"mt@{key}", margin-top, @value); | ||
| .__class_write_with_important(~"mr@{key}", margin-right, @value); | ||
| .__class_write_with_important(~"mb@{key}", margin-bottom, @value); | ||
| .__class_write_with_important(~"p@{key}", padding, @value); | ||
| .__class_write_with_important(~"ph@{key}", padding-left padding-right, @value @value); | ||
| .__class_write_with_important(~"pv@{key}", padding-top padding-bottom, @value @value); | ||
| .__class_write_with_important(~"pl@{key}", padding-left, @value); | ||
| .__class_write_with_important(~"pt@{key}", padding-top, @value); | ||
| .__class_write_with_important(~"pr@{key}", padding-right, @value); | ||
| .__class_write_with_important(~"pb@{key}", padding-bottom, @value); | ||
| } | ||
| //大小 | ||
| .write(@key,@value) when(@gp = "size"){ | ||
| .__class_write_with_important(~"fz@{key}", font-size, @value); | ||
| .__class_write_with_important(~"fz@{key}-rem", font-size, unit(@value, rem)); | ||
| .__class_write_with_important(~"w@{key}", width, @value); | ||
| .__class_write_with_important(~"h@{key}", height, @value); | ||
| .__class_write_with_important(~"lh@{key}", line-height, @value); | ||
| .__class_write_with_important(~"ti@{key}", text-indent, @value); | ||
| //.__class_write_with_important(~"hgap@{key}", height, @value); | ||
| //.__class_write_with_important(~"vgap@{key}", width display, @value inline-block); | ||
| } | ||
| //vwvh | ||
| .write(@key,@value) when(@gp = "vwvh"){ | ||
| @kk:replace(~"@{value}", "\.", "d", "g"); | ||
| .__class_write_with_important(~"vw@{kk}", width, ~"@{value}vw"); | ||
| .__class_write_with_important(~"vh@{kk}", height, ~"@{value}vh"); | ||
| } | ||
| .loop(@n)when(@n>0){ | ||
| @val:extract(@value-list,@n); | ||
| //小于1且非百分比数字 | ||
| //乘以10,去掉小数点，前面加0 | ||
| .tranKey(@number)when(@val < 1) and not(ispercentage(@val)){ | ||
| @valn:unit(@number * 10); | ||
| @valn2:replace(~"0@{valn}","\.","","g"); | ||
| .write(@valn2,@val); | ||
| } | ||
| //大于1非百分比数字 | ||
| //乘以10,小数点换为d | ||
| .tranKey(@number)when(@val >= 1) and not(ispercentage(@val)){ | ||
| @valn:unit(@number * 10); | ||
| @valn2:replace(~"@{valn}","\.","d","g"); | ||
| .write(@valn2,@val); | ||
| } | ||
| //百分比 | ||
| .tranKey(@number)when(ispercentage(@val)){ | ||
| @valn:unit(@number); | ||
| @valn2:replace(~"@{valn}","\.","d","g"); | ||
| @key:@valn2; | ||
| @value:@val; | ||
| .__class_write_with_important(~"w@{key}p", width, @value); | ||
| .__class_write_with_important(~"h@{key}p", height, @value); | ||
| .__class_write_with_important(~"l@{key}p", left, @value); | ||
| .__class_write_with_important(~"t@{key}p", top, @value); | ||
| .__class_write_with_important(~"r@{key}p", right, @value); | ||
| .__class_write_with_important(~"b@{key}p", bottom, @value); | ||
| //.__class_write_with_important(~"pl@{key}p", padding-left, @value); | ||
| //.__class_write_with_important(~"pt@{key}p", padding-top, @value); | ||
| //.__class_write_with_important(~"pr@{key}p", padding-right, @value); | ||
| //.__class_write_with_important(~"pb@{key}p", padding-bottom, @value); | ||
| } | ||
| //offset | ||
| .tranKey(@val) when(@gp="offset"){ | ||
| .__class_write_with_important(~"offset-x-@{val}", left, unit(@val,px)); | ||
| .__class_write_with_important(~"offset-y-@{val}", top, unit(@val,px)); | ||
| } | ||
| .tranKey(@val); | ||
| .loop(@n - 1); | ||
| } | ||
| .loop(@n) | ||
| } | ||
| @values:@size_range; | ||
| //距离组 //.mt1.mb025 | ||
| .toolkitGen("distance", @values); | ||
| //大小 //.fz075 fz95 fz10d5 w08 w15 w17d5 .scale09 | ||
| .toolkitGen("size", @values); | ||
| //透明 .op01.op05.op10 | ||
| each(@opcity_range{ | ||
| @val:@value/100; | ||
| @k: replace( | ||
| .floatPadStarts(@value/10, 2)[@__], | ||
| "\.", "d", "g" | ||
| ); | ||
| //@k: .floatPadStarts(@value/10, 5)[@__]; | ||
| .__class_write_with_important( ~"op@{k}", opacity, @val); | ||
| .__class_write_with_important-hover( ~"op@{k}", opacity, @val); | ||
| }) | ||
| //scale08_5 | ||
| .eachRange(@scale_range, { | ||
| @val:@value/100; | ||
| @k: replace( | ||
| .floatPadStarts(@value/10, 2)[@__], | ||
| "\.", "d", "g" | ||
| ); | ||
| .__class_write_with_important( ~"scale@{k}", transform, ~"scale(@{val})"); | ||
| .__class_write_with_important-hover( ~"scale@{k}", transform, ~"scale(@{val})"); | ||
| }); | ||
| /*缩放 .scale01.scale10*/ | ||
| //.toolkitGen("scale",0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.85 0.9 0.75 1 1.05 1.1 1.15 1.2 1.25 1.3 1.4 1.5 1.75 1.8 2 2.1 2.4 2.7 3.0 3 3.3); | ||
| //百分比 .w100p.h33d33p.l33d33p.t100p.pt16d66p | ||
| .toolkitGen("%",33.33% 100%); | ||
| .toolkitGen("%",0% 5% 10% 15% 20% 25% 30% 35% 40% 45% 50% 55% 60% 65% 70% 75% 80% 85% 90% 95%); | ||
| //vh,vw | ||
| .toolkitGen("vwvh",0 10 12.5 20 25 30 33.33 35 36 50 66.66 75 80 90 100); | ||
| //offset | ||
| .toolkitGen("offset", range(-20,20,1)); | ||
| //m-auto,mh-auto等 | ||
| .__class_write_with_important(m-auto, margin,auto); | ||
| .__class_write_with_important(mh-auto,margin-left margin-right,auto auto); | ||
| .__class_write_with_important(mv-auto,margin-top margin-bottom,auto auto); | ||
| .__class_write_with_important(ml-auto,margin-left,auto); | ||
| .__class_write_with_important(mt-auto,margin-top,auto); | ||
| .__class_write_with_important(mr-auto,margin-right,auto); | ||
| .__class_write_with_important(mb-auto,margin-bottom,auto); | ||
| //子元素填充 | ||
| .child-abs-fill{ | ||
| position: relative; | ||
| >.child{ | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| } | ||
| } | ||
| } | ||
| //::-webkit-scrollbar 滚动条整体部分 | ||
| //::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或向左向右移动） | ||
| //::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb） | ||
| //::-webkit-scrollbar-button 滚动条的轨道的两端按钮，由于通过点击微调小方块的位置。 | ||
| //::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分 | ||
| //::-webkit-scrollbar-corner 边角，即垂直滚动条和水平滚动条相交的地方 | ||
| //::-webkit-resizer 两个滚动条的交汇处上用于拖动调整元素大小的小控件 | ||
| ._scrollSett(@color:#425390, @width:5px){ | ||
| /* 设置滚动条的样式 */ | ||
| &::-webkit-scrollbar { | ||
| width:@width; | ||
| height: @width; | ||
| margin-right: 10px; | ||
| } | ||
| /* 滚动槽 */ | ||
| &::-webkit-scrollbar-track { | ||
| //-webkit-box-shadow:inset 0 0 6px @color; | ||
| //border-radius:10px; | ||
| } | ||
| /* 滚动条滑块 */ | ||
| &::-webkit-scrollbar-thumb { | ||
| border-radius:@width; | ||
| background:@color; | ||
| //-webkit-box-shadow:inset 0 0 6px @color;R | ||
| } | ||
| &::-webkit-scrollbar-thumb:window-inactive { | ||
| //background:rgba(255,0,0,0.4); | ||
| } | ||
| } | ||
| .flex-function(){ | ||
| .flex{ | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: flex-start; | ||
| &.inline{ | ||
| display: inline-flex; | ||
| //修复inline的偏差 | ||
| &.fix{ | ||
| margin-top: -0.14em; | ||
| } | ||
| } | ||
| &.column{ flex-direction : column; } | ||
| &.jc{ | ||
| &-start {justify-content : flex-start; } | ||
| &-center {justify-content : center;} | ||
| &-end {justify-content : flex-end;} | ||
| &-between {justify-content : space-between; } | ||
| &-around {justify-content : space-around; } | ||
| } | ||
| &.between {justify-content : space-between; } | ||
| &.around {justify-content : space-around; } | ||
| &.ai{ | ||
| &-start {align-items : flex-start}; | ||
| &-center {align-items : center;} | ||
| &-end {align-items : flex-end;} | ||
| &-stretch {align-items : stretch;} | ||
| } | ||
| &.ac{ | ||
| &-start {align-content : flex-start;} | ||
| &-center {align-content : center;} | ||
| &-end {align-content : flex-end;} | ||
| &-between {align-content : space-between;} | ||
| &-around {align-content : space-around;} | ||
| &-stretch {align-content : stretch;} | ||
| } | ||
| //flex-wrap设置 | ||
| &.wrap{ | ||
| &{flex-wrap: wrap;} | ||
| &-rev{flex-wrap: wrap-reverse;} | ||
| &-no{flex-wrap: nowrap;} | ||
| &-in{flex-wrap: inherit;} | ||
| &-un{flex-wrap: unset;} | ||
| } | ||
| } | ||
| //align-self系列 | ||
| .as{ | ||
| &-start{align-self : flex-start;} | ||
| &-center{align-self : center;} | ||
| &-end{align-self : flex-end;} | ||
| &-stretch{align-self : stretch;} | ||
| } | ||
| .fx1{ flex: 1;} | ||
| .fx2{ flex: 2;} | ||
| .fx3{ flex: 3;} | ||
| .fx4{ flex: 4;} | ||
| .fx5{ flex: 5;} | ||
| } | ||
| .overflow-function(){ | ||
| .of{ | ||
| &.h {overflow: hidden;} | ||
| &.ya {overflow-y: auto;} | ||
| &.xa {overflow-x: auto;} | ||
| } | ||
| } |
| @import (once) "vars"; | ||
| @import (once) "functions"; | ||
| .dib{display: inline-block;} | ||
| .db{display: block;} | ||
| .di{display: inline;} | ||
| .noselect{user-select: none;} | ||
| //微软雅黑 雅黑英文 黑体 新宋体 | ||
| .ff-yh{ font-family: @font_yahei;} | ||
| //宋体 | ||
| .ff-st{ font-family: @font_songti;} | ||
| //新宋体 | ||
| .ff-xst{ font-family: @font_xinst;} | ||
| //黑体 | ||
| .ff-ht{ font-family: @font_heiti;} | ||
| //简正黑 | ||
| .ff-zh{ font-family: @font_zhenghei;} | ||
| //字符串截取 | ||
| .txcut{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } | ||
| //不可选 | ||
| .noselect{ | ||
| -moz-user-select:none; | ||
| -webkit-user-select:none; | ||
| -ms-user-select:none; | ||
| -khtml-user-select:none; | ||
| user-select:none; | ||
| } | ||
| //铺满到容器（一般用户fiex或者absolute定位） | ||
| .fillin{._fillin;} | ||
| .clear{font-size: 0; height: 0; width: 0; clear: both;} | ||
| .center {._mh(auto);} | ||
| .fs-reset{ | ||
| font-size: 0; | ||
| >*{ | ||
| font-size: 1rem; | ||
| } | ||
| } | ||
| type IDic = {[key:string]:string} | ||
| // 媒体查询 | ||
| const breakPoints = [640, 768, 1024, 1280, 1536, 1920]; | ||
| const mediaQueryDic:IDic = { | ||
| "xs": `(max-width: ${breakPoints[0]}px)`, | ||
| "sm": `(min-width: ${breakPoints[0]}px) and (max-width: ${breakPoints[1]}px)`, | ||
| "md": `(min-width: ${breakPoints[1]}px) and (max-width: ${breakPoints[2]}px)`, | ||
| "lg": `(min-width: ${breakPoints[2]}px) and (max-width: ${breakPoints[3]}px)`, | ||
| "xl": `(min-width: ${breakPoints[3]}px) and (max-width: ${breakPoints[4]}px)`, | ||
| "2xl": `(min-width: ${breakPoints[4]}px) and (max-width: ${breakPoints[5]}px)`, | ||
| "3xl": `(min-width: ${breakPoints[5]}px)`, | ||
| } | ||
| // 伪类 | ||
| const preonduDic:IDic = { | ||
| "ho": "$selector$:hover", | ||
| "be": "$selector$::before", | ||
| "af": "$selector$::after", | ||
| "son": "$selector$ > *", | ||
| "deep-son": "$selector$ *", | ||
| } | ||
| // 媒体查询和伪类 | ||
| const mediaQueryAndPreonduList = Object.keys({ | ||
| ...mediaQueryDic, | ||
| ...preonduDic, | ||
| }); | ||
| const boxModeDic:IDic = { | ||
| m: "margin", | ||
| p: "padding", | ||
| b: "border", | ||
| o: "outline", | ||
| }; | ||
| const directBaseDic:IDic = { | ||
| t: "top", | ||
| r: "right", | ||
| b: "bottom", | ||
| l: "left", | ||
| } | ||
| const directPlusDic:IDic = { | ||
| ...directBaseDic, | ||
| h: "left,right", | ||
| x: "left,right", | ||
| v: "top,bottom", | ||
| y: "top,bottom", | ||
| } | ||
| const sizeValueDic:IDic = { | ||
| ...directBaseDic, | ||
| w: "width", | ||
| h: "height", | ||
| s: "width,height", | ||
| lh: "line-height", | ||
| lhh: "line-height, height", | ||
| f: "font-size", | ||
| fz: "font-size", | ||
| } | ||
| const unitDic:IDic = { | ||
| x: "px", | ||
| px: "px", | ||
| p: "%", | ||
| e: "em", | ||
| r: "rem", | ||
| "vh": "vh", | ||
| "vw": "vw", | ||
| } | ||
| const unitList = "xp".split(""); | ||
| const boxModelKeyList = Object.keys(boxModeDic) | ||
| const directionKeyList = Object.keys(directPlusDic) | ||
| // 媒体查询和伪类正则 | ||
| const mediaQueryAndPreonduReg = `(?:(${mediaQueryAndPreonduList.join("|")})_)?` | ||
| // 数字和单位的正则 | ||
| const numberAndUnitRegString = | ||
| `((\\d+(-\\d+)?)|a)` + | ||
| `(${unitList.join("|")})?` + | ||
| "(i)?" | ||
| ; | ||
| const keys = Object.keys; | ||
| const valueParser = function (value: string, isNega: boolean = false) { | ||
| if (value == "a" || value == "auto") { | ||
| return "auto"; | ||
| } | ||
| if (/^0/.test(value)) { | ||
| value = value.replace(/^0/, "0."); | ||
| } | ||
| value = value.replace(/-/, "."); | ||
| const ratio = isNega ? -1 : 1; | ||
| value = parseFloat(value) * ratio + ""; | ||
| return value; | ||
| } | ||
| const beforeRuleOutput = (conf:any, matched:any, originRet:any) => { | ||
| let { rawSelector, currentSelector, variantHandlers, theme } = conf | ||
| let {prefix} = matched; | ||
| // 媒体查询 | ||
| const mqCondiString = mediaQueryDic[prefix] || ""; | ||
| // 伪类 | ||
| const preonduString = preonduDic[prefix] || ""; | ||
| // 媒体查询 | ||
| if(mqCondiString) { | ||
| // const selector = e(rawSelector); | ||
| const selector = rawSelector; | ||
| const rulePropString = Object.keys(originRet).reduce((result, key)=>{ | ||
| return result + `${key}:${originRet[key]};`; | ||
| }, ""); | ||
| const ruleString = `html ${selector}{${rulePropString}}`; | ||
| const fullString = `@media ${mqCondiString}{${ruleString}}` | ||
| return fullString; | ||
| } | ||
| // 伪类 | ||
| else if(preonduString){ | ||
| const selector = rawSelector; | ||
| const ruleName = "html " + preonduString.replace(/\$selector\$/, selector); | ||
| const rulePropString = Object.keys(originRet).reduce((result, key) => { | ||
| return result + `${key}:${originRet[key]};`; | ||
| }, ""); | ||
| const ruleString = `${ruleName}{${rulePropString}}`; | ||
| return ruleString; | ||
| } | ||
| // 正常规则 | ||
| else{ | ||
| return originRet; | ||
| } | ||
| } | ||
| const boxRuleReg = new RegExp( | ||
| "^" | ||
| + mediaQueryAndPreonduReg | ||
| + "(-)?" | ||
| + `(${boxModelKeyList.join("|")})` | ||
| + `(${directionKeyList.join("|")})?` | ||
| + numberAndUnitRegString | ||
| + "$" | ||
| ) | ||
| const boxRule: [RegExp, Function] = [ | ||
| boxRuleReg, | ||
| (gp:string[], conf:any) => { | ||
| let [, prefix, nega, prop, dire, value, , , unit = "e", important = false] = gp; | ||
| let { rawSelector, currentSelector, variantHandlers, theme } = conf | ||
| console.log(conf, 222); | ||
| important = important ? " !important" : ""; | ||
| const _prop = boxModeDic[prop] | ||
| let _dires = directPlusDic[dire] | ||
| let _unit = unitDic[unit] | ||
| let keys: string[] = []; | ||
| // outline模式下没有方向之别 | ||
| if("o"==prop) { | ||
| _dires = ""; | ||
| } | ||
| // 处理有方向的和没有方向的情况 | ||
| if(_dires) { | ||
| _dires.split(",").forEach((_dire:string) => { | ||
| keys.push(_prop + "-" + _dire); | ||
| }) | ||
| }else{ | ||
| keys.push(_prop); | ||
| } | ||
| //处理border和outline的情况 | ||
| if (["b", "o"].indexOf(prop) >= 0) { | ||
| keys = keys.map(s => s + "-width"); | ||
| } | ||
| let _value = value; | ||
| _value = valueParser(_value, !!nega); | ||
| const ret = keys.reduce((result:IDic, key) => { | ||
| result[key] = _value + _unit + important; | ||
| return result; | ||
| }, {}); | ||
| return beforeRuleOutput(conf, {prefix}, ret); | ||
| } | ||
| ]; | ||
| const sizeRule = [ | ||
| new RegExp( | ||
| "^" | ||
| + mediaQueryAndPreonduReg | ||
| + "(-)?" | ||
| + `(${keys(sizeValueDic).join("|")})` | ||
| + numberAndUnitRegString | ||
| + "$" | ||
| ), | ||
| (gp:string[], conf:any) => { | ||
| let [, prefix, nega, prop, value, , , unit = "e", important = false] = gp; | ||
| important = important ? " !important" : ""; | ||
| const _prop = sizeValueDic[prop] | ||
| let keys: string[] = _prop.split(","); | ||
| let _value = valueParser(value, !!nega); | ||
| if (_value != "auto") { | ||
| _value = _value + unitDic[unit] + important; | ||
| } | ||
| const ret = keys.reduce((result:IDic, key) => { | ||
| result[key] = _value; | ||
| return result; | ||
| }, {}); | ||
| return beforeRuleOutput(conf, {prefix}, ret); | ||
| } | ||
| ] | ||
| // 颜色相关 | ||
| const colorDic:IDic = { | ||
| "co": "color", | ||
| "cl": "color", | ||
| "bg": "background-color", | ||
| "bc": "border-color", | ||
| } | ||
| const colorRuleRgString = `^${mediaQueryAndPreonduReg}(${Object.keys(colorDic).join("|")})-([\\w\\d#]+)(i)?$`; | ||
| const colorRule = [ | ||
| new RegExp(colorRuleRgString), | ||
| (gp:string[], conf:any) => { | ||
| let [, prefix, type, value, important = false] = gp; | ||
| const {colors} = conf.theme; | ||
| const [__, color, index = "DEFAULT"] = value.match(/([a-zA-Z]+)(\d+)?/) as any[]; | ||
| let colorValue = ""; | ||
| const colorSeries = colors[color] | ||
| if (colorSeries) { | ||
| colorValue = colorSeries[index] || ""; | ||
| } | ||
| if (!colorValue) { | ||
| return ""; | ||
| } | ||
| if (important) { | ||
| colorValue += " !important"; | ||
| } | ||
| const colorProp = colorDic[type]; | ||
| const ret = {[colorProp]: colorValue}; | ||
| return beforeRuleOutput(conf, {prefix}, ret); | ||
| } | ||
| ] | ||
| const regexVueTemplate = /<template.*?lang=['"]pug['"][^>]*?>\r?\n([\s\S]*?\n)<\/template>/gm; | ||
| /** | ||
| * 解析pug中的unocss定义 | ||
| * @param pugImporter {} 即import("pug") | ||
| */ | ||
| const extractorPugFactory = function(pugImporter:Promise<any>){ | ||
| return function extractorPug() { | ||
| async function compile(code:string, id:string) { | ||
| //@ts-ignore | ||
| const Pug = await pugImporter; | ||
| try { | ||
| return Pug.compile(code, {filename: id})(); | ||
| } catch { | ||
| } | ||
| } | ||
| return { | ||
| name: "pug", | ||
| order: -1, | ||
| async extract(ctx:any) { | ||
| if (!ctx.id) | ||
| return; | ||
| if (ctx.id.match(/\.pug$/) || ctx.id.match(/\?vue&type=template/)) { | ||
| try { | ||
| ctx.code = await compile(ctx.code, ctx.id) || ctx.code; | ||
| } catch { | ||
| } | ||
| } else if (ctx.id.match(/\.vue$/)) { | ||
| const matches = Array.from(ctx.code.matchAll(regexVueTemplate)) as string[]; | ||
| let tail = ""; | ||
| for (const match of matches) { | ||
| if (match && match[1]) { | ||
| tail += `\n${await compile(match[1], ctx.id)}`; | ||
| } | ||
| } | ||
| if (tail) { | ||
| ctx.code = `${ctx.code}\n\n${tail}`; | ||
| } | ||
| } | ||
| return void 0; | ||
| } | ||
| }; | ||
| } | ||
| } | ||
| const rules = [sizeRule, boxRule, colorRule]; | ||
| export { | ||
| sizeRule, | ||
| boxRule, | ||
| colorRule, | ||
| rules, | ||
| extractorPugFactory, | ||
| } | ||
| /** | ||
| import {rules, extractorPugFactory} from "luss/dist/unocss-luss"; | ||
| const extractorPug = extractorPugFactory(import("pug")); | ||
| import {extractorSplit, presetUno} from 'unocss' | ||
| Unocss({ | ||
| extractors: [ | ||
| extractorPug(), | ||
| extractorSplit, | ||
| ], | ||
| rules: [ | ||
| boxRule, sizeRule, | ||
| ], | ||
| }) | ||
| */ |
| { | ||
| "compilerOptions": { | ||
| "declaration": true, | ||
| "declarationMap": false, | ||
| "outDir": "./dist", | ||
| "target": "esnext", | ||
| "useDefineForClassFields": true, | ||
| "module": "commonjs", | ||
| "moduleResolution": "node", | ||
| "strict": true, | ||
| "jsx": "preserve", | ||
| "sourceMap": true, | ||
| "resolveJsonModule": true, | ||
| "isolatedModules": true, | ||
| "esModuleInterop": true, | ||
| "lib": [ | ||
| "es2015", | ||
| "dom" | ||
| ], | ||
| "skipLibCheck": true | ||
| }, | ||
| "include": [ | ||
| "src/**/*.ts" | ||
| ] | ||
| } |
+21
-28
@@ -1,15 +0,9 @@ | ||
| var gulp = require("gulp"); | ||
| var less = require("gulp-less"); | ||
| var rename = require('gulp-rename'); | ||
| const gulp = require("gulp"); | ||
| const less = require("gulp-less"); | ||
| const rename = require('gulp-rename'); | ||
| const rm = require("rimraf"); | ||
| const cssmin = require('gulp-minify-css'); | ||
| const sourcemaps = require('gulp-sourcemaps'); | ||
| const cleanCSS = require('gulp-clean-css'); | ||
| const {watch, task, series, parallel} = gulp; | ||
| const lessGlob = ["src/**.less","!**/tool.less"]; | ||
| var lessGlob = ["src/**.less","!**/tool.less"]; | ||
| function swallowError(error){ | ||
@@ -19,16 +13,11 @@ console.error("已捕获错误:",error.toString()); | ||
| gulp.task("build-less",async function(){ | ||
| await new Promise(resolve=> rm("dist", resolve)); | ||
| const getLessBuilder = async (src, distName)=>{ | ||
| await gulp | ||
| .src("src/dist-index.less") | ||
| .pipe(less({ | ||
| })) | ||
| .src(src) | ||
| .pipe(less({})) | ||
| .pipe(rename(file=>{ | ||
| file.basename = "index.uncompressed"; | ||
| file.basename = `${distName}.uncompressed`; | ||
| })) | ||
| .pipe(gulp.dest("dist")) | ||
| .pipe( | ||
| gulp.dest("dist") | ||
| ) | ||
| .pipe( | ||
| cleanCSS({ | ||
@@ -52,17 +41,21 @@ backgroundClipMerging: true, // controls background-clip merging into shorthand | ||
| .pipe(rename(function(file){ | ||
| file.basename = "index"; | ||
| file.basename = distName; | ||
| })) | ||
| .pipe( | ||
| gulp.dest("dist") | ||
| ) | ||
| ; | ||
| .pipe(gulp.dest("dist")) | ||
| } | ||
| gulp.task("build-less",async function(){ | ||
| await new Promise(resolve=> rm("dist", resolve)); | ||
| await getLessBuilder("src/dist-index.less","index"); | ||
| await getLessBuilder("src/dist-lite.less","lite"); | ||
| await getLessBuilder("src/dist-reset.less","reset"); | ||
| }); | ||
| task("watch-less",function(){ | ||
| task("watch-less", function () { | ||
| watch(lessGlob, series(["build-less"])); | ||
| }) | ||
| }); | ||
+26
-23
| { | ||
| "version": "2.0.6", | ||
| "name": "luss", | ||
| "description": "A less tookit", | ||
| "homepage": "https://github.com/ccwq/luss", | ||
| "devDependencies": { | ||
| "gulp": "^4.0.0", | ||
| "gulp-less": "^4.0.1", | ||
| "gulp-minify-css": "^1.2.4", | ||
| "gulp-rename": "^1.4.0", | ||
| "gulp-sourcemaps": "^2.6.5", | ||
| "rimraf": "^2.6.3" | ||
| }, | ||
| "dependencies": { | ||
| "gulp-clean-css": "^4.3.0" | ||
| }, | ||
| "scripts": { | ||
| "build": "gulp build-less", | ||
| "watch": "gulp watch-less", | ||
| "publish major": "npm run build && snpm version major && snpm publish", | ||
| "publish minor": "npm run build && snpm version minor && snpm publish", | ||
| "publish patch": "npm run build && snpm version patch && snpm publish" | ||
| } | ||
| } | ||
| "version": "3.0.0", | ||
| "name": "luss", | ||
| "description": "A less tookit", | ||
| "homepage": "https://github.com/ccwq/luss", | ||
| "devDependencies": { | ||
| "gulp": "^4.0.0", | ||
| "gulp-less": "^4.0.1", | ||
| "gulp-minify-css": "^1.2.4", | ||
| "gulp-rename": "^1.4.0", | ||
| "gulp-sourcemaps": "^2.6.5", | ||
| "gulp-typescript": "6.0.0-alpha.1", | ||
| "rimraf": "^2.6.3", | ||
| "typescript": "^4.7.4", | ||
| "unocss": "^0.41.1" | ||
| }, | ||
| "dependencies": { | ||
| "gulp-clean-css": "^4.3.0" | ||
| }, | ||
| "scripts": { | ||
| "build": "gulp build-less && tsc -p tsconfig.json", | ||
| "watch": "gulp watch-less", | ||
| "publish major": "npm run build && snpm version major && snpm publish", | ||
| "publish minor": "npm run build && snpm version minor && snpm publish", | ||
| "publish patch": "npm run build && snpm version patch && snpm publish" | ||
| } | ||
| } |
+40
-1
@@ -0,3 +1,42 @@ | ||
| # 重大重构 | ||
| 使用unocss重新实现大部分规则,以减少dist。 | ||
| unocss: https://github.com/unocss/unocss | ||
| 增加unocss的规则,以及对官方extractorPug问题的修复,解决在某些情况下无法读取pug class规则的问题。 | ||
| vite项目中使用 | ||
| ```json | ||
| import Unocss from 'unocss/vite' | ||
| import {extractorSplit, presetUno, Rule} from 'unocss' | ||
| import {rules, extractorPugFactory} from "luss/dist/unocss-luss" | ||
| /* | ||
| 该语句可能在ts中被标红 | ||
| 需要再tsconfig.node.json增加如下配置 | ||
| compilerOptions.lib: ["es2015"] | ||
| */ | ||
| const extractorPug = extractorPugFactory(import("pug")) | ||
| export default { | ||
| plugins: [ | ||
| Unocss({ | ||
| //@ts-ignore | ||
| rules: [ | ||
| //@ts-ignore | ||
| ...rules, | ||
| ], | ||
| extractors: [ | ||
| extractorPug(), | ||
| extractorSplit, | ||
| ], | ||
| }) | ||
| ], | ||
| } | ||
| ``` | ||
| # 引用: | ||
| ease部分的内容来自qivhou的仓库 | ||
@@ -4,0 +43,0 @@ https://github.com/qivhou/easing.less |
@@ -1,9 +0,10 @@ | ||
| @import "index.less"; | ||
| @import (once) "vars"; | ||
| @import "functions"; | ||
| .reset-function; | ||
| @import (once) "rules"; | ||
| .shortcut-class-function; | ||
| .md-colors-function; | ||
| .reset; | ||
| .shortcutClass; | ||
| .mdColorClass; | ||
| .flex-function; | ||
| .overflow-function; |
+2
-535
@@ -1,536 +0,3 @@ | ||
| //默认变量 | ||
| @cell:12px; | ||
| @fsize:12px; | ||
| //方位集合 | ||
| @direct-sets: { | ||
| t:top; | ||
| r:right; | ||
| b:bottom; | ||
| l:left; | ||
| }; | ||
| //和模型集合 | ||
| @box-sets: { | ||
| m:margin; | ||
| p:padding; | ||
| }; | ||
| //排列方向集合 | ||
| @combie-direct-sets:{ | ||
| v:top bottom; | ||
| h:left right; | ||
| }; | ||
| @font_zhenghei:"Microsoft JhengHei"; | ||
| @font_yahei:"\5FAE\8F6F\96C5\9ED1", "Microsoft YaHei", "\9ED1\4F53", "\65B0\5B8B\4F53"; | ||
| @font_songti:"\5B8B\4F53", "SimSun"; | ||
| @font_xinst:"\65B0\5B8B\4F53", "NSimSun"; | ||
| @font_heiti:"\9ED1\4F53", "SimHei"; | ||
| @font_arial:"Arial"; | ||
| //ie上需要垂直居中时候，字体大小和容器高度的比率 | ||
| @ie7_vm_ratio:0.905; | ||
| ._lh(@height){ | ||
| line-height: @height; | ||
| height: @height; | ||
| } | ||
| .noselect{ | ||
| user-select: none; | ||
| } | ||
| @import "rule-utils"; | ||
| @import "functions"; | ||
| @import (once) "vars"; | ||
| .dib{display: inline-block;} | ||
| .db{display: block;} | ||
| .di{display: inline;} | ||
| .mdColorClass(){ | ||
| @ls:@colors-list; | ||
| .loopColorList(@ls); | ||
| } | ||
| //微软雅黑 雅黑英文 黑体 新宋体 | ||
| .ff-yh{ font-family: @font_yahei;} | ||
| //宋体 | ||
| .ff-st{ font-family: @font_songti;} | ||
| //新宋体 | ||
| .ff-xst{ font-family: @font_xinst;} | ||
| //黑体 | ||
| .ff-ht{ font-family: @font_heiti;} | ||
| //简正黑 | ||
| .ff-zh{ font-family: @font_zhenghei;} | ||
| //字符串截取 | ||
| .txcut{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } | ||
| //不可选 | ||
| .noselect{ | ||
| -moz-user-select:none; | ||
| -webkit-user-select:none; | ||
| -ms-user-select:none; | ||
| -khtml-user-select:none; | ||
| user-select:none; | ||
| } | ||
| //铺满到容器（一般用户fiex或者absolute定位） | ||
| .fillin{._fillin;} | ||
| .clear{font-size: 0; height: 0; width: 0; clear: both;} | ||
| .center {._mh(auto);} | ||
| .fs-reset{ | ||
| font-size: 0; | ||
| >*{ | ||
| font-size: 1rem; | ||
| } | ||
| } | ||
| .shortcutClass(){ | ||
| //宽度生成 | ||
| .ew{ | ||
| each(range(3, 30), { | ||
| &.w@{value}{ | ||
| width:unit(@value, em) !important; | ||
| } | ||
| }) | ||
| } | ||
| //一个类似表单布局的结构 | ||
| .form-gala{ | ||
| >.item{ | ||
| margin: 0.75em 0; | ||
| display: flex; | ||
| align-items: center; | ||
| >.label{ | ||
| padding-right: 0.75em; | ||
| } | ||
| >.el{ | ||
| flex: 1; | ||
| } | ||
| .force{ | ||
| each(range(4, 24), { | ||
| &.w@{value}{ | ||
| flex: unset; | ||
| flex-shrink: 0; | ||
| width:unit(@value + 0.5, em); | ||
| } | ||
| }) | ||
| } | ||
| } | ||
| each(range(4, 21), { | ||
| &.w@{value},&.lw@{value}{ | ||
| >.item{ | ||
| >.label{ | ||
| flex: unset; | ||
| width:unit(@value + 0.5, em); | ||
| } | ||
| } | ||
| } | ||
| }) | ||
| &.label-right{ | ||
| .item{ | ||
| >.label{ | ||
| text-align: right; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| .__class_write(bg-icon, background-repeat background-position, no-repeat ~"50% 50%"); | ||
| .__class_write(noselect, -moz-user-select -webkit-user-select -ms-user-select -khtml-user-select user-select, none none none none none); | ||
| .__class_write(txcut, overflow -text-overflow white-space, hidden ellipsis nowrap); | ||
| .__class_write_with_important(ib, display, inline-block); | ||
| .__class_write_with_important(db, display, block); | ||
| .__class_write_with_important(center, margin-left margin-right,auto auto); | ||
| // 不可见，但是仍可以加载 | ||
| .__class_write_with_important(v-hide,top left position clip clip, -50px -50px absolute rect(1px 1px 1px 1px) rect(1px, 1px, 1px, 1px)); | ||
| //center | ||
| .__class_write_with_important(center,margin-left margin-right,auto auto); | ||
| //对其方式 | ||
| .__class_write_with_important(tr,text-align,right); | ||
| .__class_write_with_important(tc,text-align,center); | ||
| .__class_write_with_important(tl,text-align,left); | ||
| .__class_write_with_important(pa,position,absolute); | ||
| .__class_write_with_important(pr,position,relative); | ||
| .__class_write_with_important(ps,position,static); | ||
| .__class_write_with_important(db, display,block); | ||
| .__class_write_with_important(di, display, inline); | ||
| .__class_write_with_important(dib,display,inline-block); | ||
| // | ||
| .__class_write_with_important(cp,cursor,pointer); | ||
| .__class_write_with_important(cd,cursor,default); | ||
| .__class_write_with_important(bbox, box-sizing, border-box); | ||
| .__class_write_with_important(cbox, box-sizing, content-box); | ||
| // | ||
| .__class_write_with_important(wnw, white-space, nowrap); | ||
| .__class_write_with_important(wnn, white-space, normal); | ||
| .__class_write_with_important(hide, display, none); | ||
| .__class_write_with_important(bg-coveride, background-size, cover); | ||
| .__class_write_with_important(background-size, background-size, contain); | ||
| .__class_write_with_important(fit-cover, object-fit, cover); | ||
| .__class_write_with_important(fit-contain, object-fit, contain); | ||
| .__class_write_with_important(ts-late-x--50p, transform, translateX(-50%)); | ||
| .__class_write_with_important(ts-late-y--50p, transform, translateY(-50%)); | ||
| .__class_write(bd1px, border-width border-style, 1px solid); | ||
| .flex{ | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: flex-start; | ||
| &.inline{ | ||
| display: inline-flex; | ||
| //修复inline的偏差 | ||
| &.fix{ | ||
| margin-top: -0.14em; | ||
| } | ||
| } | ||
| &.column{ flex-direction : column; } | ||
| &.jc{ | ||
| &-start {justify-content : flex-start; } | ||
| &-center {justify-content : center;} | ||
| &-end {justify-content : flex-end;} | ||
| &-between {justify-content : space-between; } | ||
| &-around {justify-content : space-around; } | ||
| } | ||
| &.between {justify-content : space-between; } | ||
| &.around {justify-content : space-around; } | ||
| &.ai{ | ||
| &-start {align-items : flex-start}; | ||
| &-center {align-items : center;} | ||
| &-end {align-items : flex-end;} | ||
| &-stretch {align-items : stretch;} | ||
| } | ||
| &.ac{ | ||
| &-start {align-content : flex-start;} | ||
| &-center {align-content : center;} | ||
| &-end {align-content : flex-end;} | ||
| &-between {align-content : space-between;} | ||
| &-around {align-content : space-around;} | ||
| &-stretch {align-content : stretch;} | ||
| } | ||
| //flex-wrap设置 | ||
| &.wrap{ | ||
| &{flex-wrap: wrap;} | ||
| &-rev{flex-wrap: wrap-reverse;} | ||
| &-no{flex-wrap: nowrap;} | ||
| &-in{flex-wrap: inherit;} | ||
| &-un{flex-wrap: unset;} | ||
| } | ||
| } | ||
| //align-self系列 | ||
| .as{ | ||
| &-start{align-self : flex-start;} | ||
| &-center{align-self : center;} | ||
| &-end{align-self : flex-end;} | ||
| &-stretch{align-self : stretch;} | ||
| } | ||
| .fx1{ flex: 1;} | ||
| .fx2{ flex: 2;} | ||
| .fx3{ flex: 3;} | ||
| .fx4{ flex: 4;} | ||
| .fx5{ flex: 5;} | ||
| .of{ | ||
| &.h {overflow: hidden;} | ||
| &.ya {overflow-y: auto;} | ||
| &.xa {overflow-x: auto;} | ||
| } | ||
| each(range(0, 5), { | ||
| .__class_write_with_important(~"h@{value}px", height , unit(@value, px)); | ||
| .__class_write_with_important(~"w@{value}px", height ,unit(@value, px)); | ||
| .__class_write_with_important(~"bt@{value}px", border-top-width ,unit(@value, px)); | ||
| .__class_write_with_important(~"br@{value}px", border-right-width , unit(@value, px)); | ||
| .__class_write_with_important(~"bb@{value}px", border-bottom-width , unit(@value, px)); | ||
| .__class_write_with_important(~"bl@{value}px", border-left-width , unit(@value, px)); | ||
| .__class_write_with_important(~"b@{value}px", border-width , unit(@value, px)); | ||
| .__class_write_with_important(~"s@{value}px", width height, unit(@value, px)); | ||
| }) | ||
| .__class_write_with_important(b-solid, brder-style, solid); | ||
| .__class_write_with_important(b-dotted, brder-style, dotted); | ||
| .__class_write_with_important(b-dashed, brder-style, dashed); | ||
| .__class_write_with_important(b-double, brder-style, double); | ||
| .__class_write_with_important(h-auto, height, auto); | ||
| .__class_write_with_important(w-auto, width, auto); | ||
| .__class_write_with_important(bg-size-cover, background-size, cover); | ||
| .__class_write_with_important(bg-size-contain, background-size, contain); | ||
| .__class_write_with_important(bg-size-100p, background-size, ~"100% 100%"); | ||
| //z的设置 | ||
| each(range(0, 5000, 100){ | ||
| .__class_write_with_important(~"z@{value}", z-index ,@value); | ||
| }) | ||
| //border-raduis | ||
| each(0 1 2 3 4 5 7 8 9,{ | ||
| .__class_write_with_important(~"bdr@{value}", border-radius ,unit(@value, px)); | ||
| }) | ||
| .__class_write_with_important(bdr50p, border-radius, 50%); | ||
| //font-width | ||
| each(range(100, 700, 100){ | ||
| .__class_write_with_important(~"fw@{value}", font-weight ,@value); | ||
| }) | ||
| .__class_write_with_important(fw-auto, font-weight ,inherit); | ||
| .toolkitGen(@gp, @value-list){ | ||
| @n:length(@value-list); | ||
| //距离 | ||
| .write(@key,@value) when(@gp = "distance"){ | ||
| .__class_write_with_important(~"m@{key}", margin, @value); | ||
| .__class_write_with_important(~"mh@{key}", margin-left margin-right, @value @value); | ||
| .__class_write_with_important(~"mv@{key}", margin-top margin-bottom, @value @value); | ||
| .__class_write_with_important(~"ml@{key}", margin-left, @value); | ||
| .__class_write_with_important(~"mt@{key}", margin-top, @value); | ||
| .__class_write_with_important(~"mr@{key}", margin-right, @value); | ||
| .__class_write_with_important(~"mb@{key}", margin-bottom, @value); | ||
| .__class_write_with_important(~"p@{key}", padding, @value); | ||
| .__class_write_with_important(~"ph@{key}", padding-left padding-right, @value @value); | ||
| .__class_write_with_important(~"pv@{key}", padding-top padding-bottom, @value @value); | ||
| .__class_write_with_important(~"pl@{key}", padding-left, @value); | ||
| .__class_write_with_important(~"pt@{key}", padding-top, @value); | ||
| .__class_write_with_important(~"pr@{key}", padding-right, @value); | ||
| .__class_write_with_important(~"pb@{key}", padding-bottom, @value); | ||
| } | ||
| //大小 | ||
| .write(@key,@value) when(@gp = "size"){ | ||
| .__class_write_with_important(~"fz@{key}", font-size, @value); | ||
| .__class_write_with_important(~"fz@{key}-rem", font-size, unit(@value, rem)); | ||
| .__class_write_with_important(~"w@{key}", width, @value); | ||
| .__class_write_with_important(~"h@{key}", height, @value); | ||
| .__class_write_with_important(~"lh@{key}", line-height, @value); | ||
| .__class_write_with_important(~"ti@{key}", text-indent, @value); | ||
| //.__class_write_with_important(~"hgap@{key}", height, @value); | ||
| //.__class_write_with_important(~"vgap@{key}", width display, @value inline-block); | ||
| } | ||
| //vwvh | ||
| .write(@key,@value) when(@gp = "vwvh"){ | ||
| @kk:replace(~"@{value}", "\.", "d", "g"); | ||
| .__class_write_with_important(~"vw@{kk}", width, ~"@{value}vw"); | ||
| .__class_write_with_important(~"vh@{kk}", height, ~"@{value}vh"); | ||
| } | ||
| .loop(@n)when(@n>0){ | ||
| @val:extract(@value-list,@n); | ||
| //小于1且非百分比数字 | ||
| //乘以10,去掉小数点，前面加0 | ||
| .tranKey(@number)when(@val < 1) and not(ispercentage(@val)){ | ||
| @valn:unit(@number * 10); | ||
| @valn2:replace(~"0@{valn}","\.","","g"); | ||
| .write(@valn2,@val); | ||
| } | ||
| //大于1非百分比数字 | ||
| //乘以10,小数点换为d | ||
| .tranKey(@number)when(@val >= 1) and not(ispercentage(@val)){ | ||
| @valn:unit(@number * 10); | ||
| @valn2:replace(~"@{valn}","\.","d","g"); | ||
| .write(@valn2,@val); | ||
| } | ||
| //百分比 | ||
| .tranKey(@number)when(ispercentage(@val)){ | ||
| @valn:unit(@number); | ||
| @valn2:replace(~"@{valn}","\.","d","g"); | ||
| @key:@valn2; | ||
| @value:@val; | ||
| .__class_write_with_important(~"w@{key}p", width, @value); | ||
| .__class_write_with_important(~"h@{key}p", height, @value); | ||
| .__class_write_with_important(~"l@{key}p", left, @value); | ||
| .__class_write_with_important(~"t@{key}p", top, @value); | ||
| .__class_write_with_important(~"r@{key}p", right, @value); | ||
| .__class_write_with_important(~"b@{key}p", bottom, @value); | ||
| //.__class_write_with_important(~"pl@{key}p", padding-left, @value); | ||
| //.__class_write_with_important(~"pt@{key}p", padding-top, @value); | ||
| //.__class_write_with_important(~"pr@{key}p", padding-right, @value); | ||
| //.__class_write_with_important(~"pb@{key}p", padding-bottom, @value); | ||
| } | ||
| //offset | ||
| .tranKey(@val) when(@gp="offset"){ | ||
| .__class_write_with_important(~"offset-x-@{val}", left, unit(@val,px)); | ||
| .__class_write_with_important(~"offset-y-@{val}", top, unit(@val,px)); | ||
| } | ||
| .tranKey(@val); | ||
| .loop(@n - 1); | ||
| } | ||
| .loop(@n) | ||
| } | ||
| @values:@size_range; | ||
| //距离组 //.mt1.mb025 | ||
| .toolkitGen("distance", @values); | ||
| //大小 //.fz075 fz95 fz10d5 w08 w15 w17d5 .scale09 | ||
| .toolkitGen("size", @values); | ||
| //透明 .op01.op05.op10 | ||
| each(@opcity_range{ | ||
| @val:@value/100; | ||
| @k: replace( | ||
| .floatPadStarts(@value/10, 2)[@__], | ||
| "\.", "d", "g" | ||
| ); | ||
| //@k: .floatPadStarts(@value/10, 5)[@__]; | ||
| .__class_write_with_important( ~"op@{k}", opacity, @val); | ||
| .__class_write_with_important-hover( ~"op@{k}", opacity, @val); | ||
| }) | ||
| //scale08_5 | ||
| .eachRange(@scale_range, { | ||
| @val:@value/100; | ||
| @k: replace( | ||
| .floatPadStarts(@value/10, 2)[@__], | ||
| "\.", "d", "g" | ||
| ); | ||
| .__class_write_with_important( ~"scale@{k}", transform, ~"scale(@{val})"); | ||
| .__class_write_with_important-hover( ~"scale@{k}", transform, ~"scale(@{val})"); | ||
| }); | ||
| /*缩放 .scale01.scale10*/ | ||
| //.toolkitGen("scale",0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.85 0.9 0.75 1 1.05 1.1 1.15 1.2 1.25 1.3 1.4 1.5 1.75 1.8 2 2.1 2.4 2.7 3.0 3 3.3); | ||
| //百分比 .w100p.h33d33p.l33d33p.t100p.pt16d66p | ||
| .toolkitGen("%",33.33% 100%); | ||
| .toolkitGen("%",0% 5% 10% 15% 20% 25% 30% 35% 40% 45% 50% 55% 60% 65% 70% 75% 80% 85% 90% 95%); | ||
| //vh,vw | ||
| .toolkitGen("vwvh",0 10 12.5 20 25 30 33.33 35 36 50 66.66 75 80 90 100); | ||
| //offset | ||
| .toolkitGen("offset", range(-20,20,1)); | ||
| //m-auto,mh-auto等 | ||
| .__class_write_with_important(m-auto, margin,auto); | ||
| .__class_write_with_important(mh-auto,margin-left margin-right,auto auto); | ||
| .__class_write_with_important(mv-auto,margin-top margin-bottom,auto auto); | ||
| .__class_write_with_important(ml-auto,margin-left,auto); | ||
| .__class_write_with_important(mt-auto,margin-top,auto); | ||
| .__class_write_with_important(mr-auto,margin-right,auto); | ||
| .__class_write_with_important(mb-auto,margin-bottom,auto); | ||
| //子元素填充 | ||
| .child-abs-fill{ | ||
| position: relative; | ||
| >.child{ | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| } | ||
| } | ||
| } | ||
| //::-webkit-scrollbar 滚动条整体部分 | ||
| //::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或向左向右移动） | ||
| //::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb） | ||
| //::-webkit-scrollbar-button 滚动条的轨道的两端按钮，由于通过点击微调小方块的位置。 | ||
| //::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分 | ||
| //::-webkit-scrollbar-corner 边角，即垂直滚动条和水平滚动条相交的地方 | ||
| //::-webkit-resizer 两个滚动条的交汇处上用于拖动调整元素大小的小控件 | ||
| ._scrollSett(@color:#425390, @width:5px){ | ||
| /* 设置滚动条的样式 */ | ||
| &::-webkit-scrollbar { | ||
| width:@width; | ||
| height: @width; | ||
| margin-right: 10px; | ||
| } | ||
| /* 滚动槽 */ | ||
| &::-webkit-scrollbar-track { | ||
| //-webkit-box-shadow:inset 0 0 6px @color; | ||
| //border-radius:10px; | ||
| } | ||
| /* 滚动条滑块 */ | ||
| &::-webkit-scrollbar-thumb { | ||
| border-radius:@width; | ||
| background:@color; | ||
| //-webkit-box-shadow:inset 0 0 6px @color;R | ||
| } | ||
| &::-webkit-scrollbar-thumb:window-inactive { | ||
| //background:rgba(255,0,0,0.4); | ||
| } | ||
| } | ||
| //.mdColorClass; | ||
| //.shortcutClass; | ||
| // | ||
| //@import "css-rules"; |
+40
-0
@@ -0,2 +1,6 @@ | ||
| //默认变量 | ||
| @cell:12px; | ||
| @fsize:12px; | ||
| //bootstrap对屏幕尺寸的区分 | ||
@@ -545,1 +549,37 @@ | ||
| @colors-list: red50,red100,red200,red300,red400,red500,red600,red700,red800,red900,redA100,redA200,redA400,redA700,red,pink50,pink100,pink200,pink300,pink400,pink500,pink600,pink700,pink800,pink900,pinkA100,pinkA200,pinkA400,pinkA700,pink,purple50,purple100,purple200,purple300,purple400,purple500,purple600,purple700,purple800,purple900,purpleA100,purpleA200,purpleA400,purpleA700,purple,deepPurple50,deepPurple100,deepPurple200,deepPurple300,deepPurple400,deepPurple500,deepPurple600,deepPurple700,deepPurple800,deepPurple900,deepPurpleA100,deepPurpleA200,deepPurpleA400,deepPurpleA700,deepPurple,indigo50,indigo100,indigo200,indigo300,indigo400,indigo500,indigo600,indigo700,indigo800,indigo900,indigoA100,indigoA200,indigoA400,indigoA700,indigo,blue50,blue100,blue200,blue300,blue400,blue500,blue600,blue700,blue800,blue900,blueA100,blueA200,blueA400,blueA700,blue,lightBlue50,lightBlue100,lightBlue200,lightBlue300,lightBlue400,lightBlue500,lightBlue600,lightBlue700,lightBlue800,lightBlue900,lightBlueA100,lightBlueA200,lightBlueA400,lightBlueA700,lightBlue,cyan50,cyan100,cyan200,cyan300,cyan400,cyan500,cyan600,cyan700,cyan800,cyan900,cyanA100,cyanA200,cyanA400,cyanA700,cyan,teal50,teal100,teal200,teal300,teal400,teal500,teal600,teal700,teal800,teal900,tealA100,tealA200,tealA400,tealA700,teal,green50,green100,green200,green300,green400,green500,green600,green700,green800,green900,greenA100,greenA200,greenA400,greenA700,green,lightGreen50,lightGreen100,lightGreen200,lightGreen300,lightGreen400,lightGreen500,lightGreen600,lightGreen700,lightGreen800,lightGreen900,lightGreenA100,lightGreenA200,lightGreenA400,lightGreenA700,lightGreen,lime50,lime100,lime200,lime300,lime400,lime500,lime600,lime700,lime800,lime900,limeA100,limeA200,limeA400,limeA700,lime,yellow50,yellow100,yellow200,yellow300,yellow400,yellow500,yellow600,yellow700,yellow800,yellow900,yellowA100,yellowA200,yellowA400,yellowA700,yellow,amber50,amber100,amber200,amber300,amber400,amber500,amber600,amber700,amber800,amber900,amberA100,amberA200,amberA400,amberA700,amber,orange50,orange100,orange200,orange300,orange400,orange500,orange600,orange700,orange800,orange900,orangeA100,orangeA200,orangeA400,orangeA700,orange,deepOrange50,deepOrange100,deepOrange200,deepOrange300,deepOrange400,deepOrange500,deepOrange600,deepOrange700,deepOrange800,deepOrange900,deepOrangeA100,deepOrangeA200,deepOrangeA400,deepOrangeA700,deepOrange,brown50,brown100,brown200,brown300,brown400,brown500,brown600,brown700,brown800,brown900,brown,blueGrey50,blueGrey100,blueGrey200,blueGrey300,blueGrey400,blueGrey500,blueGrey600,blueGrey700,blueGrey800,blueGrey900,blueGrey,grey50,grey100,grey200,grey300,grey400,grey500,grey600,grey700,grey800,grey900,grey,black,white,transparent,fullBlack,darkBlack,lightBlack,minBlack,faintBlack,fullWhite,darkWhite,lightWhite; | ||
| //方位集合 | ||
| @direct-sets: { | ||
| t:top; | ||
| r:right; | ||
| b:bottom; | ||
| l:left; | ||
| }; | ||
| //和模型集合 | ||
| @box-sets: { | ||
| m:margin; | ||
| p:padding; | ||
| }; | ||
| //排列方向集合 | ||
| @combie-direct-sets:{ | ||
| v:top bottom; | ||
| h:left right; | ||
| }; | ||
| @font_zhenghei:"Microsoft JhengHei"; | ||
| @font_yahei:"\5FAE\8F6F\96C5\9ED1", "Microsoft YaHei", "\9ED1\4F53", "\65B0\5B8B\4F53"; | ||
| @font_songti:"\5B8B\4F53", "SimSun"; | ||
| @font_xinst:"\65B0\5B8B\4F53", "NSimSun"; | ||
| @font_heiti:"\9ED1\4F53", "SimHei"; | ||
| @font_arial:"Arial"; | ||
| //ie上需要垂直居中时候，字体大小和容器高度的比率 | ||
| @ie7_vm_ratio:0.905; | ||
| @import (once) "vars"; | ||
| //设置了单位 | ||
| .__write(@key,@value,@defaultUnit:px) when not(get-unit(@value)=~"") or not(isnumber(@value)){ | ||
| @{key}:@value; | ||
| } | ||
| //没有设置单位的情况 | ||
| .__write(@key,@value,@defaultUnit:px) when(get-unit(@value)=~"") and (isnumber(@value)){ | ||
| @{key}:unit(@value,@defaultUnit); | ||
| } | ||
| .__class_write(@className,@keyList,@valueList){ | ||
| .@{className}{ | ||
| .__writes(@keyList,@valueList); | ||
| } | ||
| } | ||
| .__class_write-hover(@className,@keyList,@valueList){ | ||
| .@{className}{ | ||
| &:hover{ | ||
| .__writes(@keyList,@valueList); | ||
| } | ||
| } | ||
| } | ||
| .__class_write_with_important(@className,@keyList,@valueList){ | ||
| .__class_write(@className,@keyList,@valueList); | ||
| .__class_write(~"@{className}-i",@keyList,@valueList) !important; | ||
| } | ||
| .__class_write_with_important-hover(@className,@keyList,@valueList){ | ||
| .__class_write-hover(~"@{className}-hover",@keyList,@valueList); | ||
| .__class_write-hover(~"@{className}-hover-i",@keyList,@valueList) !important; | ||
| } | ||
| .__writes(@keyList,@value) when (length(@value)=1){ | ||
| @leng:length(@keyList); | ||
| ._loop(@n) when(@n<=@leng){ | ||
| @key:extract(@keyList,@n); | ||
| .__write(@key,@value,~""); | ||
| ._loop(@n + 1); | ||
| } | ||
| ._loop(1) | ||
| } | ||
| .__writes(@keyList, @valueList) when (length(@valueList)>1){ | ||
| @leng:length(@keyList); | ||
| ._loop(@n) when(@n<=@leng){ | ||
| @key:extract(@keyList,@n); | ||
| @value:extract(@valueList,@n); | ||
| .__write(@key,@value,~""); | ||
| ._loop(@n + 1); | ||
| } | ||
| ._loop(1) | ||
| } | ||
| //透明度调整 | ||
| ._alpha(@val:80){ opacity: @val * 0.01; filter: alpha(opacity=@val); } | ||
| ._op(@value){._alpha(@value * 100)} | ||
| //横向padding | ||
| ._ph(@value:auto){padding-left: @value; padding-right: @value;} | ||
| //纵向padding | ||
| ._pv(@value:auto){padding-top: @value; padding-bottom: @value;} | ||
| //横向margin | ||
| ._mh(@value:auto){margin-left: @value; margin-right: @value;} | ||
| //纵向margin | ||
| ._mv(@value:auto){margin-top: @value; margin-bottom: @value;} | ||
| //block尺寸，同时设置长宽 | ||
| ._size(@size){._size(@size,@size)} | ||
| ._size(@width,@height){ | ||
| .__write(width,@width,px); | ||
| .__write(height,@height,px); | ||
| } | ||
| //设置高度时，同时设置line-height | ||
| ._size_lh(@width,@height){ | ||
| ._size(@width,@height); | ||
| .__write(line-height,@height,px) | ||
| } | ||
| ._size_lh(@s){ | ||
| ._size_lh(@s,@s) | ||
| } | ||
| //设置尺寸时候，同时设置margin没size尺寸的一般（负） | ||
| ._size_rever_margin(@width,@height){ | ||
| ._size(@width,@height); | ||
| margin-left:-@width * 0.5; | ||
| margin-top :-@height*0.5; | ||
| } | ||
| ._size_rever_margin(@size){ | ||
| ._size_rever_margin(@size,@size); | ||
| } | ||
| ._size_revert_margin_lh(@width,@height){ | ||
| ._size_rever_margin(@width,@height); | ||
| line-height: @height; | ||
| } | ||
| ._size_revert_margin_lh(@size){ | ||
| ._size_revert_margin_lh(@size,@size); | ||
| } | ||
| ._fillin(@value:0){ | ||
| .__writes(left top right bottom, @value) | ||
| } | ||
| //reset; | ||
| .reset(){ | ||
| html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, | ||
| img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center, dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, | ||
| tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, | ||
| summary,time, mark, audio, video { | ||
| margin: 0;padding: 0;border: 0;font-size: 100%;vertical-align: baseline; | ||
| } | ||
| h1, h2, h3, h4, h5, h6{ font-weight: 700;} | ||
| /* HTML5 display-role reset for older browsers */ | ||
| article, aside, details, figcaption, figure, footer, header, menu, nav, section { display: block;} | ||
| body {line-height: 1; font-size: 12px;} | ||
| ol, ul{ list-style: none; } | ||
| blockquote, q {quotes: none;} | ||
| blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;} | ||
| i,em{font-style: normal;} | ||
| a{ text-decoration: none;} | ||
| } | ||
| //ie旋转 | ||
| //@ang只支持deg | ||
| ._ieRotate(@ang,@width,@height){ | ||
| @deg:pi()*2 - unit(convert(unit(@ang,deg),"rad")); //ie角度正好和w3c旋转相反 | ||
| @sin:sin(@deg); | ||
| @cos:cos(@deg); | ||
| @fsin:-@sin; | ||
| @fcos:-@cos; | ||
| @w:unit(@width); | ||
| @h:unit(@height); | ||
| @dx:-@w/2*@cos+@h/2*@sin+@w/2; | ||
| @dy:-@w/2*@sin - @h/2*@cos+@h/2; | ||
| filter:progid:DXImageTransform.Microsoft.Matrix(Dx=@dx, Dy=@dy,M11=@cos,M12=@sin,M21=@fsin,M22=@cos,sizingMethod="auto expand"); | ||
| } | ||
| //ie 的旋转 | ||
| ._ieRotate(@ang,@size){ | ||
| .ieRotate(@ang, @size, @size); | ||
| } | ||
| //形成三角 | ||
| .triangle(@size,@dir:left,@color:#08c,@blankColor:transparent){ | ||
| border: @size solid @blankColor; | ||
| border-@{dir}-width: 0; | ||
| ._size_lh(0); | ||
| ._dib; | ||
| .____write() when(@dir=right){border-left-color:@color;} | ||
| .____write() when(@dir=bottom){border-top-color:@color;} | ||
| .____write() when(@dir=left){border-right-color:@color;} | ||
| .____write() when(@dir=top){border-bottom-color:@color;} | ||
| .____write; | ||
| } | ||
| //形成斜三角(45整数倍三角) | ||
| .triangle45(@size,@dira:left,@dirb:bottom,@color:#08c,@blankColor:transparent){ | ||
| border: @blankColor solid @size * 0.5; | ||
| border-@{dira}-color:@color; | ||
| border-@{dirb}-color:@color; | ||
| line-height: 0; | ||
| font-size: 0; | ||
| ._size(0); | ||
| &:extend(.dib); | ||
| } | ||
| //----形成三角 | ||
| //用来生一个宽度序列 | ||
| //参数1 @main_w有三种形式 | ||
| // 形式1:1000px 表示总宽度为1000,单元格间距为0 | ||
| // 形式2:1000px 12px 表示总宽度为1000,单元格间距为12px，无两边空白 | ||
| // 形式3:1000px _12px 表示总宽度为1000,单元格间距为12px，两边有空白 | ||
| //参数2 @col_width_list 传入1-(n-1)各单元格宽度,最后一个单元格宽度由计算获得 | ||
| //举例 .row1{.gen_grid(1000px 10px,60px,100px,90px,88px, 180px); >*{.iblock};} | ||
| .gen_grid(@main_w__gap,@col_width_list){ | ||
| @leng:length(@col_width_list); | ||
| //分析第一参数 | ||
| @p_list:`(function(index){ | ||
| index = index || 0; | ||
| var para = "@{main_w__gap}".replace(/\[|\]|,/g,""); | ||
| var leng = @{leng}; | ||
| var ar = para.split(" "); | ||
| ar[1] = ar[1] || "0px"; | ||
| var main_w = ar[0]; | ||
| var gap_w=ar[1].replace(/^_|\-/,""); | ||
| if(/^\_/.test(ar[1])){ | ||
| leng = leng + 2; | ||
| }else{ | ||
| leng = leng; | ||
| } | ||
| var resultList = [main_w, gap_w,leng]; | ||
| return resultList[index-1]; | ||
| })`; | ||
| //提取参数1的定义 | ||
| @main_w:~`@{p_list}(1)`; | ||
| @gap_w:~`@{p_list}(2)`; | ||
| @gap_num:~`@{p_list}(3)`; | ||
| //计算最后一个单元格宽度 | ||
| @last_w:~`(function(){ | ||
| var arg = eval("@{col_width_list}".replace(/px/g,"")); | ||
| var main_w = parseInt("@{main_w}"); | ||
| var gap_num = @{gap_num}; | ||
| var gap_w = parseInt("@{gap_w}"); | ||
| var w=0; | ||
| //只有两列的情况 | ||
| if(arg.length === undefined) arg = [arg]; | ||
| arg.map(function(n){ | ||
| w+=n; | ||
| }); | ||
| var lstw = (main_w - w - gap_num*gap_w); | ||
| bindvar("gd.lastw",lstw); | ||
| return lstw; | ||
| })()`; | ||
| width:~`(function(){ | ||
| var main_w = parseInt("@{main_w}"); | ||
| var gap_num = @{gap_num}; | ||
| var leng = @{leng}; | ||
| var gap_w = parseInt("@{gap_w}"); | ||
| if(gap_num>leng){ | ||
| return (main_w - gap_w) + "px; padding-left:" + gap_w + "px"; | ||
| }else{ | ||
| return main_w + "px"; | ||
| } | ||
| })()`; | ||
| //定义循环 | ||
| .gen_grid_loop(@times,@paras) when(@times >0){ | ||
| .gen_grid_loop(@times - 1, @paras); | ||
| >.cell-@{times}{ | ||
| width: extract(@paras,@times); | ||
| margin-right: @gap_w; | ||
| } | ||
| } | ||
| //生成1-(n-1)的宽度 | ||
| .gen_grid_loop(@leng , @col_width_list); | ||
| //生成n的宽度 | ||
| @leng_p1:@leng+1; | ||
| >.cell-last,>.cell-@{leng_p1}{ | ||
| width:unit(@last_w,px); | ||
| } | ||
| //消除间隔 | ||
| font-size: 0; | ||
| //white-space: normal; | ||
| //对单元格的一些公共设置 | ||
| >*{ | ||
| &:extend(.dib); font-size: @fsize; | ||
| } | ||
| } | ||
| .gen_grid_line(@main_w__gap,@col_width_list){ | ||
| .gen_grid(@main_w__gap,@col_width_list); | ||
| white-space: nowrap; | ||
| >*{white-space: normal;} | ||
| } | ||
| // | ||
| ._colsets(@colList,@fullWidth,@innerGap:0,@edgeGap:0){ | ||
| @leng:@length(@colList); | ||
| @lastWidth:@fullWidth; | ||
| ._loop(@n) when(@n<=@length){ | ||
| @w:extract(@colList,@n); | ||
| //@lastWidth | ||
| >*:nth-child(@{n}){ | ||
| width:@w; | ||
| margin-right: @innerGap; | ||
| } | ||
| ._loop(@n+1); | ||
| } | ||
| ._loop(1); | ||
| } | ||
| //生成列均等的网格布局 | ||
| //@main_width整体宽度 | ||
| //@gap间隔 | ||
| //@n网格猎数 | ||
| //@edge_gap间隔是否在边沿 | ||
| //@cell_width_offset宽度微调 | ||
| ._gen_grid_average(@main_width,@n,@gap:0,@edge_gap:false,@cell_width_offset:0){ | ||
| .gen_comm(){ | ||
| padding-top: @gap; | ||
| padding-bottom: @gap; | ||
| //margin-left: -@gap/2; | ||
| text-indent: 0; | ||
| left: -@gap*0.5; | ||
| position: relative; | ||
| font-size: 0; | ||
| >*{ | ||
| &:extend(.dib); | ||
| font-size: 14px; | ||
| min-height: @gap; | ||
| margin-bottom: @gap; | ||
| .margin_h(@gap*0.5); | ||
| } | ||
| } | ||
| .gen(@main_width,@gap,@n,@edge_gap) when(@edge_gap = true){ | ||
| @cellw:(@main_width - (@n + 1)*@gap)/@n + @cell_width_offset; | ||
| width: @main_width; | ||
| padding-left: @gap; | ||
| >*{ | ||
| width: @cellw; | ||
| } | ||
| } | ||
| .gen(@main_width,@gap,@n,@edge_gap) when(@edge_gap = false){ | ||
| @cellw:(@main_width - (@n)*@gap)/@n + @cell_width_offset; | ||
| width: @main_width + @gap; | ||
| >*{ | ||
| width: @cellw; | ||
| } | ||
| } | ||
| .gen_comm; | ||
| .gen(@main_width,@gap,@n,@edge_gap); | ||
| } | ||
| //半透明背景，兼容ie | ||
| ._bgcolor_alpha(@bgcolor: rgba(0,0,0,.51)){ | ||
| filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr = argb(@bgcolor), endColorstr=argb(@bgcolor)); | ||
| background-color:@bgcolor; | ||
| } | ||
| ._bgcolor_alpha(@rgb,@alpha){ | ||
| @rgba:~`(function(){ | ||
| var obj = __get_rgba_object('@{rgb}',@{alpha}); | ||
| return getRGBA('@{rgb}',@{alpha}); | ||
| })(this)`; | ||
| @argb_16:~`(function(){ | ||
| return getARGB('@{rgb}',@{alpha}) | ||
| })(this)`; | ||
| filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr= @argb_16, endColorstr=@argb_16); | ||
| background-color:@rgba; | ||
| } | ||
| .loopColorList(@list){ | ||
| @leng:length(@list); | ||
| .loop(@n)when(@n>0){ | ||
| @cl:extract(@list,@n); | ||
| @cl-val:@@cl; | ||
| .__class_write_with_important(~"cl-@{cl}", color, @@cl); | ||
| .cl-@{cl}-hover:hover{color:@@cl;} | ||
| .cl-@{cl}-hover-i:hover{color:@@cl !important;} | ||
| .__class_write_with_important(~"bg-@{cl}", background-color, @@cl); | ||
| .bg-@{cl}-hover:hover{background-color:@@cl;} | ||
| .bg-@{cl}-hover-i:hover{background-color:@@cl !important;} | ||
| .__class_write_with_important(~"bd-@{cl}", border-color, @@cl); | ||
| .loop(@n - 1); | ||
| } | ||
| .loop(@leng); | ||
| } | ||
| //蚂蚁线生成器 | ||
| .ant-line-factory(@tick-color:@grey300, @tick-length:0.5em, @gap-length:0.75em, @gap-color:transparent){ | ||
| background-image: repeating-linear-gradient(-45deg, @tick-color 0, @tick-color 0.25em, @gap-color 0, @gap-color @gap-length); | ||
| } | ||
| //规定表格个列的宽度和对齐方式,自动宽度传入-1 | ||
| //ex: 0/auto 表示不干涉该列宽度 | ||
| //.table-1{ | ||
| // .tableColSet(18em right 5em 2em, 15px, 0, 0, 10%); | ||
| //} | ||
| //.table-1第一列宽度18em,第二列15px,第三列自动... | ||
| .tableColSet(@rest...){ | ||
| .loop(@n) when (@n>0){ | ||
| >tbody>tr>*,>tr>*{ | ||
| @value:extract(@widthList,@n); | ||
| @leng:length(@value); | ||
| @width:extract(@value,1); | ||
| @align:extract(@value,2); | ||
| @paddingLeft:extract(@value,3); | ||
| @paddingRight:extract(@value,4); | ||
| &:nth-child(@{n}){ | ||
| & when(@width>0){ | ||
| width: @width; | ||
| } | ||
| & when(iskeyword(@align)){ | ||
| text-align:@align; | ||
| } | ||
| & when(isnumber(@paddingLeft)){ | ||
| padding-left:@paddingLeft; | ||
| } | ||
| & when(isnumber(@paddingRight)){ | ||
| padding-right:@paddingRight; | ||
| } | ||
| } | ||
| } | ||
| .loop(@n - 1); | ||
| } | ||
| @widthList:@rest; | ||
| @le:length(@widthList); | ||
| .loop(@le); | ||
| } | ||
| /** | ||
| 参照js的String.prototype.padStrarts | ||
| @result:padStarts(foo, 5)[@__]; | ||
| 结果:00foo | ||
| */ | ||
| .padStarts(@string, @length:3, @padString:"0000000000"){ | ||
| @__: replace(~"@{padString}@{string}", ".+(.{@{length}}?)$", "$1"); | ||
| } | ||
| /** | ||
| 针对浮点数优化的padStarts | ||
| @result:padStarts(foo, 5)[@__]; | ||
| 结果:00foo | ||
| */ | ||
| .floatPadStarts(@number, @length:3, @padString:"0000000000"){ | ||
| @nMod:mod(@number, 1); | ||
| .calc() when (@nMod = 0){ | ||
| @__ : .padStarts(@number, @length, @padString)[@__]; | ||
| } | ||
| .calc() when not (@nMod = 0){ | ||
| @__ : replace(~"@{padString}@{number}", ".+(.{@{length}}?)(?=\.)", "$1"); | ||
| } | ||
| @__:.calc()[@__]; | ||
| } | ||
| /** | ||
| * 多个range使用 | ||
| .eachRange(range(1,5) range(10,15), { | ||
| hs:@value; | ||
| }) | ||
| */ | ||
| .eachRange(@rangeLs, @rules){ | ||
| each(@rangeLs, { | ||
| each(@value, { | ||
| @rules(); | ||
| }) | ||
| }) | ||
| } | ||
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
No alert changes
Improved metrics
- Total package byte prevSize
1106450
17.15%- Number of package files
28
100%- Lines of code
24467
4.76%- Number of lines in readme file
475
8.94%Worsened metrics
- Dev dependency count
9
50%No dependency changes