/**
* @stylesheet sizing%bauplan%less
* @language less
* @description Sizing functions and properties
* @nopreparse
*/
/**
* @var {number} @sizingbasesize=16
* @description Base font size in pixels
* Used to calculate em / rem
*/
@sizingbasesize: 16;
//@sizingwindow: ~`"".replace(/.*/, function(){ console.log(this, this.less); })`;
// delete "-: ;"
// delete " +\n"
// delete "/* ... */"
//...
// box-shadow, background position, css animations(?)
/**
* @function .px
* @description Outputs px value based on @sizingbasesize
* @param {number} size Rem unit
*/
.px(@size) {
@pxsize: (@size * @sizingbasesize);
@px: ~`"@{pxsize}px".replace(/\b0px/, "0")`;
}
/**
* @function .rem
* @description Outputs rem value
* @param {number} size Unit
*/
.rem(@size) {
@rem: ~`"@{size}rem".replace(/\b0rem/, "0")`;
}
/**
* @function .size
* @description Outputs rem value with em and px fallbacks for a particular property
* @param {string} type Property to be sized
* @param {string} units Value for property
*/
.size(@type, @rest...) {
//@debug: ~`"@{rest}".replace(/(.*)/g, function(){this.console.log("debug", "@{rest}"); this.console.log(this, this.less);})`;
@all: ~`"@{rest}".replace(/[\[\]]/g,"").replace(/(rgba*\([^\)]+\))/, function(m){return m.replace(/,/g, "SIZINGCOMMA");}).replace(/,\s*/g," ").replace(/SIZINGCOMMA/g, ",")`;
@emcontext: ~`"@{all}".replace(/(emcontext[- ](\d+(\.\d+)?\b))/, function(m, m1, m2) { this.SIZINGEMCONTEXT = m2; return "";})`;
@remvalue: ~`"@{emcontext}".replace(/(remvalue[- ](\d+(\.\d+)?\b))/, function(m, m1, m2) { this.SIZINGREMVALUE = m2; return "";})`;
@fontsizevalue: ~`"@{remvalue}".replace(/^\s*(\d+(\.\d+)?\b)\s*$/, function(m, m1) { if ("@{type}" === "font-size") { this.SIZINGREMVALUE = m1; } return m1;})`;
@parsed: ~`"@{fontsizevalue}".replace(/#(\d)/, "SIZINGHASH$1")`;
@pxs: ~`"@{parsed}".replace(/\b(\d+(\.\d+)?)(rem)?(?![%,\)])\b/g, function(m, m1){ return m1 != "0" ? (m1 * @{sizingbasesize}) + "px" : "0"; }).replace(/SIZINGHASH/, "#")`;
@ems: ~`"@{parsed}".replace(/\b(\d+(\.\d+)?)(rem)?(?![%,\)])\b/g, function(m, m1){ var emcontext = this.SIZINGEMCONTEXT || 1; var remvalue = this.SIZINGREMVALUE || 1; var multiplier = "@{type}" === "font-size" ? 1/emcontext : 1/remvalue; return m1 != "0" ? (m1 * multiplier) + "em" : "0"; }).replace(/SIZINGHASH/, "#")`;
@rems: ~`"@{parsed}".replace(/\b(\d+(\.\d+)?)(?![%,\)])\b/g, function(m, m1){ return m1 != "0" ? m1 + "rem" : "0"; }).replace(/SIZINGHASH/, "#")`;
@sizingvarsreset: `"@{parsed}".replace(/.*/, function(){ delete this.SIZINGEMCONTEXT; delete this.SIZINGREMVALUE; return ""})`;
-:~";@{type}: @{pxs}";
-:~";@{type}: @{ems}";
-:~";@{type}: @{rems}";
}
/**
* @function .font-size
* @description Outputs remified font-size
* @param {string} args Units to pass through to .size
*/
.font-size(...) {
.size(font-size, @arguments);
}
/**
* @function .width
* @description Outputs remified width
* @param {string} args Units to pass through to .size
*/
.width(...) {
.size(width, @arguments);
}
/**
* @function .min-width
* @description Outputs remified min-width
* @param {string} args Units to pass through to .size
*/
.min-width(...) {
.size(min-width, @arguments);
}
/**
* @function .max-width
* @description Outputs remified max-width
* @param {string} args Units to pass through to .size
*/
.max-width(...) {
.size(max-width, @arguments);
}
/**
* @function .height
* @description Outputs remified height
* @param {string} args Units to pass through to .size
*/
.height(...) {
.size(height, @arguments);
}
/**
* @function .min-height
* @description Outputs remified min-height
* @param {string} args Units to pass through to .size
*/
.min-height(...) {
.size(min-height, @arguments);
}
/**
* @function .max-height
* @description Outputs remified max-height
* @param {string} args Units to pass through to .size
*/
.max-height(...) {
.size(max-height, @arguments);
}
/**
* @function .margin
* @description Outputs remified margin
* @param {string} args Units to pass through to .size
*/
.margin(...) {
.size(margin, @arguments);
}
/**
* @function .margin-top
* @description Outputs remified margin-top
* @param {string} args Units to pass through to .size
*/
.margin-top(...) {
.size(margin-top, @arguments);
}
/**
* @function .margin-right
* @description Outputs remified margin-right
* @param {string} args Units to pass through to .size
*/
.margin-right(...) {
.size(margin-right, @arguments);
}
/**
* @function .margin-bottom
* @description Outputs remified margin-bottom
* @param {string} args Units to pass through to .size
*/
.margin-bottom(...) {
.size(margin-bottom, @arguments);
}
/**
* @function .margin-left
* @description Outputs remified margin-left
* @param {string} args Units to pass through to .size
*/
.margin-left(...) {
.size(margin-left, @arguments);
}
/**
* @function .padding
* @description Outputs remified padding
* @param {string} args Units to pass through to .size
*/
.padding(...) {
.size(padding, @arguments);
}
/**
* @function .padding-top
* @description Outputs remified padding-top
* @param {string} args Units to pass through to .size
*/
.padding-top(...) {
.size(padding-top, @arguments);
}
/**
* @function .padding-right
* @description Outputs remified padding-right
* @param {string} args Units to pass through to .size
*/
.padding-right(...) {
.size(padding-right, @arguments);
}
/**
* @function .padding-bottom
* @description Outputs remified padding-bottom
* @param {string} args Units to pass through to .size
*/
.padding-bottom(...) {
.size(padding-bottom, @arguments);
}
/**
* @function .padding-left
* @description Outputs remified padding-left
* @param {string} args Units to pass through to .size
*/
.padding-left(...) {
.size(padding-left, @arguments);
}
/**
* @function .top
* @description Outputs remified top
* @param {string} args Units to pass through to .size
*/
.top(...) {
.size(top, @arguments);
}
/**
* @function .right
* @description Outputs remified right
* @param {string} args Units to pass through to .size
*/
.right(...) {
.size(right, @arguments);
}
/**
* @function .bottom
* @description Outputs remified bottom
* @param {string} args Units to pass through to .size
*/
.bottom(...) {
.size(bottom, @arguments);
}
/**
* @function .left
* @description Outputs remified left
* @param {string} args Units to pass through to .size
*/
.left(...) {
.size(left, @arguments);
}
/**
* @function .border
* @description Outputs remified border
* @param {string} args Units to pass through to .size
*/
.border(...) {
.size(border, @arguments);
}
/**
* @function .border-top
* @description Outputs remified border-top
* @param {string} args Units to pass through to .size
*/
.border-top(...) {
.size(border-top, @arguments);
}
/**
* @function .border-top-width
* @description Outputs remified border-top-width
* @param {string} args Units to pass through to .size
*/
.border-top-width(...) {
.size(border-top-width, @arguments);
}
/**
* @function .border-right
* @description Outputs remified border-right
* @param {string} args Units to pass through to .size
*/
.border-right(...) {
.size(border-right, @arguments);
}
/**
* @function .border-right-width
* @description Outputs remified border-right-width
* @param {string} args Units to pass through to .size
*/
.border-right-width(...) {
.size(border-right-width, @arguments);
}
/**
* @function .border-bottom
* @description Outputs remified border-bottom
* @param {string} args Units to pass through to .size
*/
.border-bottom(...) {
.size(border-bottom, @arguments);
}
/**
* @function .border-bottom-width
* @description Outputs remified border-bottom-width
* @param {string} args Units to pass through to .size
*/
.border-bottom-width(...) {
.size(border-bottom-width, @arguments);
}
/**
* @function .border-left
* @description Outputs remified border-left
* @param {string} args Units to pass through to .size
*/
.border-left(...) {
.size(border-left, @arguments);
}
/**
* @function .border-left-width
* @description Outputs remified border-left-width
* @param {string} args Units to pass through to .size
*/
.border-left-width(...) {
.size(border-left-width, @arguments);
}
///**
// * @ruleset .helloworld
// * @description What this class should be used for
// */
//.helloworld {
// color: red;
//}
///**
// * @ruleset #goodbyejupiter
// * @description What this class should be used for
// */
//#goodbyejupiter {
// color: red;
//}
///**
// * @ruleset element > foo + bar ~loofah:after
// * @description What this selector should be used for
// */
//element > foo + bar ~ loofah:after {
// color: red;
//}
///*
//body {
// rancid: ~`
// (function(){
// return "Pishyposh";
// })()`;
//}
//*/
///*
//body {
// //.border(solid 1 #000000);
// zammo: 1/16;
// .size(wango, solid rgba(255,255,0,0.25) 1);
// .size(crumbo, 1 #000000 dotted);
//}
//
//body {
// .siteText();
// margin: 0;
// background: #ffffff;
// //.size(font-size, 4, emcontext-2);
// //.size(font-size, 5);
// //.size(monkey, 0 1 0 2 remvalue-4 emcontext-2);
// //.size(padding, 1, 4, 1 2 7rem 4);
// @bodyremvalue: 6;
// @bodyemcontext: 1.5;
// .font-size(@bodyremvalue, emcontext @bodyemcontext);
// .padding(1 0 20px 4em, emcontext @bodyremvalue);
//}
//
//.godh {
//.size(muppet, 1 2 3, emcontext 2, remvalue 4);
//.border(solid 1 #333333, emcontext 2, remvalue 4);
//}
//
//body {
// .px(2);
// .rem(2);
// padding: 10% 0 @px 5%;
// padding: 10% 0 @rem 5%;
//}
//
//html {
// .size(padding,1,0,3,1.4);
// //.size(margin,1,2,3,4);
// .margin(1,2,3,4);
// .top(1);
// .left(2);
// .right(3);
// .bottom(4);
// .padding-left(3);
// .padding-top(5);
// .padding-right(6);
// .padding-bottom(10);
//}
//body {
// .font-size(2);
// .padding(2);
// .size(2, 1);
// .width(60);
// .height(0);
//}
//
//
//
//#bundle {
// .wonky(@foo:jiz) {
// body {
// neeps: @foo;
// }
// }
// .donkey(@foo:jiz) {
// body {
// twerps: @foo;
// }
// }
//}
//
//#bundle.wonky;
//#bundle.donkey(meat);
//*/