Skip to content

Commit

Permalink
[Sass] Convert the beginning of the REFERENCE to refer to SCSS as the…
Browse files Browse the repository at this point in the history
… primary syntax.
  • Loading branch information
nex3 committed Mar 30, 2010
1 parent 0821bce commit d326f12
Showing 1 changed file with 48 additions and 12 deletions.
60 changes: 48 additions & 12 deletions doc-src/SASS_REFERENCE.md
Expand Up @@ -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

Expand Down Expand Up @@ -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.
Expand Down

0 comments on commit d326f12

Please sign in to comment.