mirror of
https://github.com/haml/haml.git
synced 2022-11-09 12:33:31 -05:00
[Sass] Mention rgba/hsla stuff in the reference.
This commit is contained in:
parent
320df7b33b
commit
94c6690eb8
1 changed files with 39 additions and 1 deletions
|
@ -692,7 +692,7 @@ available in that context.
|
|||
SassScript supports four data types:
|
||||
* numbers (e.g. `1.2`, `13`, `10px`)
|
||||
* strings of text (e.g. `"foo"`, `"bar"`)
|
||||
* colors (e.g. `blue`, `#04a3f9`)
|
||||
* colors (e.g. `blue`, `#04a3f9`, `rgba(255, 0, 0, 0.5)`)
|
||||
* booleans (e.g. `true`, `false`)
|
||||
|
||||
Any text that doesn't fit into one of those types
|
||||
|
@ -715,6 +715,8 @@ is compiled to:
|
|||
|
||||
### Operations
|
||||
|
||||
#### Number Operations
|
||||
|
||||
SassScript supports the standard arithmetic operations on numbers
|
||||
(`+`, `-`, `*`, `/`, `%`),
|
||||
and will automatically convert between units if it can:
|
||||
|
@ -734,6 +736,8 @@ and equality operators
|
|||
(`==`, `!=`)
|
||||
are supported for all types.
|
||||
|
||||
#### Color Operations
|
||||
|
||||
All arithmetic operations are supported for color values,
|
||||
where they work piecewise.
|
||||
This means that the operation is performed
|
||||
|
@ -762,6 +766,40 @@ and is compiled to:
|
|||
p {
|
||||
color: #020406; }
|
||||
|
||||
Note that colors with an alpha channel
|
||||
(those created with the {Sass::Script::Functions#rgba rgba}
|
||||
or {Sass::Script::Functions#hsla hsla} functions)
|
||||
must have the same alpha value in order for color arithmetic
|
||||
to be done with them.
|
||||
The arithmetic doesn't affect the alpha value.
|
||||
For example:
|
||||
|
||||
p
|
||||
color = rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75)
|
||||
|
||||
is compiled to:
|
||||
|
||||
p {
|
||||
color: rgba(255, 255, 0, 0.75)
|
||||
|
||||
The alpha channel of a color can be adjusted using the
|
||||
{Sass::Script::Functions#opacify opacify} and
|
||||
{Sass::Script::Functions#transparentize transparentize} functions.
|
||||
For example:
|
||||
|
||||
!translucent-red = rgba(255, 0, 0, 0.5)
|
||||
p
|
||||
color = opacify(!translucent-red, 80%)
|
||||
background-color = transparentize(!translucent-red, 50%)
|
||||
|
||||
is compiled to:
|
||||
|
||||
p {
|
||||
color: rgba(255, 0, 0, 0.9)
|
||||
background-color: rgba(255, 0, 0, 0.25) }
|
||||
|
||||
#### String Operations
|
||||
|
||||
The `+` operation can be used to concatenate strings:
|
||||
|
||||
p
|
||||
|
|
Loading…
Add table
Reference in a new issue