SCSS

浏览数：44 / 时间：2015年06月09日

Sass is a CSS pre-processor with syntax advancements.Style sheets in the advanced syntax are processed by the program, and turned into regular CSS style sheets. However, they do not extend the CSS standard itself.

Sass是CSS的预处理器，对CSS有语法增强。这些增强语法的样式表被命令行工具或者网页插件工具预处理，变成标准的CSS样式表。Sass并没有拓展CSS标准。

常用的CSS预处理器还有：Less.js, Stylus, CSS-Crush, Myth, Rework等。

Sass has two syntaxes. The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.

Sass有两套语法，新的最主要的语法就是SCSS(Sassy CSS/Sass 3), 是CSS3的语法超集。意味着所有有效的CSS3样式表也是SCSS，SCSS文件的拓展名是.scss

The second, older syntax is known as the indented syntax (or just “Sass”). Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Although no longer the primary syntax, the indented syntax will continue to be supported. Files in the indented syntax use the extension .sass.

第二套旧语法也叫缩进语法（或者Sass）,是为了那些比起和CSS类似更喜欢简洁的人设计的，它没有用括号和分号，而是用行缩进来区分块。虽然不是主要语法，缩进语法依然被支持。缩进语法的用.sass拓展名。

区别

Sass:

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

Scss:

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

特性（以Scss为例）

Variables 变量

变量用来存储那些样式表中需要重用的信息，比如颜色，字体。Sass用$来表示变量

$font-stack:    Helvetica, sans-serif; 
$primary-color: #333;

 body {   font: 100% $font-stack;   color: $primary-color; }

当Sass处理时，把这些变量替换为css，这对处理一些品牌颜色，让他们在站内保持一致很有用。

Nesting 嵌套

HTML是有清晰的层叠网状结构和层次结构，但是CSS没有。

Sass 能够让我们把CSS选择器组织像HTML的层次结构。注意过度的嵌套规则会导致过度复杂的CSS，使得CSS难以维护。

举例：

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

编译得到的CSS:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

可以避免父选择器的重复，使得代码更简洁：

#main {   
　　width: 97%;  
　　
   p, div {
     font-size: 2em;
     a { font-weight: bold; }   
　　}   
   pre { font-size: 3em; } 
}

编译得到：

#main { 
   width: 97%; 
}   
#main p, #main div {
     font-size: 2em;
 }
#main p a, #main div a {
       font-weight: bold;
 }
 #main pre
 {
     font-size: 3em; 
}

&符号可以显式指明父选择器应该插入的地方，比如：

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

编译得到：

a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; 
}

&会被父选择器替代。

这样即使希望把父选择器插入更深入的网状结构也可以实现：

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

编译得到：

#main {
  color: black; }
  #main a {
    font-weight: bold; }
    #main a:hover {
      color: red;
 }

&必须在复合选择器的开头，但是可以在这个父选择器（&）后面加后缀。如果这个父选择器不能应用后缀，Sass会报错。

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

编译得到：

#main {
  color: black; }
  #main-sidebar {
    border: 1px solid; }

CSS有一些属性在命名空间（namespace）中，比如, font-family, font-size, and font-weight 都在font命名空间中 中，Sass提供对于命名空间的简写：

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

编译得到：

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }

Partials

可以创造部分的Sass，包含小片段的CSS，然后在其他的Sass文件中include. 这样能够使得CSS模块化，更好维护。partial是以下划线开头的Sass片段。比如编译得到_partial.scss.下划线让Sass知道这个文件只是一个partial文件，不用生成CSS文件，Sass partials通过@import引用

Import

CSS有import命令，能够使得CSS分为更小更容易维护的部分。但是他唯一的缺点是每次在CSS中使用@import，它会创建另一个HTTP请求。Sass在现在CSS的基础上，不发出HTTP请求，而是将Import的文件和被import的文件和在一起，提交一个单个CSS文件给浏览器。

import的时候不需要加.scss后缀

Mixins

CSS，特别是CSS3有很多特定的前缀，maxin能够组合一组CSS声明用来复用，还可以通过传值使得maxin更灵活.

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

 .box { @include border-radius(10px); }

编译得到：

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Extend/Inheritance

这是Sass最有用的特性之一。使用@extend可以在选择之间共享CSS属性。

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

例子中能够使得.message的特性应用到.success, . error, .warning

结果：

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

Operators

Sass能够使用+, -, *, /, and % 操作符

.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}

例子简单地建立了一个基于960px流式网格,Sass操作符能够将pixal值方便地转化为百分比。

编译得到：

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}