mirror of
https://github.com/haml/haml.git
synced 2022-11-09 12:33:31 -05:00
[Sass] Convert the beginning of the REFERENCE to refer to SCSS as the primary syntax.
This commit is contained in:
parent
0821bce474
commit
d326f12a1d
1 changed files with 48 additions and 12 deletions
|
@ -3,20 +3,56 @@
|
|||
* Table of contents
|
||||
{:toc}
|
||||
|
||||
Sass is a meta-language on top of CSS
|
||||
that's used to describe the style of a document
|
||||
cleanly and structurally,
|
||||
with more power than flat CSS allows.
|
||||
Sass both provides a simpler, more elegant syntax for CSS
|
||||
and implements various features that are useful
|
||||
for creating manageable stylesheets.
|
||||
Sass is an extension of CSS
|
||||
that adds power and elegance to the basic language.
|
||||
It allows you to use [variables](#variables_), [nested rules](#nested_rules),
|
||||
[mixins](#mixins), [inline imports](#import), and more,
|
||||
all with a fully CSS-compatible syntax.
|
||||
Sass helps keep large stylesheets well-organized,
|
||||
and get small stylesheets up and running quickly,
|
||||
particularly with the help of
|
||||
[the Compass style library](http://compass-style.org).
|
||||
|
||||
## Features
|
||||
|
||||
* Whitespace active
|
||||
* Well-formatted output
|
||||
* Elegant input
|
||||
* Feature-rich
|
||||
* Fully CSS3-compatible
|
||||
* Language extensions such as variables, nesting, and mixins
|
||||
* Many {Sass::Script::Functions useful functions} for manipulating colors and other values
|
||||
* Advanced features like [control directives](#control_directives) for libraries
|
||||
* Well-formatted, customizable output
|
||||
* [Firebug integration](https://addons.mozilla.org/en-US/firefox/addon/103988)
|
||||
|
||||
## Syntax
|
||||
|
||||
There are two syntaxes available for Sass.
|
||||
The first, known as SCSS (Sassy CSS) and used throughout this reference,
|
||||
is an extension of the syntax of CSS3.
|
||||
This means that every valid CSS3 stylesheet
|
||||
is a valid SCSS file with the same meaning.
|
||||
In addition, SCSS understands most CSS hacks
|
||||
and vendor-specific syntax, such as [IE's old `filter` syntax](http://msdn.microsoft.com/en-us/library/ms533754%28VS.85%29.aspx).
|
||||
This syntax is enhanced with the Sass features described below.
|
||||
Files using this syntax have the `.scss` extension.
|
||||
|
||||
The second and older syntax, known as the indented syntax (or sometimes just "Sass"),
|
||||
provides a more concise way of writing CSS.
|
||||
It uses indentation rather than brackets to indicate nesting of selectors,
|
||||
and newlines rather than semicolons to separate properties.
|
||||
Some people find this to be easier to read and quicker to write than SCSS.
|
||||
The indented syntax has all the same features,
|
||||
although some of them have slightly different syntax;
|
||||
this is described in {file:INDENTED_SYNTAX.md the indented syntax reference}.
|
||||
Files using this syntax have the `.sass` extension.
|
||||
|
||||
Either syntax can [import](#import) files written in the other.
|
||||
Files can be automatically converted from one syntax to the other
|
||||
using the `sass-convert` command line tool:
|
||||
|
||||
# Convert Sass to SCSS
|
||||
$ sass-convert style.sass style.scss
|
||||
|
||||
# Convert SCSS to Sass
|
||||
$ sass-convert style.scss style.sass
|
||||
|
||||
## Using Sass
|
||||
|
||||
|
@ -561,7 +597,7 @@ and the result printed out for you:
|
|||
>> #777 + #888
|
||||
white
|
||||
|
||||
### Variables: `$`
|
||||
### Variables: `$` {#variables_}
|
||||
|
||||
The most straightforward way to use SassScript
|
||||
is to use variables.
|
||||
|
|
Loading…
Add table
Reference in a new issue