vendor/docs/operators.md in stylus-source-0.22.6 vs vendor/docs/operators.md in stylus-source-0.23.0

- old
+ new

@@ -54,23 +54,23 @@ !a and !b // => false // pased as: (!a) and (!b) -with: +With: not a or b // => false // parsed as: not (a or b) ## Binary Operators ### Subscript [] - The subscript operator allows us to grab a value in an expression via index. Parenthesized expressions may act as tuples, so for example `(15px 5px)`, `(1 2 3)`. + The subscript operator allows us to grab a value inside an expression via index. Parenthesized expressions may act as tuples (e.g. `(15px 5px)`, `(1 2 3)`). - Below is an example where we utilize tuples for error handling, showing the versatility of such a construct. As + Below is an example that uses tuples for error handling (and showcasing the versatility of this construct): add(a, b) if a is a 'unit' and b is a 'unit' a + b else @@ -87,11 +87,11 @@ // => padding: true; padding add(1,'5')[1] // => padding: "a and b must be units"; - A more complex example, invoking the `error()` built-in function with the error message returned, when the ident (the first value) equals `error`. + Here's a more complex example. Now we're invoking the built-in `error()` function with the return error message, whenever the ident (the first value) equals `error`. if (val = add(1,'5'))[0] == error error(val[1]) @@ -105,11 +105,11 @@ 1...5 // => 1 2 3 4 ### Additive: + - -multiplicative and additive binary operators work as expected, and type conversion is applied within unit type classes, or default to the literal value. For example if we perform `5s - 2px` we will get `3s`. +Multiplicative and additive binary operators work as expected. Type conversion is applied within unit type classes, or default to the literal value. For example `5s - 2px` results in `3s`. 15px - 5px // => 10px 5 - 2 @@ -139,30 +139,30 @@ // => 2.5s 4 % 2 // => 0 -When using `/` within a property value you must wrap with parens. The following for example is taken literally, to support css line-height: +When using `/` within a property value, you **must** wrap with parens. Otherwise the `/` is taken literally (to support CSS `line-height`): font: 14px/1.5; -whereas the following is evaluated, dividing `14px` by `1.5`: +But the following is evaluated as `14px` ÷ `1.5`: font: (14px/1.5); -this exception is _only_ required for the `/` operator. +This is _only_ required for the `/` operator. ### Exponent: ** The Exponent operator: 2 ** 8 // => 256 ### Equality & Relational: == != >= <= > < -Equality operators can be used to equate units, colors, strings, and even identifiers. This is a powerful concept, as even arbitrary identifiers such as as `wahoo` can be utilized as atoms, a function could return `yes` or `no` instead of `true` or `false` (although not advised). +Equality operators can be used to equate units, colors, strings, and even identifiers. This is a powerful concept, as even arbitrary identifiers (such as as `wahoo`) can be utilized as atoms. A function could return `yes` or `no` instead of `true` or `false` (although not advised). 5 == 5 // => true 10 > 5 @@ -199,21 +199,25 @@ // => true (1 2 3) == (1 1 3) // => false -Only exact values match, for example `0 == false`, and `null == false` are both `false`. +Only exact values match. For example, `0 == false` and `null == false` are both `false`. Aliases: == is != is not != isnt ## Truthfulness - Nearly everything within Stylus resolves to `true`, including units with a suffix, for example even `0%`, `0px`, etc will resolve to `true`, since commonly in Stylus a mixin or function may accept such units as valid, however `0` itself is `false` in terms of arithmetic. Expressions or "lists" with a length greater than 1 are considered truthy. + Nearly everything within Stylus resolves to `true`, including units with a suffix. Even `0%`, `0px`, etc. will resolve to `true` (because it's common in Stylus for mixins or functions to accept units as valid). + + However, `0` itself is `false` in terms of arithmetic. + + Expressions (or "lists") with a length greater than 1 are considered truthy. `true` examples: 0% 0px @@ -300,11 +304,11 @@ pad(margin) body pad(padding margin, 10px) -yielding: +Yielding: body { padding: 5px; } body { @@ -315,25 +319,27 @@ margin: 10px; } ### Conditional Assignment: ?= := -The conditional assignment operator `?=` (aliased as `:=`) lets us define variables without clobbering old values (when present). This operator expands to an `is defined` binary operation within a ternary, for example the following are equivalent: +The conditional assignment operator `?=` (aliased as `:=`) lets us define variables without clobbering old values (if present). This operator expands to an `is defined` binary operation within a ternary. +For example, the following are equivalent: + color := white color ?= white color = color is defined ? color : white -For example when using `=` we simply re-assign: +When using plain `=`, we simply reassign: color = white color = black color // => black -However when using `?=` our second attempt fails since the variable is already defined: +But when using `?=`, our second attempt fails (since the variable is already defined): color = white color ?= black color @@ -350,16 +356,16 @@ // => true 15 is a 'rgba' // => false -Alternatively we could use the `type()` BIF: +Alternatively, we could use the `type()` BIF: type(#fff) == 'rgba' // => true -'color' is the one special-case, evaluating to true when the +**Note:** `color` is the only special-case, evaluating to `true` when the left-hand operand is an `RGBA` or `HSLA` node. ### Variable Definition: is defined This pseudo binary operator does not accept a right-hand operator, and does _not_ evaluate the left. This allows us to check if a variable has a value assigned to it. @@ -372,11 +378,11 @@ // => true #fff is defined // => 'invalid "is defined" check on non-variable #fff' -Alternatively one can use the `lookup(name)` built-in function to do this, or to perform dynamic lookups: +Alternatively, one can use the `lookup(name)` built-in function to do this—or to perform dynamic lookups: name = 'blue' lookup('light-' + name) // => null @@ -388,25 +394,25 @@ body if ohnoes padding 5px -_will_ yield the following css when undefined: +_Will_ yield the following CSS when undefined: body { padding: 5px; } -however this will be safe: +However this will be safe: body if ohnoes is defined padding 5px ## Ternary -The ternary operator works as we would expect in most languages, being the only operator with three operands, the _condition_ expression, the _truth_ expression and the _false_ expression. +The ternary operator works as we would expect in most languages. It's the only operator with three operands (the _condition_ expression, the _truth_ expression, and the _false_ expression). num = 15 num ? unit(num, 'px') : 20px // => 15px @@ -423,30 +429,30 @@ foo: unit(n + 5, '%') foo: unit(5 + 180 / 2, deg) ## Color Operations - Operations on colors provide a terse, expressive way to alter components. For example we can operate on each RGB: + Operations on colors provide a terse, expressive way to alter components. For example, we can operate on each RGB: #0e0 + #0e0 // => #0f0 - Another example is adjust the lightness value by adding or subtracting a percentage. To lighten a color we add, to darken we subtract. + Another example is adjust the lightness value by adding or subtracting a percentage. To lighten a color, add; to darken, subtract. #888 + 50% // => #c3c3c3 #888 - 50% // => #444 - Adjust the hue is also possible by adding or subtracting with degrees, for example adding `50deg` to this red value, resulting in a yellow: + Adjust the hue is also possible by adding or subtracting with degrees. For example, adding `50deg` to this red value results in a yellow: #f00 + 50deg // => #ffd500 - Values clamp appropriately, for example we can "spin" the hue 180 degrees, and if the current value is `320deg`, it will resolve to `140deg`. + Values clamp appropriately. For example, we can "spin" the hue 180 degrees, and if the current value is `320deg`, it will resolve to `140deg`. - We may also tweak several values at once, including the alpha by using `rgb()`, `rgba()`, `hsl()`, or `hsla()`: + We may also tweak several values at once (including the alpha) by using `rgb()`, `rgba()`, `hsl()`, or `hsla()`: #f00 - rgba(100,0,0,0.5) // => rgba(155,0,0,0.5) ## Sprintf