sass 语法的使用

一、语法格式

Sass 有两种语法格式。首先是 SCSS (Sassy CSS) —— 也是本文示例所使用的格式 —— 这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。此外，SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax)，以及早期的 IE 滤镜写法。这种格式以 .scss 作为拓展名。

另一种也是最早的 Sass 语法格式，被称为缩进格式 (Indented Sass) 通常简称 "Sass"，是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，很多人认为这样做比 SCSS 更容易阅读，书写也更快速。缩进格式也可以使用 Sass 的全部功能，只是与 SCSS 相比个别地方采取了不同的表达方式，具体请查看 http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html。这种格式以 .sass 作为拓展名。其实有另一种预编译语法stylus，也是采用的缩进格式，这种语法“冒号”可以用空格代替，这几介绍只是作为了解知识。

此文即将介绍的是第一种格式，即.scss文件格式的用法

二、css功能拓展

1. 嵌套、选择器
   示例：

   /* Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器
   *  嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理
   *  /
   #main p {
     color: #00ff00;
     width: 97%;
     &:hover { 
      text-decoration: underline; 
     }
     //  有时也需要直接使用嵌套外层的父选择器,可以用 & 代表嵌套规则外层的父选择器
     body.firefox & { 
       font-weight: normal;
     }
     &-sidebar { 
       border: 1px solid; 
     }
     .redbox {
       background-color: #ff0000;
       color: #000000;
       //  有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。
       font: {   //Sass 允许将属性嵌套在命名空间中
          family: fantasy;
          size: 30em;
          weight: bold;
       }
     }
   }

    

三、 注释 /* */ 与 // (Comments: /* */ and //)

       Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会 被完整输出到编译后的 CSS 文件中，而后者则不会，例如：

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

// 插值语句 (interpolation) 也可写进多行注释中输出变量值
/* This CSS is generated by My Snazzy Framework version #{$version}. */

// 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; }

编译为：

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */

/* This CSS is generated by My Snazzy Framework version 1.2.3. */

body {
  color: black; }

a {
  color: green; }

   将 ! 作为多行注释的第一个字符表示在压缩输出模式下保留这条注释并输出到 CSS 文件中，通常用于添加版权信息。

四、 SassScript

       在 CSS 属性的基础上 Sass 提供了一些名为 SassScript 的新功能。 SassScript 可作用于任何属性，允许属性使用变量、算数运算等额外功能。

4.1 变量 $ (Variables:) $

     SassScript 最普遍的用法就是变量，变量以美元符号开头，赋值方法与 CSS 属性的写法一样：

• 变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global声明
• 可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。
• 变量是 null 空值时将视为未被 !default 赋值。

// 一般设置全局变量方式

$height: 40px; 
$content: "First content";
// $content: null;   
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  $width: 5em !global;
  width: $width;
  height: $height;  
  content: $content;
  new-content: $new_content;
}

#sidebar {
  width: $width;
}

编译为：

#main {
  width: 5em;
  height: 40px;
  content: "First content";
  // content: "Second content?";
  new-content: "First time reference"; 
}

#sidebar {
  width: 5em;
}

 

  4.2  数据类型（Data Types） 

• 数字，1, 2, 13, 10px
• 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
• 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
• 布尔型，true, false
• 空值，null
• 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
• maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

   SassScript 也支持其他 CSS 属性值，比如 Unicode 字符集，或 !important 声明。然而Sass 不会特殊对待这些属性值，一律视为无引号字符串。

   4.2.1 字符串（String）  

SassScript 支持 CSS 的两种字符串类型：有引号字符串 (quoted strings)，如 "Lucida Grande" 'http://sass-lang.com'；与无引号字符串 (unquoted strings)，如 sans-serif bold，在编译 CSS 文件时不会改变其类型。只有一种情况例外，使用 #{} (interpolation) 时，有引号字符串将被编译为无引号字符串，这样便于在 mixin 中引用选择器名：

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}
// .header 作为一个字符串参数传入
@include firefox-message(".header");

编译为

body.firefox .header:before {
  content: "Hi, Firefox users!"; }

4.3 运算 (Operations)

   4.3.1. 数字运算 (Number Operations)

   SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值；()可以改变运算次序，与四则运算法则基本相同；关系运算 <, >, <=, >= 也可用于数字运算，相等运算 ==, != 可用于所有数据类型。

以下三种情况 / 将被视为除法运算符号：

• 如果值，或值的一部分，是变量或者函数的返回值
• 如果值被圆括号包裹
• 如果值是算数表达式的一部分

p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
}

 编译为

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; }

     ps:如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。

4.3.2 字符串运算

   + 作为连接符  运算结果顺从 +号 左侧的类型，即左侧为包含引号的字符串则返回带引号的串，不包含即返回不带引号的串 注意：运算表达式与其他值连用时，用空格做连接符：

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
  margin: 3px + 4px auto;
}

编译为

p:before {
  content: "Foo Bar";
  font-family: sans-serif; 
  margin: 7px auto;
}

五、 @-Rules 与指令

   5.1 @import

       Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

      Sass 在当前地址，或 Rack, Rails, Merb 的 Sass 文件地址寻找 Sass 文件，如果需要设定其他地址，可以用 :load_paths 选项，或者在命令行中输入 --load-path 命令。

     通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。

• 文件拓展名是 .css；
• 文件名以 http:// 开头；
• 文件名是 url()；
• @import 包含 media queries。

    如果不在上述情况内，文件的拓展名是 .scss 或 .sass，则导入成功。没有指定拓展名，Sass 将会试着寻找文件名相同，拓展名为 .scss 或 .sass 的文件并将其导入。

// Sass 允许同时导入多个文件，例如同时导入 rounded-corners 与 text-shadow 两个文件

@import "rounded-corners", "text-shadow"

// 导入文件也可以使用 #{ } 插值语句，但不是通过变量动态导入 Sass 文件，只能作用于 CSS 的 url() 导入方式

$family: "Droid+Sans";

@import url("http://fonts.googleapis.com/css?family=\#{$family}");

编译为

@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

 5.1.1 分音（Partials）

       如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线。

      例如，将文件命名为 _colors.scss，便不会编译 _colors.css 文件。（导入方式不改变，只是修改文件命名方式）

 5.1.2 嵌套

     大多数情况下，一般在文件的最外层（不在嵌套规则内）使用 @import，其实，也可以将 @import 嵌套进 CSS 样式或者 @media 中，与平时的用法效果相同，只是这样导入的样式只能出现在嵌套的层中。

假设 example.scss 文件包含以下样式：

.example {
  color: red;
}

然后导入到 #main 样式内

#main {
  @import "example";
}

编译为

#main .example {
  color: red;
}

   ps: 不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import。