Sass学习笔记之CSS与Sass的异同

SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。另外，SCSS 还能识别大部分 CSS hacks（一些 CSS 小技巧）和特定于浏览器的语法，例如：古老的 IEfilter语法。

由于 SCSS 是 CSS 的扩展，因此，所有在 CSS 中正常工作的代码也能在 SCSS 中正常工作。也就是说，对于一个 Sass 用户，只需要理解 Sass 扩展部分如何工作的，就能完全理解 SCSS。大部分扩展，例如变量、parent references 和 指令都是一致的；唯一不同的是，SCSS 需要使用分号和花括号而不是换行和缩进。 例如，以下这段简单的 Sass 代码：

#sidebar
  width: 30%
  background-color: #faa

只需添加花括号和分号就能转换为 SCSS 语法：

#sidebar {
  width: 30%;
  background-color: #faa;
}

另外，SCSS 对空白符号不敏感。上面的代码也可以书写成下面的样子：

#sidebar {width: 30%; background-color: #faa}

还有一些不同是比较复杂的。这些将在下面进行详细讲解。建议先看看Sass 3 语法差异。在继续学习 SCSS 之前请务必理解下面这些内容。

Nested Selectors

To nest selectors, simply define a new ruleset inside an existing ruleset:

#sidebar {
  a { text-decoration: none; }
}

Of course, white space is insignificant and the last trailing semicolon is optional so you can also do it like this:

#sidebar { a { text-decoration: none } }

Nested Properties

To nest properties, simply create a new property set after an existing property's colon:

#footer {
  border: {
    width: 1px;
    color: #ccc;
    style: solid;
  }
}

This compiles to:

#footer {
  border-width: 1px;
  border-color: #cccccc;
  border-style: solid; }

Mixins

A mixin is declared with the@mixindirective:

@mixin rounded($amount) {
  -moz-border-radius: $amount;
  -webkit-border-radius: $amount;
  border-radius: $amount;
}

A mixin is used with the@includedirective:

.box {
  border: 3px solid #777;
  @include rounded(0.5em);
}

This syntax is also available in the indented syntax, although the old=and+syntax still works.

This is rather verbose compared to the=and+characters used in Sass syntax. This is because the SCSS format is designed for CSS compatibility rather than conciseness, and creating new syntax when the CSS directive syntax already exists adds new syntax needlessly and could create incompatibilities with future versions of CSS.

Comments

Like Sass, SCSS supports both comments that are preserved in the CSS output and comments that aren't. However, SCSS's comments are significantly more flexible. It supports standard multiline CSS comments with/* */, which are preserved where possible in the output. These comments can have whatever formatting you like; Sass will do its best to format them nicely.

SCSS also uses//for comments that are thrown away, like Sass. Unlike Sass, though,//comments in SCSS may appear anywhere and last only until the end of the line.

For example:

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }

is compiled to:

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body {
  color: black; }

a {
  color: green; }

@import

The@importdirective in SCSS functions just like that in Sass, except that it takes a quoted string to import. For example, this Sass:

@import themes/dark
@import font.sass

would be this SCSS:

@import "themes/dark";
@import "font.sass";