Type Casting
/functions/cast/index.css
--dd-bit-to-ist(--dd-bit)
Cast a bit into an inverted space toggle.
Arguments
--dd-bit <integer> 0 or 1
Returns
Returns initial if the argument was 1, returns <empty> space if the argument was 0.
Example
@import url("@URL@/functions/cast/bit-to-inverted-space-toggle.css");
@import url("@URL@/functions/compare/gt.css");
.charge-indicator-color {
--current: 50;
--red-if-not-gt-10: --dd-bit-to-ist(
--dd-gt(var(--current), 10)
) red;
--yellow-if-not-gt-50: --dd-bit-to-ist(
--dd-gt(var(--current), 50)
) yellow;
--lime-if-not-gt-90: --dd-bit-to-ist(
--dd-gt(var(--current), 90)
) lime;
--color: var(--red-if-not-gt-10,
var(--yellow-if-not-gt-50,
var(--lime-if-not-gt-90,
green
)
)
);
width: calc(var(--current) * 1%);
background-color: var(--color);
height: 1rem;
}
Related Functions
--dd-ist-to-bit
--dd-bit-to-st(--dd-bit)
Cast a bit into a space toggle.
Arguments
--dd-bit <integer> 0 or 1
Returns
Returns <empty> space if the argument was 1, returns initial if the argument was 0.
Example
@import url("@URL@/functions/cast/bit-to-space-toggle.css");
@import url("@URL@/functions/compare/lte.css");
.charge-indicator-color {
--current: 50;
--red-if-lte-10: --dd-bit-to-st(
--dd-lte(var(--current), 10)
) red;
--yellow-if-lte-50: --dd-bit-to-st(
--dd-lte(var(--current), 50)
) yellow;
--lime-if-lte-90: --dd-bit-to-st(
--dd-lte(var(--current), 90)
) lime;
--color: var(--red-if-lte-10,
var(--yellow-if-lte-50,
var(--lime-if-lte-90,
green
)
)
);
width: calc(var(--current) * 1%);
background-color: var(--color);
height: 1rem;
}
Related Functions
--dd-st-to-bit
--dd-dcb-to-int16(--dd-arg1 [, --dd-arg2 [, --dd-arg3 [, --dd-arg4]]])
Cast up to 4 decimal-coded-binary nibbles into a single int16. Because CSS does not support writing binary, we instead write decimal using only 0's and 1's as if it were binary. We group them into 4-bit nibbles because 8 decimal digits is more than 21 bits (where CSS integers become lossy).
Arguments
--dd-arg1 <integer> up to four digits of 1 or 0: 1010, 0001, etc
--dd-arg2 --dd-arg3 --dd-arg4 the same as arg1 but optional.
The most significant bit is the left-most bit of arg1. The least significant bit is the right-most bit of the last argument provided.
Returns
Returns <integer> up to 16 bits.
Example
@import url("@URL@/functions/cast/dcb-to-int16.css");
@import url("@URL@/functions/cast/number-to-string.css");
@import url("@URL@/functions/cast/int16-to-bit-string.css");
.decimal-coded-binary::after {
--int16: --dd-dcb-to-int16(1111, 0010, 1010, 1001);
content:
"Decimal: " --dd-number-to-string(var(--int16)) "\A"
"Binary: " --dd-int16-to-bit-string(var(--int16));
white-space: pre;
}
Related Functions
--dd-int16-to-dcb-nibble
--dd-digit-to-string(--dd-digit [, --dd-base])
Cast a digit/value into a single-character string.
Arguments
--dd-digit <integer> to cast into a string, typically 0 to 9.
--dd-base a keyword value, one of: base32hex | base32 | base64
The number base is optional and defaults to base32hex.
Returns
Returns a single character <string> with the specified encoding:
Read about base32hex.
Read about base32.
Read about base64.
Example
@import url("@URL@/functions/cast/digit-to-string.css");
@import url("@URL@/functions/repeat/loop.css");
@import url("@URL@/functions/cast/number-to-string.css");
@function --dd-loop-id-0() {
result: --dd-number-to-string(var(--dd-x)) " : "
--dd-digit-to-string(var(--dd-x), var(--dd-arg1));
}
.base32hex::after {
content: "base32hex \A" --dd-loop(0, lt, 32, + 1, --dd-loop-id-0, "\A", base32hex);
white-space: pre;
}
.base32::after {
content: "base32 \A" --dd-loop(0, lt, 32, + 1, --dd-loop-id-0, "\A", base32);
white-space: pre;
}
.base64::after {
content: "base64 \A" --dd-loop(0, lt, 64, + 1, --dd-loop-id-0, "\A", base64);
white-space: pre;
}
body {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
--dd-dimension-to-number(--dd-dimension [, --dd-basis])
Cast a dimension into a <number>. Included for completeness sake.
Arguments
--dd-dimension any <dimension> (100px, 3deg, 4vh, 7s)
--dd-basis any <dimension> with a numeric component of 1. (1px, 1deg, 1vh, 1s)
The basis defaults to 1px so can be omitted if the first parameter is any length dimension and you want the result in terms of pixels.
Returns
Returns <number> by executing calc(var(--dd-dimension) / var(--dd-basis)).
Example
@import url("@URL@/functions/cast/dimension-to-number.css");
.screen-width::before {
counter-reset: sw --dd-dimension-to-number(100vw, 1px);
content: counter(sw);
}
--dd-dimension-to-string(--dd-dimension [, --dd-basis [, --dd-unit [, --dd-fixed [, --dd-round]]]])
Cast a dimension into a <string>+.
Arguments
--dd-dimension any <dimension> (100px, 3deg, 4vh, 7s)
--dd-basis any <dimension> with a numeric component of 1. (1px, 1deg, 1vh, 1s)
The basis defaults to 1px so can be omitted if the first parameter is any length dimension and you want the result in terms of pixels and aren't specifying any further arguments.
--dd-unit a string defaulting to an empty string "" appended after the value. ("px", "deg", "vh", "s")
--dd-fixed an <integer> up to 6 specifying how much decimal precision to use in the output. The practical limit is also 6 if the whole-number part is a single digit, 5 if 2, 4 if 3, etc.
--dd-round the rounding-strategy used on the number to reach the precision, defaulting to nearest.
Returns
Returns <string>+ padded to the right with 0's as needed if fixed is specified.
Example
@import url("@URL@/functions/cast/dimension-to-string.css");
.screen-width-string-in-em::before {
content: --dd-dimension-to-string(100vw, 1em, "em", 3, nearest);
}
--dd-int16-to-bit-string(--dd-int16 [, --dd-min-length])
Cast a 16 bit integer into a binary string+.
Arguments
--dd-int16 <integer> up to 16 bits.
--dd-min-length defaults to 1, an integer between 1 and 16.
Returns
Returns <string>+ up to 16 characters long.
Example
@import url("@URL@/functions/cast/int16-to-bit-string.css");
@import url("@URL@/functions/cast/dcb-to-int16.css");
.bit-string::after {
--int16: --dd-dcb-to-int16(1111, 0010, 1010, 1001);
content: "Binary: " --dd-int16-to-bit-string(var(--int16));
}
.bit-string-min-length::after {
--int16: --dd-dcb-to-int16(101);
content: "Binary: " --dd-int16-to-bit-string(var(--int16), 8);
}
--dd-int16-to-dcb-nibble(--dd-int16 [, --dd-which-nibble])
Cast 4 bits of a 16 bit integer into a decimal-coded-binary integer.
Reverse of --dd-dcb-to-int16 which exists to simulate directly writing binary in CSS.
Arguments
--dd-int16 <integer> up to 16 bits.
--dd-which-nibble defaults to 0, an integer between 0 and 3, the offset of which nibble to return from the int16 where 0 means return the 4 least significant bits.
Returns
Returns <integer> of 4 bits encoded to decimal. Eleven is returned from an int16 equal to three (if the which-nibble offset is 0) because 3 in binary is 11.
Example
@import url("@URL@/functions/cast/int16-to-dcb-nibble.css");
@import url("@URL@/functions/cast/dcb-to-int16.css");
.int16-to-dcb-nibble::after {
--int16: --dd-dcb-to-int16(1111, 0010, 1010, 1001);
--dcb-of-nibble3: --dd-int16-to-dcb-nibble(var(--int16), 3);
--dcb-of-nibble2: --dd-int16-to-dcb-nibble(var(--int16), 2);
--dcb-of-nibble1: --dd-int16-to-dcb-nibble(var(--int16), 1);
--dcb-of-nibble0: --dd-int16-to-dcb-nibble(var(--int16), 0);
counter-reset:
int16 var(--int16)
dcb3 var(--dcb-of-nibble3)
dcb2 var(--dcb-of-nibble2)
dcb1 var(--dcb-of-nibble1)
dcb0 var(--dcb-of-nibble0)
;
content:
"Decimal coded representation of binary extracted from int16: "
counter(int16) "\A"
"Nibble 3: " counter(dcb3) "\A"
"Nibble 2: " counter(dcb2) "\A"
"Nibble 1: " counter(dcb1) "\A"
"Nibble 0: " counter(dcb0);
white-space: pre;
}
Related Functions
--dd-dcb-to-int16
--dd-int16-to-hex-string(--dd-int16 [, --dd-min-length])
Cast a 16 bit integer into a hexadecimal string+.
Arguments
--dd-int16 <integer> up to 16 bits.
--dd-min-length defaults to 1, an integer between 1 and 4.
Returns
Returns <string>+ up to 4 characters long.
Example
@import url("@URL@/functions/cast/int16-to-hex-string.css");
.hex-string::after {
content:
"Cast 16 bit integers to hexadecimal strings \A"
"255: " --dd-int16-to-hex-string(255) "\A"
"127: " --dd-int16-to-hex-string(127, 4) "\A"
"65281: " --dd-int16-to-hex-string(65281)
;
white-space: pre;
}
--dd-ist-to-bit(--dd-ist)
Cast an inverted space toggle to a bit.
Arguments
--dd-ist initial/IACVT or <empty> (space)
Returns
Returns 1 if the argument was initial, returns 0 if the argument was <empty> space .
Example
@import url("@URL@/functions/cast/inverted-space-toggle-to-bit.css");
@import url("@URL@/functions/logic/inverted-space-toggle/index.css");
.ist-to-bit::after {
--initial: initial;
--space: ;
counter-reset:
iandi --dd-ist-to-bit(--dd-and-ist(var(--initial), var(--initial)))
inandi --dd-ist-to-bit(--dd-nand-ist(var(--initial), var(--initial)))
inori --dd-ist-to-bit(--dd-nor-ist(var(--initial), var(--initial)))
iori --dd-ist-to-bit(--dd-or-ist(var(--initial), var(--initial)))
ixnori --dd-ist-to-bit(--dd-xnor-ist(var(--initial), var(--initial)))
ixori --dd-ist-to-bit(--dd-xor-ist(var(--initial), var(--initial)))
iands --dd-ist-to-bit(--dd-and-ist(var(--initial), var(--space)))
inands --dd-ist-to-bit(--dd-nand-ist(var(--initial), var(--space)))
inors --dd-ist-to-bit(--dd-nor-ist(var(--initial), var(--space)))
iors --dd-ist-to-bit(--dd-or-ist(var(--initial), var(--space)))
ixnors --dd-ist-to-bit(--dd-xnor-ist(var(--initial), var(--space)))
ixors --dd-ist-to-bit(--dd-xor-ist(var(--initial), var(--space)))
sands --dd-ist-to-bit(--dd-and-ist(var(--space), var(--space)))
snands --dd-ist-to-bit(--dd-nand-ist(var(--space), var(--space)))
snors --dd-ist-to-bit(--dd-nor-ist(var(--space), var(--space)))
sors --dd-ist-to-bit(--dd-or-ist(var(--space), var(--space)))
sxnors --dd-ist-to-bit(--dd-xnor-ist(var(--space), var(--space)))
sxors --dd-ist-to-bit(--dd-xor-ist(var(--space), var(--space)))
;
content: "op.. i_i i_s s_s\A"
"----- --- --- ---\A"
"and." " " counter(iandi) " " counter(iands) " " counter(sands) "\A"
"nand" " " counter(inandi) " " counter(inands) " " counter(snands) "\A"
"nor." " " counter(inori) " " counter(inors) " " counter(snors) "\A"
"or.." " " counter(iori) " " counter(iors) " " counter(sors) "\A"
"xnor" " " counter(ixnori) " " counter(ixnors) " " counter(sxnors) "\A"
"xor." " " counter(ixori) " " counter(ixors) " " counter(sxors);
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
justify-content: space-around;
white-space: pre;
text-align-last: justify;
font-family: monospace;
}
Related Functions
--dd-bit-to-ist
--dd-number-to-string(--dd-number [, --dd-fixed [, --dd-round]])
Cast a number into a <string>+.
Arguments
--dd-number any <number> (100, 3.4, 4.7)
--dd-fixed an <integer> up to 6 specifying how much decimal precision to use in the output. The practical limit is also 6 if the whole-number part is a single digit, 5 if 2, 4 if 3, etc.
--dd-round the rounding-strategy used on the number to reach the precision, defaulting to nearest.
Returns
Returns <string>+ padded to the right with 0's as needed if fixed is specified.
Example
@import url("@URL@/functions/cast/number-to-string.css");
.screen-width-string-in-em::before {
content: --dd-number-to-string(calc(100vw / 1em), 3, nearest) "em";
}
--dd-st-to-bit(--dd-st)
Cast a space toggle to a bit.
Arguments
--dd-st <empty> (space) or initial/IACVT
Returns
Returns 1 if the argument was <empty> space , returns 0 if the argument was initial.
Example
@import url("@URL@/functions/cast/space-toggle-to-bit.css");
@import url("@URL@/functions/logic/space-toggle/index.css");
.st-to-bit::after {
--space: ;
--initial: initial;
counter-reset:
sands --dd-st-to-bit(--dd-and-st(var(--space), var(--space)))
snands --dd-st-to-bit(--dd-nand-st(var(--space), var(--space)))
snors --dd-st-to-bit(--dd-nor-st(var(--space), var(--space)))
sors --dd-st-to-bit(--dd-or-st(var(--space), var(--space)))
sxnors --dd-st-to-bit(--dd-xnor-st(var(--space), var(--space)))
sxors --dd-st-to-bit(--dd-xor-st(var(--space), var(--space)))
sandi --dd-st-to-bit(--dd-and-st(var(--space), var(--initial)))
snandi --dd-st-to-bit(--dd-nand-st(var(--space), var(--initial)))
snori --dd-st-to-bit(--dd-nor-st(var(--space), var(--initial)))
sori --dd-st-to-bit(--dd-or-st(var(--space), var(--initial)))
sxnori --dd-st-to-bit(--dd-xnor-st(var(--space), var(--initial)))
sxori --dd-st-to-bit(--dd-xor-st(var(--space), var(--initial)))
iandi --dd-st-to-bit(--dd-and-st(var(--initial), var(--initial)))
inandi --dd-st-to-bit(--dd-nand-st(var(--initial), var(--initial)))
inori --dd-st-to-bit(--dd-nor-st(var(--initial), var(--initial)))
iori --dd-st-to-bit(--dd-or-st(var(--initial), var(--initial)))
ixnori --dd-st-to-bit(--dd-xnor-st(var(--initial), var(--initial)))
ixori --dd-st-to-bit(--dd-xor-st(var(--initial), var(--initial)))
;
content: "op.. s_s s_i i_i\A"
"----- --- --- ---\A"
"and." " " counter(sands) " " counter(sandi) " " counter(iandi) "\A"
"nand" " " counter(snands) " " counter(snandi) " " counter(inandi) "\A"
"nor." " " counter(snors) " " counter(snori) " " counter(inori) "\A"
"or.." " " counter(sors) " " counter(sori) " " counter(iori) "\A"
"xnor" " " counter(sxnors) " " counter(sxnori) " " counter(ixnori) "\A"
"xor." " " counter(sxors) " " counter(sxori) " " counter(ixori);
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
justify-content: space-around;
white-space: pre;
text-align-last: justify;
font-family: monospace;
}
Related Functions
--dd-bit-to-st
--dd-to-string(--dd-any)
Cast a anything to a string.
If it cannot be converted into a string, it will return --dd-type-of instead.
The following types are currently returned as string data: string, string+, number, length (as px), percentage, angle (as deg), time (as seconds), resolution (as dpi).
Integers return without decimal points, numbers and all dimension types return 2 decimal points of precision.
All other types return their type-of string.
Arguments
--dd-any Any value.
Returns
Returns <string>+.
Example
@import url("@URL@/functions/cast/to-string.css");
.to-string::after {
white-space: pre;
content:
--dd-to-string("doubledash.css") "\A"
--dd-to-string({"PropJockey" " " "Jane Ori"}) "\A"
--dd-to-string(999.945) "\A"
--dd-to-string(1234) "\A"
--dd-to-string(100vw) "\A"
--dd-to-string(7%) "\A"
--dd-to-string(2.5rad) "\A"
--dd-to-string(1234ms) "\A"
--dd-to-string(96dpi) "\A"
"\A"
--dd-to-string(calc(7px + 100%)) "\A"
--dd-to-string({7px, 100%}) "\A"
--dd-to-string({7px 100%}) "\A"
--dd-to-string(hotpink) "\A"
--dd-to-string({hotpink, rebeccapurple}) "\A"
--dd-to-string({hotpink rebeccapurple}) "\A"
"\A"
--dd-to-string({"PropJockey", " ", "Jane Ori"}) "\A"
--dd-to-string({999.945, 1234}) "\A"
--dd-to-string({999.945 1234}) "\A"
"\A"
--dd-to-string({1234, 4321}) "\A"
--dd-to-string({1234 4321}) "\A"
"\A"
--dd-to-string({100vw, 10px}) "\A"
--dd-to-string({100vw 10px}) "\A"
--dd-to-string({7%, 100%}) "\A"
--dd-to-string({7% 100%}) "\A"
--dd-to-string({2.5rad, 10deg}) "\A"
--dd-to-string({2.5rad 10deg}) "\A"
--dd-to-string({1234ms, 8s}) "\A"
--dd-to-string({1234ms 8s}) "\A"
--dd-to-string({96dpi, 72dpi}) "\A"
--dd-to-string({96dpi 72dpi}) "\A"
"\A"
--dd-to-string(PropJockey) "\A"
--dd-to-string({PropJockey, PropJockey}) "\A"
--dd-to-string({PropJockey PropJockey}) "\A"
--dd-to-string(var(--undefined)) "\A"
--dd-to-string(var(--undefined, )) "\A"
"\A"
--dd-to-string(linear-gradient(red 0% 100%)) "\A"
--dd-to-string({linear-gradient(red 0% 100%), url("./")}) "\A"
--dd-to-string({linear-gradient(red 0% 100%) url("./")}) "\A"
--dd-to-string(url("./")) "\A"
--dd-to-string({url("./"), url("./")}) "\A"
--dd-to-string({url("./") url("./")}) "\A"
--dd-to-string(rotate(-1deg)) "\A"
--dd-to-string({rotate(-1deg), rotate(-1deg)}) "\A"
--dd-to-string({rotate(-1deg) rotate(-1deg)}) "\A"
"\A"
--dd-to-string({PropJockey url("https://jane.propjockey.io")})
;
}
Related Functions
--dd-type-of
--dd-to-typed(--dd-any)
Cast a anything to its corresponding type, which often computes the value.
There are caveats everywhere in CSS, among them, typed vs untyped var values can behave differently like with if style and in large calc()s.
Arguments
--dd-any Any value.
Returns
Returns the same value, typed specifically if it can be, which often causes it to compute.
Example
@import url("@URL@/functions/cast/to-typed.css");
.untyped {
--color: red;
--number: calc(200 / 7);
--integer: calc(100 / 25);
--length-percentage-csv: calc(10vw + 10px), calc(10% * 1.25);
}
.typed {
--color: --dd-to-typed(red);
--number: --dd-to-typed(calc(200 / 7));
--integer: --dd-to-typed(calc(100 / 25));
--length-percentage-csv: --dd-to-typed({calc(10vw + 10px), calc(10% * 1.25)});
}
Related Functions
--dd-type-of
--dd-compute
Comparitors
/functions/compare/index.css
Compare two numbers, integers, or dimensions with each other (less than, greater than, etc) and get back boolean bit flags to use in calc() switches, check them with if(style()), or cast them to space toggles to flip any property (and any number of properties).
--dd-cmp(--dd-left, --dd-right)
The base comparitor that indicates the balance between left and right arguments.
Arguments
--dd-left A dimension or number.
--dd-right A dimension or number.
Returns
An integer of -1, 0, or 1 for less than, equal to, and greater than, respectively. If it's -1, "left is less than right".
Example
@import url("@URL@/functions/compare/cmp.css");
.cmp::after {
--balance: --dd-cmp(100vw, 100vh);
content: "The screen width is " if(
style(--balance: -1): "less than";
style(--balance: 1): "greater than";
style(--balance: 0): "equal to";
else: "incomprehensible with respect to";
) " the screen height.";
}
--dd-eq(--dd-left, --dd-right)
Is left equal to right?
Arguments
--dd-left A dimension or number.
--dd-right A dimension or number.
Returns
1 if equal, else 0
Example
@import url("@URL@/functions/compare/eq.css");
.comparitor::after {
--eq: --dd-eq(100vw, 100vmin);
content: "The screen is in " if(
style(--eq: 1): "portrait orientation. Or it's a square.";
else: "landscape orientation.";
);
}
--dd-gt(--dd-left, --dd-right)
Is left greater than right?
Arguments
--dd-left A dimension or number.
--dd-right A dimension or number.
Returns
1 if greater than, else 0
Example
@import url("@URL@/functions/compare/gt.css");
.comparitor::after {
--gt: --dd-gt(180deg, 3.1rad);
content: "180deg is " if(
style(--gt: 1): "greater than";
else: "not greater than";
) " 3.1rad.";
}
--dd-gte(--dd-left, --dd-right)
Is left greater than or equal to right?
Arguments
--dd-left A dimension or number.
--dd-right A dimension or number.
Returns
1 if left is greater than or equal to right, else 0
Example
@import url("@URL@/functions/compare/gte.css");
.comparitor::after {
--gte: --dd-gte(180deg, 3.2rad);
content: "180deg is " if(
style(--gte: 1): "greater than or equal to";
else: "less than";
) " 3.2rad.";
}
--dd-lt(--dd-left, --dd-right)
Is left less than right?
Arguments
--dd-left A dimension or number.
--dd-right A dimension or number.
Returns
1 if left is less than right, else 0
Example
@import url("@URL@/functions/compare/lt.css");
.comparitor::after {
--lt: --dd-lt(1s, 1000.01ms);
content: "1 second is " if(
style(--lt: 1): "less than";
else: "not less than";
) " 1000.01 milliseconds";
}
--dd-lte(--dd-left, --dd-right)
Is left less than or equal to right?
Arguments
--dd-left A dimension or number.
--dd-right A dimension or number.
Returns
1 if left is less than or equal to right, else 0
Example
@import url("@URL@/functions/compare/lte.css");
.comparitor::after {
--lte: --dd-lte(1.00001s, 1000.01ms);
content: "1.00001 seconds is " if(
style(--lte: 1): "less than or equal to";
else: "greater than";
) " 1000.01 milliseconds";
}
--dd-neq(--dd-left, --dd-right)
Is left unequal to right?
Arguments
--dd-left A dimension or number.
--dd-right A dimension or number.
Returns
1 if unequal, else 0
Example
@import url("@URL@/functions/compare/neq.css");
.comparitor::after {
--neq: --dd-neq(100vw, 100vmin);
content: "The screen is in" if(
style(--neq: 1): "landscape orientation";
else: "portrait orientation, or it's a square";
) ".";
}
Bit Logic
/functions/logic/bit/index.css
--dd-and-bit(--dd-bit-a, --dd-bit-b)
Single bit a AND b, a & b
Arguments
--dd-bit-a An integer of either 1 or 0.
--dd-bit-b An integer of either 1 or 0.
Returns
a bit: 1 if a AND b, else 0
Example
@import url("@URL@/functions/logic/bit/and-bit.css");
@import url("@URL@/functions/cast/to-string.css");
.logic-operation::after {
--truthy: 1;
--falsey: 0;
content:
"Single-bit logic \A"
--dd-to-string(var(--truthy)) " and "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-and-bit(var(--truthy), var(--truthy))
) "\A"
--dd-to-string(var(--truthy)) " and "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-and-bit(var(--truthy), var(--falsey))
) "\A"
--dd-to-string(var(--falsey)) " and "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-and-bit(var(--falsey), var(--truthy))
) "\A"
--dd-to-string(var(--falsey)) " and "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-and-bit(var(--falsey), var(--falsey))
)
;
text-transform: uppercase;
white-space: pre;
}
--dd-nand-bit(--dd-bit-a, --dd-bit-b)
Single bit NOT a AND b
Arguments
--dd-bit-a An integer of either 1 or 0.
--dd-bit-b An integer of either 1 or 0.
Returns
a bit: 1 if NOT a AND b, else 0
Example
@import url("@URL@/functions/logic/bit/nand-bit.css");
@import url("@URL@/functions/cast/to-string.css");
.logic-operation::after {
--truthy: 1;
--falsey: 0;
content:
"Single-bit logic \A"
--dd-to-string(var(--truthy)) " nand "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-nand-bit(var(--truthy), var(--truthy))
) "\A"
--dd-to-string(var(--truthy)) " nand "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-nand-bit(var(--truthy), var(--falsey))
) "\A"
--dd-to-string(var(--falsey)) " nand "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-nand-bit(var(--falsey), var(--truthy))
) "\A"
--dd-to-string(var(--falsey)) " nand "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-nand-bit(var(--falsey), var(--falsey))
)
;
text-transform: uppercase;
white-space: pre;
}
--dd-nor-bit(--dd-bit-a, --dd-bit-b)
Single bit NOT a OR b
Arguments
--dd-bit-a An integer of either 1 or 0.
--dd-bit-b An integer of either 1 or 0.
Returns
a bit: 1 if NOT a OR b, else 0
Example
@import url("@URL@/functions/logic/bit/nor-bit.css");
@import url("@URL@/functions/cast/to-string.css");
.logic-operation::after {
--truthy: 1;
--falsey: 0;
content:
"Single-bit logic \A"
--dd-to-string(var(--truthy)) " nor "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-nor-bit(var(--truthy), var(--truthy))
) "\A"
--dd-to-string(var(--truthy)) " nor "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-nor-bit(var(--truthy), var(--falsey))
) "\A"
--dd-to-string(var(--falsey)) " nor "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-nor-bit(var(--falsey), var(--truthy))
) "\A"
--dd-to-string(var(--falsey)) " nor "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-nor-bit(var(--falsey), var(--falsey))
)
;
text-transform: uppercase;
white-space: pre;
}
--dd-not-bit(--dd-bit)
Single bit: NOT bit
Arguments
--dd-bit An integer of either 1 or 0.
Returns
a bit: 1 if the input bit was 0, else 1
Example
@import url("@URL@/functions/logic/bit/not-bit.css");
@import url("@URL@/functions/cast/to-string.css");
.logic-operation::after {
--truthy: 1;
--falsey: 0;
content:
"Single-bit logic \A"
" not "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-not-bit(var(--truthy))
) "\A"
" not "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-not-bit(var(--falsey))
)
;
text-transform: uppercase;
white-space: pre;
}
--dd-or-bit(--dd-bit-a, --dd-bit-b)
Single bit a OR b
Arguments
--dd-bit-a An integer of either 1 or 0.
--dd-bit-b An integer of either 1 or 0.
Returns
a bit: 1 if a OR b, else 0
Example
@import url("@URL@/functions/logic/bit/or-bit.css");
@import url("@URL@/functions/cast/to-string.css");
.logic-operation::after {
--truthy: 1;
--falsey: 0;
content:
"Single-bit logic \A"
--dd-to-string(var(--truthy)) " or "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-or-bit(var(--truthy), var(--truthy))
) "\A"
--dd-to-string(var(--truthy)) " or "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-or-bit(var(--truthy), var(--falsey))
) "\A"
--dd-to-string(var(--falsey)) " or "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-or-bit(var(--falsey), var(--truthy))
) "\A"
--dd-to-string(var(--falsey)) " or "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-or-bit(var(--falsey), var(--falsey))
)
;
text-transform: uppercase;
white-space: pre;
}
--dd-xnor-bit(--dd-bit-a, --dd-bit-b)
Single bit NOT a XOR b
Arguments
--dd-bit-a An integer of either 1 or 0.
--dd-bit-b An integer of either 1 or 0.
Returns
a bit: 1 if NOT a XOR b, else 0
Example
@import url("@URL@/functions/logic/bit/xnor-bit.css");
@import url("@URL@/functions/cast/to-string.css");
.logic-operation::after {
--truthy: 1;
--falsey: 0;
content:
"Single-bit logic \A"
--dd-to-string(var(--truthy)) " xnor "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-xnor-bit(var(--truthy), var(--truthy))
) "\A"
--dd-to-string(var(--truthy)) " xnor "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-xnor-bit(var(--truthy), var(--falsey))
) "\A"
--dd-to-string(var(--falsey)) " xnor "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-xnor-bit(var(--falsey), var(--truthy))
) "\A"
--dd-to-string(var(--falsey)) " xnor "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-xnor-bit(var(--falsey), var(--falsey))
)
;
text-transform: uppercase;
white-space: pre;
}
--dd-xor-bit(--dd-bit-a, --dd-bit-b)
Single bit a XOR b
Arguments
--dd-bit-a An integer of either 1 or 0.
--dd-bit-b An integer of either 1 or 0.
Returns
a bit: 1 if a XOR b, else 0
Example
@import url("@URL@/functions/logic/bit/xor-bit.css");
@import url("@URL@/functions/cast/to-string.css");
.logic-operation::after {
--truthy: 1;
--falsey: 0;
content:
"Single-bit logic \A"
--dd-to-string(var(--truthy)) " xor "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-xor-bit(var(--truthy), var(--truthy))
) "\A"
--dd-to-string(var(--truthy)) " xor "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-xor-bit(var(--truthy), var(--falsey))
) "\A"
--dd-to-string(var(--falsey)) " xor "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-xor-bit(var(--falsey), var(--truthy))
) "\A"
--dd-to-string(var(--falsey)) " xor "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-xor-bit(var(--falsey), var(--falsey))
)
;
text-transform: uppercase;
white-space: pre;
}
int16 Logic
/functions/logic/int16/index.css
All of the single-bit logical operators can be done on 16 bit integers as well, along with many more bitwise operations. All of this has long been possible in CSS with libraries like css-bin-bits but custom CSS functions have made it nearly trivial.
Negative values are not properly managed yet so please do not rely on the partial negative implementation. Please do reach out if you have use cases to motivate the final development of bitwise operations on negative 16-bit integers.
--dd-and-int16(--dd-int16-a, --dd-int16-b)
int16 a AND b, a & b
Arguments
--dd-int16-a A 16 bit integer.
--dd-int16-b A 16 bit integer.
Returns
a 16 bit integer: 1 if a AND b, else 0
Example
@import url("@URL@/functions/logic/int16/and-int16.css");
@property --tick {
syntax: "<number>";
inherits: false;
initial-value: 0;
}
@keyframes move { to { --tick: 512; } }
.glitch-tick {
transform: translateX(calc(1px * var(--tick)));
/* 182 = 10110110 */
--glitch-tick: --dd-and-int16(
round(down, var(--tick)),
182
);
box-shadow: calc(
(var(--glitch-tick) - 150) * 1px
) 1px 15px #0084;
animation: move 5s linear infinite;
width: 50px;
height: 50px;
background: black;
}
--dd-get-bit-int16(--dd-int16, --dd-which-bit)
Extract a specific bit from a 16 bit integer, 0 based index from least significant to most
Arguments
--dd-int16 A 16 bit integer.
--dd-which-bit An integer in range [0, 15].
Returns
a single bit integer
Example
@import url("@URL@/functions/logic/int16/get-bit-int16.css");
@import url("@URL@/functions/cast/to-string.css");
@import url("@URL@/functions/cast/dcb-to-int16.css");
@import url("@URL@/functions/cast/int16-to-bit-string.css");
.logic-operation::after {
--int16: --dd-dcb-to-int16(1011, 0010, 1010, 1001);
content:
"Binary: " --dd-int16-to-bit-string(var(--int16)) "\A"
"bit 0: " --dd-to-string(--dd-get-bit-int16(var(--int16), 0)) "\A"
"bit 1: " --dd-to-string(--dd-get-bit-int16(var(--int16), 1)) "\A"
"bit 9: " --dd-to-string(--dd-get-bit-int16(var(--int16), 9)) "\A"
"bit 14: " --dd-to-string(--dd-get-bit-int16(var(--int16), 14)) "\A"
"bit 15: " --dd-to-string(--dd-get-bit-int16(var(--int16), 15)) "\A"
"bit 16: " --dd-to-string(--dd-get-bit-int16(var(--int16), 16)) "\A"
;
white-space: pre;
}
Related Functions
--dd-set-bit-int16
--dd-toggle-bit-int16
--dd-get-byte-int16(--dd-int16, --dd-which-byte)
Extract a byte from a 16 bit integer, 0 based index from least significant to most
Arguments
--dd-int16 A 16 bit integer.
--dd-which-byte An integer in range [0, 1].
Returns
a single byte integer
Example
@import url("@URL@/functions/logic/int16/get-byte-int16.css");
@import url("@URL@/functions/cast/dcb-to-int16.css");
@import url("@URL@/functions/cast/int16-to-bit-string.css");
.logic-operation::after {
--int16: --dd-dcb-to-int16(1011, 0010, 1010, 1001);
content:
"Binary: " --dd-int16-to-bit-string(var(--int16)) "\A"
"byte 0: " --dd-int16-to-bit-string(--dd-get-byte-int16(var(--int16), 0)) "\A"
"byte 1: " --dd-int16-to-bit-string(--dd-get-byte-int16(var(--int16), 1)) "\A"
;
white-space: pre;
}
--dd-get-nibble-int16(--dd-int16, --dd-which-nibble)
Extract a nibble from a 16 bit integer, 0 based index from least significant to most
Arguments
--dd-int16 A 16 bit integer.
--dd-which-nibble An integer in range [0, 3].
Returns
a single nibble (4bits) integer
Example
@import url("@URL@/functions/logic/int16/get-nibble-int16.css");
@import url("@URL@/functions/cast/dcb-to-int16.css");
@import url("@URL@/functions/cast/int16-to-bit-string.css");
.logic-operation::after {
--int16: --dd-dcb-to-int16(1011, 0010, 1010, 1001);
content:
"Binary: " --dd-int16-to-bit-string(var(--int16)) "\A"
"nibble 0: " --dd-int16-to-bit-string(--dd-get-nibble-int16(var(--int16), 0)) "\A"
"nibble 1: " --dd-int16-to-bit-string(--dd-get-nibble-int16(var(--int16), 1)) "\A"
"nibble 2: " --dd-int16-to-bit-string(--dd-get-nibble-int16(var(--int16), 2), 4) "\A"
"nibble 3: " --dd-int16-to-bit-string(--dd-get-nibble-int16(var(--int16), 3)) "\A"
;
white-space: pre;
}
--dd-msb-int16(--dd-int16)
Returns the 0 based bit index of the most significant bit in a 16 bit integer.
Arguments
--dd-int16 A 16 bit integer.
Returns
an integer in range [0, 15]
Example
@import url("@URL@/functions/logic/int16/msb-int16.css");
@import url("@URL@/functions/cast/dcb-to-int16.css");
@import url("@URL@/functions/cast/int16-to-bit-string.css");
@import url("@URL@/functions/cast/to-string.css");
.logic-operation::after {
--int16-a: --dd-dcb-to-int16(1011, 0010, 1010, 1001);
--int16-b: 0;
--int16-c: --dd-dcb-to-int16(11, 0010, 1010, 1001);
--int16-d: --dd-dcb-to-int16(0000, 0110, 0000);
content:
"Binary: " --dd-int16-to-bit-string(var(--int16-a)) "\A"
"msb index: " --dd-to-string(--dd-msb-int16(var(--int16-a))) "\A"
"\A"
"Binary: " --dd-int16-to-bit-string(var(--int16-b)) "\A"
"msb index: " --dd-to-string(--dd-msb-int16(var(--int16-b))) "\A"
"\A"
"Binary: " --dd-int16-to-bit-string(var(--int16-c)) "\A"
"msb index: " --dd-to-string(--dd-msb-int16(var(--int16-c))) "\A"
"\A"
"Binary: " --dd-int16-to-bit-string(var(--int16-d)) "\A"
"msb index: " --dd-to-string(--dd-msb-int16(var(--int16-d))) "\A"
;
white-space: pre;
}
--dd-nand-int16(--dd-int16-a, --dd-int16-b)
int16 NOT a AND b
Arguments
--dd-int16-a A 16 bit integer.
--dd-int16-b A 16 bit integer.
Returns
a 16 bit integer: NOT a AND b
Example
@import url("@URL@/functions/logic/int16/nand-int16.css");
@import url("@URL@/functions/cast/dcb-to-int16.css");
@import url("@URL@/functions/cast/int16-to-bit-string.css");
.logic-operation::after {
--int16-a: --dd-dcb-to-int16(1011, 0010, 1010, 1001);
--int16-b: --dd-dcb-to-int16(0100, 1101, 0101, 0110);
content: "nand\A"
--dd-int16-to-bit-string(
var(--int16-a),
16
) "\A"
--dd-int16-to-bit-string(
var(--int16-a),
16
) "\A"
"----------------\A"
--dd-int16-to-bit-string(
--dd-nand-int16(
var(--int16-a),
var(--int16-a)
),
16
) "\A"
"\A"
--dd-int16-to-bit-string(
var(--int16-a),
16
) "\A"
--dd-int16-to-bit-string(
var(--int16-b),
16
) "\A"
"----------------\A"
--dd-int16-to-bit-string(
--dd-nand-int16(
var(--int16-a),
var(--int16-b)
),
16
) "\A"
;
font-family: monospace;
white-space: pre;
}
--dd-nor-int16(--dd-int16-a, --dd-int16-b)
int16 NOT a OR b
Arguments
--dd-int16-a A 16 bit integer.
--dd-int16-b A 16 bit integer.
Returns
a 16 bit integer: NOT a OR b
Example
@import url("@URL@/functions/logic/int16/nor-int16.css");
@import url("@URL@/functions/cast/dcb-to-int16.css");
@import url("@URL@/functions/cast/int16-to-bit-string.css");
.logic-operation::after {
--int16-a: --dd-dcb-to-int16(1011, 0010, 1010, 1001);
--int16-b: --dd-dcb-to-int16(0100, 1101, 0101, 0110);
content: "nor\A"
--dd-int16-to-bit-string(
var(--int16-a),
16
) "\A"
--dd-int16-to-bit-string(
var(--int16-a),
16
) "\A"
"----------------\A"
--dd-int16-to-bit-string(
--dd-nor-int16(
var(--int16-a),
var(--int16-a)
),
16
) "\A"
"\A"
--dd-int16-to-bit-string(
var(--int16-a),
16
) "\A"
--dd-int16-to-bit-string(
var(--int16-b),
16
) "\A"
"----------------\A"
--dd-int16-to-bit-string(
--dd-nor-int16(
var(--int16-a),
var(--int16-b)
),
16
) "\A"
;
font-family: monospace;
white-space: pre;
}
--dd-not-int16(--dd-int16)
NOT int16
Arguments
--dd-int16 A 16 bit integer.
Returns
a 16 bit integer inverted
Example
@import url("@URL@/functions/logic/int16/not-int16.css");
@import url("@URL@/functions/cast/dcb-to-int16.css");
@import url("@URL@/functions/cast/int16-to-bit-string.css");
.logic-operation::after {
--int16: --dd-dcb-to-int16(1011, 0010, 1010, 1001);
content: "not\A"
--dd-int16-to-bit-string(
var(--int16),
16
) "\A"
"----------------\A"
--dd-int16-to-bit-string(
--dd-not-int16(
var(--int16)
),
16
) "\A"
;
font-family: monospace;
white-space: pre;
}
--dd-or-int16(--dd-int16-a, --dd-int16-b)
int16 a OR b
Arguments
--dd-int16-a A 16 bit integer.
--dd-int16-b A 16 bit integer.
Returns
a 16 bit integer: a OR b
Example
@import url("@URL@/functions/logic/int16/or-int16.css");
@import url("@URL@/functions/cast/dcb-to-int16.css");
@import url("@URL@/functions/cast/int16-to-bit-string.css");
.logic-operation::after {
--int16-a: --dd-dcb-to-int16(1011, 0010, 1010, 1001);
--int16-b: --dd-dcb-to-int16(0100, 0000, 0101, 0110);
content: "or\A"
--dd-int16-to-bit-string(
var(--int16-a),
16
) "\A"
--dd-int16-to-bit-string(
var(--int16-a),
16
) "\A"
"----------------\A"
--dd-int16-to-bit-string(
--dd-or-int16(
var(--int16-a),
var(--int16-a)
),
16
) "\A"
"\A"
--dd-int16-to-bit-string(
var(--int16-a),
16
) "\A"
--dd-int16-to-bit-string(
var(--int16-b),
16
) "\A"
"----------------\A"
--dd-int16-to-bit-string(
--dd-or-int16(
var(--int16-a),
var(--int16-b)
),
16
) "\A"
;
font-family: monospace;
white-space: pre;
}
--dd-set-bit-int16(--dd-int16, --dd-which-bit, --dd-to-bit-value)
Sets a specific bit in a 16 bit integer, 0 based index from least significant to most
Arguments
--dd-int16 A 16 bit integer.
--dd-which-bit An integer in range [0, 15].
--dd-to-bit-value A single bit integer.
Returns
The 16 bit input integer with the corresponding bit set to the specified value.
Example
@import url("@URL@/functions/logic/int16/set-bit-int16.css");
@import url("@URL@/functions/cast/dcb-to-int16.css");
@import url("@URL@/functions/cast/int16-to-bit-string.css");
.logic-operation::after {
--int16: --dd-dcb-to-int16(1011, 0010, 1010, 1001);
content:
"Binary: " --dd-int16-to-bit-string(var(--int16)) "\A"
"bit 0 to 0: " --dd-int16-to-bit-string(--dd-set-bit-int16(var(--int16), 0, 0)) "\A"
"bit 1 to 0: " --dd-int16-to-bit-string(--dd-set-bit-int16(var(--int16), 1, 0)) "\A"
"bit 9 to 0: " --dd-int16-to-bit-string(--dd-set-bit-int16(var(--int16), 9, 1)) "\A"
"bit 14 to 1: " --dd-int16-to-bit-string(--dd-set-bit-int16(var(--int16), 14, 1)) "\A"
"bit 15 to 0: " --dd-int16-to-bit-string(--dd-set-bit-int16(var(--int16), 15, 0)) "\A"
;
white-space: pre;
}
Related Functions
--dd-get-bit-int16
--dd-toggle-bit-int16
--dd-shift-left-int16(--dd-int16, --dd-distance)
Shifts the bits in a 16 bit integer to the left (increase significance) by the specified distance.
Arguments
--dd-int16 A 16 bit integer.
--dd-distance An integer in range [0, 15].
Returns
The 16 bit input integer shifted.
Example
@import url("@URL@/functions/logic/int16/shift-left-int16.css");
@import url("@URL@/functions/cast/dcb-to-int16.css");
@import url("@URL@/functions/cast/int16-to-bit-string.css");
.logic-operation::after {
--int16: --dd-dcb-to-int16(1011, 0010, 1010, 1001);
content:
"Binary: " --dd-int16-to-bit-string(var(--int16)) "\A"
"shift-left 0: " --dd-int16-to-bit-string(--dd-shift-left-int16(var(--int16), 0)) "\A"
"shift-left 1: " --dd-int16-to-bit-string(--dd-shift-left-int16(var(--int16), 1)) "\A"
"shift-left 6: " --dd-int16-to-bit-string(--dd-shift-left-int16(var(--int16), 6)) "\A"
"shift-left 7: " --dd-int16-to-bit-string(--dd-shift-left-int16(var(--int16), 7)) "\A"
"shift-left 15: " --dd-int16-to-bit-string(--dd-shift-left-int16(var(--int16), 15)) "\A"
;
white-space: pre;
}
Related Functions
--dd-shift-right-int16
--dd-shift-right-int16(--dd-int16, --dd-distance)
Shifts the bits in a 16 bit integer to the right (decrease significance) by the specified distance.
Arguments
--dd-int16 A 16 bit integer.
--dd-distance An integer in range [0, 15].
Returns
The 16 bit input integer shifted.
Example
@import url("@URL@/functions/logic/int16/shift-right-int16.css");
@import url("@URL@/functions/cast/dcb-to-int16.css");
@import url("@URL@/functions/cast/int16-to-bit-string.css");
.logic-operation::after {
--int16: --dd-dcb-to-int16(1011, 0010, 1010, 1001);
content:
"Binary: " --dd-int16-to-bit-string(var(--int16)) "\A"
"shift-right 0: " --dd-int16-to-bit-string(--dd-shift-right-int16(var(--int16), 0)) "\A"
"shift-right 1: " --dd-int16-to-bit-string(--dd-shift-right-int16(var(--int16), 1)) "\A"
"shift-right 6: " --dd-int16-to-bit-string(--dd-shift-right-int16(var(--int16), 6)) "\A"
"shift-right 7: " --dd-int16-to-bit-string(--dd-shift-right-int16(var(--int16), 7)) "\A"
"shift-right 15: " --dd-int16-to-bit-string(--dd-shift-right-int16(var(--int16), 15)) "\A"
;
white-space: pre;
}
Related Functions
--dd-shift-left-int16
--dd-toggle-bit-int16(--dd-int16, --dd-which-bit)
Flips a specific bit in a 16 bit integer, 0 based index from least significant to most
Arguments
--dd-int16 A 16 bit integer.
--dd-which-bit An integer in range [0, 15].
Returns
The 16 bit input integer with the corresponding bit flipped.
Example
@import url("@URL@/functions/logic/int16/toggle-bit-int16.css");
@import url("@URL@/functions/cast/dcb-to-int16.css");
@import url("@URL@/functions/cast/int16-to-bit-string.css");
.logic-operation::after {
--int16: --dd-dcb-to-int16(1011, 0010, 1010, 1001);
content:
"Binary: " --dd-int16-to-bit-string(var(--int16)) "\A"
"bit 0 toggled: " --dd-int16-to-bit-string(--dd-toggle-bit-int16(var(--int16), 0)) "\A"
"bit 1 toggled: " --dd-int16-to-bit-string(--dd-toggle-bit-int16(var(--int16), 1)) "\A"
"bit 9 toggled: " --dd-int16-to-bit-string(--dd-toggle-bit-int16(var(--int16), 9)) "\A"
"bit 14 toggled: " --dd-int16-to-bit-string(--dd-toggle-bit-int16(var(--int16), 14)) "\A"
"bit 15 toggled: " --dd-int16-to-bit-string(--dd-toggle-bit-int16(var(--int16), 15)) "\A"
;
white-space: pre;
}
Related Functions
--dd-get-bit-int16
--dd-set-bit-int16
--dd-xnor-int16(--dd-int16-a, --dd-int16-b)
int16 NOT a XOR b
Arguments
--dd-int16-a A 16 bit integer.
--dd-int16-b A 16 bit integer.
Returns
a 16 bit integer: NOT a XOR b
Example
@import url("@URL@/functions/logic/int16/xnor-int16.css");
@import url("@URL@/functions/cast/dcb-to-int16.css");
@import url("@URL@/functions/cast/int16-to-bit-string.css");
.logic-operation::after {
--int16-a: --dd-dcb-to-int16(1011, 0010, 1010, 1001);
--int16-b: --dd-dcb-to-int16(0100, 0000, 0101, 0110);
content: "xnor\A"
--dd-int16-to-bit-string(
var(--int16-a),
16
) "\A"
--dd-int16-to-bit-string(
var(--int16-a),
16
) "\A"
"----------------\A"
--dd-int16-to-bit-string(
--dd-xnor-int16(
var(--int16-a),
var(--int16-a)
),
16
) "\A"
"\A"
--dd-int16-to-bit-string(
var(--int16-a),
16
) "\A"
--dd-int16-to-bit-string(
var(--int16-b),
16
) "\A"
"----------------\A"
--dd-int16-to-bit-string(
--dd-xnor-int16(
var(--int16-a),
var(--int16-b)
),
16
) "\A"
;
font-family: monospace;
white-space: pre;
}
--dd-xor-int16(--dd-int16-a, --dd-int16-b)
int16 a XOR b
Arguments
--dd-int16-a A 16 bit integer.
--dd-int16-b A 16 bit integer.
Returns
a 16 bit integer: a XOR b
Example
@import url("@URL@/functions/logic/int16/xor-int16.css");
@import url("@URL@/functions/cast/dcb-to-int16.css");
@import url("@URL@/functions/cast/int16-to-bit-string.css");
.logic-operation::after {
--int16-a: --dd-dcb-to-int16(1011, 0010, 1010, 1001);
--int16-b: --dd-dcb-to-int16(0100, 0000, 0101, 0110);
content: "xor\A"
--dd-int16-to-bit-string(
var(--int16-a),
16
) "\A"
--dd-int16-to-bit-string(
var(--int16-a),
16
) "\A"
"----------------\A"
--dd-int16-to-bit-string(
--dd-xor-int16(
var(--int16-a),
var(--int16-a)
),
16
) "\A"
"\A"
--dd-int16-to-bit-string(
var(--int16-a),
16
) "\A"
--dd-int16-to-bit-string(
var(--int16-b),
16
) "\A"
"----------------\A"
--dd-int16-to-bit-string(
--dd-xor-int16(
var(--int16-a),
var(--int16-b)
),
16
) "\A"
;
font-family: monospace;
white-space: pre;
}
Inverted Space Toggle Logic
/functions/logic/inverted-space-toggle/index.css
Since inverted space toggles represent boolean operators, they can be combined logically just like bits to form complex conditionals.
--dd-and-ist(--dd-ist-a, --dd-ist-b)
Inverted Space Toggle a AND b, a & b
Arguments
--dd-ist-a An Inverted Space Toggle either initial or space (<empty>).
--dd-ist-b An Inverted Space Toggle either initial or space (<empty>).
Returns
an Inverted Space Toggle: initial if a AND b, else space (<empty>)
Example
@import url("@URL@/functions/logic/inverted-space-toggle/and-ist.css");
@import url("@URL@/functions/cast/to-string.css");
.logic-operation::after {
--truthy: initial;
--falsey: ;
content:
"Inverted Space Toggle logic \A"
--dd-to-string(var(--truthy)) " and "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-and-ist(var(--truthy), var(--truthy))
) "\A"
--dd-to-string(var(--truthy)) " and "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-and-ist(var(--truthy), var(--falsey))
) "\A"
--dd-to-string(var(--falsey)) " and "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-and-ist(var(--falsey), var(--truthy))
) "\A"
--dd-to-string(var(--falsey)) " and "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-and-ist(var(--falsey), var(--falsey))
)
;
white-space: pre;
}
--dd-nand-ist(--dd-ist-a, --dd-ist-b)
Inverted Space Toggle NOT a AND b
Arguments
--dd-ist-a An Inverted Space Toggle either initial or space (<empty>).
--dd-ist-b An Inverted Space Toggle either initial or space (<empty>).
Returns
an Inverted Space Toggle: initial if NOT a AND b, else space (<empty>)
Example
@import url("@URL@/functions/logic/inverted-space-toggle/nand-ist.css");
@import url("@URL@/functions/cast/to-string.css");
.logic-operation::after {
--truthy: initial;
--falsey: ;
content:
"Inverted Space Toggle logic \A"
--dd-to-string(var(--truthy)) " nand "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-nand-ist(var(--truthy), var(--truthy))
) "\A"
--dd-to-string(var(--truthy)) " nand "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-nand-ist(var(--truthy), var(--falsey))
) "\A"
--dd-to-string(var(--falsey)) " nand "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-nand-ist(var(--falsey), var(--truthy))
) "\A"
--dd-to-string(var(--falsey)) " nand "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-nand-ist(var(--falsey), var(--falsey))
)
;
white-space: pre;
}
--dd-nor-ist(--dd-ist-a, --dd-ist-b)
Inverted Space Toggle NOT a OR b
Arguments
--dd-ist-a An Inverted Space Toggle either initial or space (<empty>).
--dd-ist-b An Inverted Space Toggle either initial or space (<empty>).
Returns
an Inverted Space Toggle: initial if NOT a OR b, else space (<empty>)
Example
@import url("@URL@/functions/logic/inverted-space-toggle/nor-ist.css");
@import url("@URL@/functions/cast/to-string.css");
.logic-operation::after {
--truthy: initial;
--falsey: ;
content:
"Inverted Space Toggle logic \A"
--dd-to-string(var(--truthy)) " nor "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-nor-ist(var(--truthy), var(--truthy))
) "\A"
--dd-to-string(var(--truthy)) " nor "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-nor-ist(var(--truthy), var(--falsey))
) "\A"
--dd-to-string(var(--falsey)) " nor "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-nor-ist(var(--falsey), var(--truthy))
) "\A"
--dd-to-string(var(--falsey)) " nor "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-nor-ist(var(--falsey), var(--falsey))
)
;
white-space: pre;
}
--dd-not-ist(--dd-ist)
Inverted Space Toggle: NOT bit
Arguments
--dd-ist An Inverted Space Toggle either initial or space (<empty>).
Returns
an Inverted Space Toggle: initial if the input was space, else initial
Example
@import url("@URL@/functions/logic/inverted-space-toggle/not-ist.css");
@import url("@URL@/functions/cast/to-string.css");
.logic-operation::after {
--truthy: initial;
--falsey: ;
content:
"Inverted Space Toggle logic \A"
" not "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-not-ist(var(--truthy))
) "\A"
" not "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-not-ist(var(--falsey))
)
;
white-space: pre;
}
--dd-or-ist(--dd-ist-a, --dd-ist-b)
Inverted Space Toggle a OR b
Arguments
--dd-ist-a An Inverted Space Toggle either initial or space (<empty>).
--dd-ist-b An Inverted Space Toggle either initial or space (<empty>).
Returns
an Inverted Space Toggle: initial if a OR b, else space (<empty>)
Example
@import url("@URL@/functions/logic/inverted-space-toggle/or-ist.css");
@import url("@URL@/functions/cast/to-string.css");
.logic-operation::after {
--truthy: initial;
--falsey: ;
content:
"Inverted Space Toggle logic \A"
--dd-to-string(var(--truthy)) " or "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-or-ist(var(--truthy), var(--truthy))
) "\A"
--dd-to-string(var(--truthy)) " or "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-or-ist(var(--truthy), var(--falsey))
) "\A"
--dd-to-string(var(--falsey)) " or "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-or-ist(var(--falsey), var(--truthy))
) "\A"
--dd-to-string(var(--falsey)) " or "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-or-ist(var(--falsey), var(--falsey))
)
;
white-space: pre;
}
--dd-xnor-ist(--dd-ist-a, --dd-ist-b)
Inverted Space Toggle NOT a XOR b
Arguments
--dd-ist-a An Inverted Space Toggle either initial or space (<empty>).
--dd-ist-b An Inverted Space Toggle either initial or space (<empty>).
Returns
an Inverted Space Toggle: initial if NOT a XOR b, else space (<empty>)
Example
@import url("@URL@/functions/logic/inverted-space-toggle/xnor-ist.css");
@import url("@URL@/functions/cast/to-string.css");
.logic-operation::after {
--truthy: initial;
--falsey: ;
content:
"Inverted Space Toggle logic \A"
--dd-to-string(var(--truthy)) " xnor "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-xnor-ist(var(--truthy), var(--truthy))
) "\A"
--dd-to-string(var(--truthy)) " xnor "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-xnor-ist(var(--truthy), var(--falsey))
) "\A"
--dd-to-string(var(--falsey)) " xnor "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-xnor-ist(var(--falsey), var(--truthy))
) "\A"
--dd-to-string(var(--falsey)) " xnor "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-xnor-ist(var(--falsey), var(--falsey))
)
;
white-space: pre;
}
--dd-xor-ist(--dd-ist-a, --dd-ist-b)
Inverted Space Toggle a XOR b
Arguments
--dd-ist-a An Inverted Space Toggle either initial or space (<empty>).
--dd-ist-b An Inverted Space Toggle either initial or space (<empty>).
Returns
an Inverted Space Toggle: initial if a XOR b, else space (<empty>)
Example
@import url("@URL@/functions/logic/inverted-space-toggle/xor-ist.css");
@import url("@URL@/functions/cast/to-string.css");
.logic-operation::after {
--truthy: initial;
--falsey: ;
content:
"Inverted Space Toggle logic \A"
--dd-to-string(var(--truthy)) " xor "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-xor-ist(var(--truthy), var(--truthy))
) "\A"
--dd-to-string(var(--truthy)) " xor "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-xor-ist(var(--truthy), var(--falsey))
) "\A"
--dd-to-string(var(--falsey)) " xor "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-xor-ist(var(--falsey), var(--truthy))
) "\A"
--dd-to-string(var(--falsey)) " xor "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-xor-ist(var(--falsey), var(--falsey))
)
;
white-space: pre;
}
Space Toggle Logic
/functions/logic/space-toggle/index.css
Since space toggles represent boolean operators, they can be combined logically just like bits to form complex conditionals.
--dd-and-st(--dd-st-a, --dd-st-b)
Space Toggle a AND b, a & b
Arguments
--dd-st-a A Space Toggle either space (<empty>) or initial.
--dd-st-b A Space Toggle either space (<empty>) or initial.
Returns
A Space Toggle: space (<empty>) if a AND b, else initial
Example
@import url("@URL@/functions/logic/space-toggle/and-st.css");
@import url("@URL@/functions/cast/to-string.css");
.logic-operation::after {
--truthy: ;
--falsey: initial;
content:
"Space Toggle logic \A"
--dd-to-string(var(--truthy)) " and "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-and-st(var(--truthy), var(--truthy))
) "\A"
--dd-to-string(var(--truthy)) " and "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-and-st(var(--truthy), var(--falsey))
) "\A"
--dd-to-string(var(--falsey)) " and "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-and-st(var(--falsey), var(--truthy))
) "\A"
--dd-to-string(var(--falsey)) " and "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-and-st(var(--falsey), var(--falsey))
)
;
white-space: pre;
}
--dd-nand-st(--dd-st-a, --dd-st-b)
Space Toggle NOT a AND b
Arguments
--dd-st-a A Space Toggle either space (<empty>) or initial.
--dd-st-b A Space Toggle either space (<empty>) or initial.
Returns
A Space Toggle: space (<empty>) if NOT a AND b, else initial
Example
@import url("@URL@/functions/logic/space-toggle/nand-st.css");
@import url("@URL@/functions/cast/to-string.css");
.logic-operation::after {
--truthy: ;
--falsey: initial;
content:
"Space Toggle logic \A"
--dd-to-string(var(--truthy)) " nand "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-nand-st(var(--truthy), var(--truthy))
) "\A"
--dd-to-string(var(--truthy)) " nand "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-nand-st(var(--truthy), var(--falsey))
) "\A"
--dd-to-string(var(--falsey)) " nand "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-nand-st(var(--falsey), var(--truthy))
) "\A"
--dd-to-string(var(--falsey)) " nand "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-nand-st(var(--falsey), var(--falsey))
)
;
white-space: pre;
}
--dd-nor-st(--dd-st-a, --dd-st-b)
Space Toggle NOT a OR b
Arguments
--dd-st-a A Space Toggle either space (<empty>) or initial.
--dd-st-b A Space Toggle either space (<empty>) or initial.
Returns
A Space Toggle: space (<empty>) if NOT a OR b, else initial
Example
@import url("@URL@/functions/logic/space-toggle/nor-st.css");
@import url("@URL@/functions/cast/to-string.css");
.logic-operation::after {
--truthy: ;
--falsey: initial;
content:
"Space Toggle logic \A"
--dd-to-string(var(--truthy)) " nor "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-nor-st(var(--truthy), var(--truthy))
) "\A"
--dd-to-string(var(--truthy)) " nor "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-nor-st(var(--truthy), var(--falsey))
) "\A"
--dd-to-string(var(--falsey)) " nor "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-nor-st(var(--falsey), var(--truthy))
) "\A"
--dd-to-string(var(--falsey)) " nor "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-nor-st(var(--falsey), var(--falsey))
)
;
white-space: pre;
}
--dd-not-st(--dd-st)
Space Toggle: NOT bit
Arguments
--dd-st A Space Toggle either space (<empty>) or initial.
Returns
A Space Toggle: space (<empty>) if the input was initial, else space
Example
@import url("@URL@/functions/logic/space-toggle/not-st.css");
@import url("@URL@/functions/cast/to-string.css");
.logic-operation::after {
--truthy: ;
--falsey: initial;
content:
"Space Toggle logic \A"
" not "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-not-st(var(--truthy))
) "\A"
" not "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-not-st(var(--falsey))
)
;
white-space: pre;
}
--dd-or-st(--dd-st-a, --dd-st-b)
Space Toggle a OR b
Arguments
--dd-st-a A Space Toggle either space (<empty>) or initial.
--dd-st-b A Space Toggle either space (<empty>) or initial.
Returns
A Space Toggle: space (<empty>) if a OR b, else initial
Example
@import url("@URL@/functions/logic/space-toggle/or-st.css");
@import url("@URL@/functions/cast/to-string.css");
.logic-operation::after {
--truthy: ;
--falsey: initial;
content:
"Space Toggle logic \A"
--dd-to-string(var(--truthy)) " or "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-or-st(var(--truthy), var(--truthy))
) "\A"
--dd-to-string(var(--truthy)) " or "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-or-st(var(--truthy), var(--falsey))
) "\A"
--dd-to-string(var(--falsey)) " or "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-or-st(var(--falsey), var(--truthy))
) "\A"
--dd-to-string(var(--falsey)) " or "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-or-st(var(--falsey), var(--falsey))
)
;
white-space: pre;
}
--dd-xnor-st(--dd-st-a, --dd-st-b)
Space Toggle NOT a XOR b
Arguments
--dd-st-a A Space Toggle either space (<empty>) or initial.
--dd-st-b A Space Toggle either space (<empty>) or initial.
Returns
A Space Toggle: space (<empty>) if NOT a XOR b, else initial
Example
@import url("@URL@/functions/logic/space-toggle/xnor-st.css");
@import url("@URL@/functions/cast/to-string.css");
.logic-operation::after {
--truthy: ;
--falsey: initial;
content:
"Space Toggle logic \A"
--dd-to-string(var(--truthy)) " xnor "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-xnor-st(var(--truthy), var(--truthy))
) "\A"
--dd-to-string(var(--truthy)) " xnor "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-xnor-st(var(--truthy), var(--falsey))
) "\A"
--dd-to-string(var(--falsey)) " xnor "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-xnor-st(var(--falsey), var(--truthy))
) "\A"
--dd-to-string(var(--falsey)) " xnor "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-xnor-st(var(--falsey), var(--falsey))
)
;
white-space: pre;
}
--dd-xor-st(--dd-st-a, --dd-st-b)
Space Toggle a XOR b
Arguments
--dd-st-a A Space Toggle either space (<empty>) or initial.
--dd-st-b A Space Toggle either space (<empty>) or initial.
Returns
A Space Toggle: space (<empty>) if a XOR b, else initial
Example
@import url("@URL@/functions/logic/space-toggle/xor-st.css");
@import url("@URL@/functions/cast/to-string.css");
.logic-operation::after {
--truthy: ;
--falsey: initial;
content:
"Space Toggle logic \A"
--dd-to-string(var(--truthy)) " xor "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-xor-st(var(--truthy), var(--truthy))
) "\A"
--dd-to-string(var(--truthy)) " xor "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-xor-st(var(--truthy), var(--falsey))
) "\A"
--dd-to-string(var(--falsey)) " xor "
--dd-to-string(var(--truthy)) " = "
--dd-to-string(
--dd-xor-st(var(--falsey), var(--truthy))
) "\A"
--dd-to-string(var(--falsey)) " xor "
--dd-to-string(var(--falsey)) " = "
--dd-to-string(
--dd-xor-st(var(--falsey), var(--falsey))
)
;
white-space: pre;
}
Iteration
/functions/repeat/index.css
There are many use cases for repeating values in CSS, the functions here begin to enable this directly in CSS. Byond practical, iteration is also excellent for mathematical artwork by creators like Ana Tudor. Because her beautiful work may require n2 loops and setting multiple values during a loop, not all variations on iteration are currently practical to achieve yet (but soon will be!) in CSS. However, SOME for-loop-based artwork can be done in 100% CSS now.
--dd-loop(--dd-x-start, --dd-comparitor, --dd-x-end, --dd-calc-partial-iter, --dd-use-loop[, --dd-joiner])
Basic for loops in 100% CSS. The maximum iteration count is 1024.
Arguments
--dd-x-start a <number> the intial value of the loop controller, typically 0 or 1.
--dd-comparitor an identifier, one of: lt|gt|lte|gte|eq|neq.
--dd-x-end a <number> the value to compare the current x against to determine if the loop continues each iteration.
--dd-calc-partial-iter A calc partial in the shape of x = x (partial here), typically set to + 1.
--dd-use-loop any one of the 64 available loop identifiers from --dd-loop-id-0 to --dd-loop-id-63.
--dd-joiner Anything. Optional output between iterations. Keyword `none` to skip/ignore the parameter and not use a joiner, keyword `comma` to join iterations with a comma.
--dd-arg1 through --dd-arg16 anything, optional, contextual parameters to pass into your loop body.
Returns
The final result of running the identified loop.
Example
Optionally alias your loops:
:root {
--my-first-css-loop: --dd-loop-id-0;
--my-other-loop-alias: --dd-loop-id-1;
--propjockey-ftw: --dd-loop-id-2;
--give-jane-ori-abundance: --dd-loop-id-3;
}
Override any of the built in loop-id functions (don't alias here):
@function --dd-loop-id-0() {
result: "--dd-i: " --dd-number-to-string(var(--dd-i))
"\A --dd-x: " --dd-number-to-string(var(--dd-x), 2)
"\A --dd-x-start: " --dd-number-to-string(var(--dd-x-start), 2)
"\A --dd-x-end: " --dd-number-to-string(var(--dd-x-end), 2)
"\A --dd-arg1: " --dd-to-string(var(--dd-arg1))
"\A --dd-arg2: " --dd-to-string(var(--dd-arg2))
"\A --dd-arg3: " --dd-to-string(var(--dd-arg3))
"\A --dd-arg4: " --dd-to-string(var(--dd-arg4))
"\A\A"
;
}
@function --dd-loop-id-3() {
result: calc(var(--dd-i) + var(--dd-x)) calc(-1 * var(--dd-i) - var(--dd-x));
}
Your loop function body has access to the variables shown in the examples:
--dd-i is the current integer iteration index, starting from 0. The maximum value is 1023 (1024 iterations)
--dd-x-start is the initial loop controller value, typically set to 0 or 1.
--dd-x is the current iteration's cumulative loop controller value.
(if you did `x = x + 2` in a for loop starting from 0, it would be i:x 0:0, 1:2, 2:4, 3:6...)
--dd-x-end is the ending sentinel value for your loop controller that a condition is checked against, typically the condition is "lt" meaning "continue if --dd-x is less than this end value."
--dd-arg1 (through --dd-arg16) the contextual arguments optionally passed into --dd-loop().
Executing your loop
To run your loop in various contexts, call `--dd-loop()` in a property value.
The loop is short-circuited and does not compute anything beyond where it ends.
@import url("@URL@/functions/repeat/loop.css");
body::after {
white-space: pre;
content: --dd-loop(0, lt, 10, + 1, var(--my-first-css-loop));
/* the same as this if you don't want to use a var() alias */
content: --dd-loop(0, lt, 10, + 1, --dd-loop-id-0);
}
You would read these as: loop while `0` is less than `10` and add one each time after executing the loop function body aliased by var(--my-first-css-loop).
Similar to the for (let x = 0; x < 10, x = x + 1) {...} loop in js.
CodePen ↗
And another example, Ana Tudor's artwork, forked and converted to 100% CSS:
CodePen ↗
--dd-repeat(--dd-count [, --dd-joiner], --dd-any)
Basic repetition of a value in 100% CSS. The maximum iteration count is 255. Great for *-shadow properties, parallel array properties like background and animation long hands, etc.
Arguments
--dd-count a <integer> the number of times to repeat the value.
--dd-joiner Anything. Optional output between iterations. Keyword `none` to skip manually (or the entire parameter can be omitted to skip automatically), use keyword `comma` to join iterations with a comma.
--dd-any anything, the value to repeat.
Returns
The `any` value repeated `count` times, optionally joined between iterations with `joiner`.
Example
@import url("@URL@/functions/repeat/repeat.css");
body::before {
--star-family: --dd-repeat(3, "👽");
content: var(--star-family);
}
body::after {
--star-family: --dd-repeat(3, " ", "👽");
content: var(--star-family);
text-shadow: --dd-repeat(4, comma, 0px 0px 2px black);
}