mirror of
https://github.com/haml/haml.git
synced 2022-11-09 12:33:31 -05:00
[Sass] More docs, including a changelog entry.
This commit is contained in:
parent
53ae5b50ce
commit
f44961c73b
2 changed files with 111 additions and 7 deletions
|
@ -8,6 +8,18 @@
|
||||||
### Deprecations -- Must Read!
|
### Deprecations -- Must Read!
|
||||||
{#3-0-0-deprecations}
|
{#3-0-0-deprecations}
|
||||||
|
|
||||||
|
* Using `=` for SassScript properties and variables is deprecated,
|
||||||
|
and will be removed in Sass 3.2.
|
||||||
|
Use `:` instead.
|
||||||
|
See also [this changelog entry](#3-0-0-sass-script-context)
|
||||||
|
|
||||||
|
* Because of the above, property values using `:`
|
||||||
|
will be parsed more thoroughly than they were before.
|
||||||
|
Although all valid CSS3 properties
|
||||||
|
as well as most hacks and proprietary syntax should be supported,
|
||||||
|
it's possible that some properties will break.
|
||||||
|
If this happens, please report it to [the Sass mailing list](http://groups.google.com/group/haml).
|
||||||
|
|
||||||
* The `!` prefix for variables is deprecated,
|
* The `!` prefix for variables is deprecated,
|
||||||
and will be removed in Sass 3.2.
|
and will be removed in Sass 3.2.
|
||||||
Use `$` as a prefix instead.
|
Use `$` as a prefix instead.
|
||||||
|
@ -15,6 +27,90 @@
|
||||||
|
|
||||||
### Syntax Changes
|
### Syntax Changes
|
||||||
|
|
||||||
|
#### SassScript Context
|
||||||
|
{#3-0-0-sass-script-context}
|
||||||
|
|
||||||
|
The `=` character is no longer required for properties that use SassScript
|
||||||
|
(that is, variables and operations).
|
||||||
|
All properties now use SassScript automatically;
|
||||||
|
this means that `:` should be used instead.
|
||||||
|
Variables should also be set with `:`.
|
||||||
|
For example, what used to be
|
||||||
|
|
||||||
|
.page
|
||||||
|
color = 5px + 9px
|
||||||
|
|
||||||
|
should now be
|
||||||
|
|
||||||
|
.page
|
||||||
|
color: 5px + 9px
|
||||||
|
|
||||||
|
This means that SassScript is now an extension of the CSS3 property syntax.
|
||||||
|
All valid CSS3 properties are valid SassScript,
|
||||||
|
and will compile without modification
|
||||||
|
(some invalid properties work as well, such as Microsoft's proprietary `filter` syntax).
|
||||||
|
This entails a few changes to SassScript to make it fully CSS3-compatible,
|
||||||
|
which are detailed below.
|
||||||
|
|
||||||
|
This also means that Sass will now be fully parsing all property values,
|
||||||
|
rather than passing them through unchanged to the CSS.
|
||||||
|
Although care has been taken to support all valid CSS3,
|
||||||
|
as well as hacks and proprietary syntax,
|
||||||
|
it's possible that a property that worked in Sass 2 won't work in Sass 3.
|
||||||
|
If this happens, please report it to [the Sass mailing list](http://groups.google.com/group/haml).
|
||||||
|
|
||||||
|
Note that if `=` is used,
|
||||||
|
SassScript will be interpreted as backwards-compatibly as posssible.
|
||||||
|
In particular, the changes listed below don't apply in an `=` context.
|
||||||
|
|
||||||
|
##### Quoted Strings
|
||||||
|
|
||||||
|
Quoted strings (e.g. `"foo"`) in SassScript now render with quotes.
|
||||||
|
In addition, unquoted strings are no longer deprecated,
|
||||||
|
and render without quotes.
|
||||||
|
This means that almost all strings that had quotes in Sass 2
|
||||||
|
should not have quotes in Sass 3.
|
||||||
|
|
||||||
|
Although quoted strings render with quotes when used with `:`,
|
||||||
|
they do not render with quotes when used with `#{}`.
|
||||||
|
This allows quoted strings to be used for e.g. selectors
|
||||||
|
that are passed to mixins.
|
||||||
|
|
||||||
|
##### Division and `/`
|
||||||
|
|
||||||
|
Two numbers separated by a `/` character
|
||||||
|
are allowed as property syntax in CSS,
|
||||||
|
e.g. for the `font` property.
|
||||||
|
SassScript also uses `/` for division, however,
|
||||||
|
which means it must decide what to do
|
||||||
|
when it encounters numbers separated by `/`.
|
||||||
|
|
||||||
|
For CSS compatibility, SassScript does not perform division by default.
|
||||||
|
However, division will be done in almost all cases where division is intended.
|
||||||
|
In particular, SassScript will perform division
|
||||||
|
in the following three situations:
|
||||||
|
|
||||||
|
1. If the value, or any part of it, is stored in a variable.
|
||||||
|
2. If the value is surrounded by parentheses.
|
||||||
|
3. If the value is used as part of another arithmetic expression.
|
||||||
|
|
||||||
|
For example:
|
||||||
|
|
||||||
|
p
|
||||||
|
font: 10px/8px
|
||||||
|
$width: 1000px
|
||||||
|
width: $width/2
|
||||||
|
height: (500px/2)
|
||||||
|
margin-left: 5px + 8px/2px
|
||||||
|
|
||||||
|
is compiled to:
|
||||||
|
|
||||||
|
p {
|
||||||
|
font: 10px/8px;
|
||||||
|
width: 500px;
|
||||||
|
height: 250px;
|
||||||
|
margin-left: 9px; }
|
||||||
|
|
||||||
#### Variable Prefix Character
|
#### Variable Prefix Character
|
||||||
{#3-0-0-dollar-prefix}
|
{#3-0-0-dollar-prefix}
|
||||||
|
|
||||||
|
@ -28,9 +124,9 @@ For example, what used to be
|
||||||
|
|
||||||
should now be
|
should now be
|
||||||
|
|
||||||
$width = 13px
|
$width: 13px
|
||||||
.icon
|
.icon
|
||||||
width = $width
|
width: $width
|
||||||
|
|
||||||
The `sass-convert` command-line tool can be used
|
The `sass-convert` command-line tool can be used
|
||||||
to upgrade Sass files to the new syntax using the `--in-place` flag.
|
to upgrade Sass files to the new syntax using the `--in-place` flag.
|
||||||
|
@ -51,9 +147,9 @@ SassScript variable and mixin names may now contain hyphens.
|
||||||
In fact, they may be any valid CSS3 identifier.
|
In fact, they may be any valid CSS3 identifier.
|
||||||
For example:
|
For example:
|
||||||
|
|
||||||
$prettiest-color = #542FA9
|
$prettiest-color: #542FA9
|
||||||
=pretty-text
|
=pretty-text
|
||||||
color = $prettiest-color
|
color: $prettiest-color
|
||||||
|
|
||||||
In order to allow frameworks like [Compass](http://compass-style.org)
|
In order to allow frameworks like [Compass](http://compass-style.org)
|
||||||
to use hyphens in variable names
|
to use hyphens in variable names
|
||||||
|
@ -62,10 +158,10 @@ variables and mixins using hyphens may be referred to
|
||||||
with underscores, and vice versa.
|
with underscores, and vice versa.
|
||||||
For example:
|
For example:
|
||||||
|
|
||||||
$prettiest-color = #542FA9
|
$prettiest-color: #542FA9
|
||||||
.pretty
|
.pretty
|
||||||
// Using an underscore instead of a hyphen works
|
// Using an underscore instead of a hyphen works
|
||||||
color = $prettiest_color
|
color: $prettiest_color
|
||||||
|
|
||||||
#### Single-Quoted Strings
|
#### Single-Quoted Strings
|
||||||
|
|
||||||
|
|
|
@ -811,7 +811,7 @@ is compiled to:
|
||||||
.item-2 {
|
.item-2 {
|
||||||
width: 4em; }
|
width: 4em; }
|
||||||
|
|
||||||
## SassScript
|
## SassScript {#sassscript}
|
||||||
|
|
||||||
In addition to the plain CSS property syntax,
|
In addition to the plain CSS property syntax,
|
||||||
Sass supports a small set of extensions called SassScript.
|
Sass supports a small set of extensions called SassScript.
|
||||||
|
@ -875,6 +875,10 @@ Variables used to use the prefix character `!`;
|
||||||
this still works, but it's deprecated and prints a warning.
|
this still works, but it's deprecated and prints a warning.
|
||||||
`$` is the recommended syntax.
|
`$` is the recommended syntax.
|
||||||
|
|
||||||
|
Variables also used to be defined with `=` rather than `:`;
|
||||||
|
this still works, but it's deprecated and prints a warning.
|
||||||
|
`:` is the recommended syntax.
|
||||||
|
|
||||||
### Data Types
|
### Data Types
|
||||||
|
|
||||||
SassScript supports four main data types:
|
SassScript supports four main data types:
|
||||||
|
@ -922,6 +926,10 @@ is compiled to:
|
||||||
body.firefox .header:before {
|
body.firefox .header:before {
|
||||||
content: "Hi, Firefox users!"; }
|
content: "Hi, Firefox users!"; }
|
||||||
|
|
||||||
|
It's also worth noting that when using the [deprecated `=` property syntax](#sassscript),
|
||||||
|
all strings are interpreted as unquoted,
|
||||||
|
regardless of whether or not they're written with quotes.
|
||||||
|
|
||||||
### Operations
|
### Operations
|
||||||
|
|
||||||
All types support equality operations (`==` and `!=`).
|
All types support equality operations (`==` and `!=`).
|
||||||
|
|
Loading…
Add table
Reference in a new issue