SASS基础教程

SASS是最早、最成熟的CSS预处理，它可以通过变量、嵌套、函数、继承等使CSS变得更强大，更优雅，而且完全兼容CSS的语法。SASS可以帮助我们更好地组织大CSS文件，更加便捷地开发和运行CSS文件，在Compass等类库的帮助下，我们将更加如虎添翼。

1.特性

• 完全兼容CSS3
• 诸如变量、嵌套、混合（Mixins）之类的语言扩展
• 操作颜色和其他的巨量实用函数
• 类似控制语句的强大特性
• 可以自定义的、格式良好的输出
• 整合Firebug

2.语法

SASS允许有两种语法，一种叫做SCSS(Sassy CSS),使用.scss作为扩展名，它继承了CSS3的语法，一个验证合格的CSS样式表同样也是一个完全合格的SCSS样式表，同时具备相同的含义，而且SCSS能很好的识别大部分的CSS Hacks、浏览器厂商语法（例如老版本IE的滤镜）。

另一种是比较早的语法，我们叫做缩进语法(使用.SASS作为扩展名，有时叫做SASS)提供了一种简洁书写CSS的语法，使用缩进而不是括号来代表嵌套，使用新行而不是分号分割属性，书写容易、代码简洁是很多人的最爱。

当然说了这么多，到底区别有哪些，我们通过一个简单地例子直观地看一下。

//使用SCSS
$baseFontsize:14px;
$Largefontsize:16px;

body{
	font-size:$baseFontsize;
	p{
		font-size:$Largefontsize;
	}
}

//使用SASS
$baseFontsize: 14px
$Largefontsize: 16px

body
  font-size: $baseFontsize
  p
    font-size: $Largefontsize

两种语法各有所长，也各有所爱。SCSS好在贴近CSS，SASS妙在简洁清爽，大家可以参考下这篇文章《 Sass vs. SCSS: which syntax is better?》，至于你选择那种语法，就全在你了。

SASS提供了两种语法的转换功能，代码貌似下面

# Convert Sass to SCSS
$ sass-convert style.sass style.scss
# Convert SCSS to Sass
$ sass-convert style.scss style.sass

3.使用SASS

SASS基于Ruby来实现，因此你得有Ruby，Mac里面内嵌了Ruby，Windows需要安装，大家可以到 官方下载安装。

通过以下命令安装 Sass Ruby gem： gem install sass。

具体安装过程大家可以参考 W3Cplus上的教程。

比较好的编译工具 compass.app、 Scout、 Codekit、 Koala等。

4.扩展CSS

4.1嵌套

SASS允许使用嵌套来减少父对象的重复，同时提高代码的可读性。

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

上面的这段嵌套的代码编译过之后，将会是这样

#main p {
  color: #00ff00;
  width: 97%; }
  #main p .redbox {
    background-color: #ff0000;
    color: #000000; }

4.2父选择器引用&

在嵌套代码中使用父对象的引用有的时候是非常有用而且必要的，例如，当你给hover状态指定样式，或是给有特定类的body元素指定样式时，使用&引用父对象将会很高效。

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

4.3属性嵌套

CSS里面有一些属性具有命名空间，例如font-family，font-size，font-weight等都在font的命名空间内，在CSS里如果你想声明一大堆这样的相同命名空间的属性，你需要一个个地重复写出来。SASS提供了一个解决方法，你只需要写一遍命名空间，然后将子属性嵌套进去就可以，例如

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

编译出来之后

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

并且，命名空间属性还可以有一个值，像下面的代码一样

.funky {
  font: 2px/3px {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

编译之后

.funky {
  font: 2px/3px;
    font-family: fantasy;
    font-size: 30em;
    font-weight: bold; }

4.4占位符选择器  %foo

SASS提供了一种特殊的选择器，叫做占位符选择器，看起来类似于ID与Class选择器（#id或.class），但是只在继承指令（Extend）里有用，大家可以到下面的Extend部分获得详细信息。

如果你在没有继承的环境中，使用占位符选择器的规则将不会被渲染。

5.注释

SASS支持多行注释/**/和单行注释//两种注释风格，不过在编译成CSS时，多行注释保留，单行注释会被过滤掉。

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

编译之后

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

当注释的第一个字符为！时，注释将会插值的形式编译到css中，甚至在压缩输出时也是如此，这个特性对于在CSS中添加版权信息非常有用。

6.SassScript

对于CSS属性语法来说，SASS提供了一个叫做SASSScript的扩展集，允许在属性中使用变量、运算和函数。

SassScript 同样可以用来生成选择器和属性名称，这个在Minxin中很有用，大家可以在插值部分获取详情。

6.1 交互模式(Interactive Shell)

你可以使用交互模式试验SassScript，启动命令窗口后，使用-i参数运行sass命令可以启动交互模式，然后输入需要试验的SassScript表达式可以得到运算结果.

$ sass -i
>> "Hello, Sassy World!"
"Hello, Sassy World!"
>> 1px + 1px + 1px
3px
>> #777 + #777
#eeeeee
>> #777 + #888
white

6.2 变量$

最直接有效的使用SassScript的方式是使用变量，使用$声明变量，然后可以在CSS属性中使用变量，例如 

//声明变量
$width: 5em;
//使用变量
#main{
      width:$width;
}

在嵌套里声明的变量只在声明它的那个嵌套里可用，在嵌套外边声明的变量到处可用。

使用“！”声明的变量依然有用，但是不赞成使用会发出警告，建议使用$声明变量。以前使用“=”而不是“：”赋值变量的方法依然有效，不过已不建议这样使用并且会发出警告，“：”是现在建议的方式。

6.3数据类型

SassScript中支持6中数据类型

• numbers (e.g. 1.2, 13, 10px)
• strings of text, with and without quotes (e.g. "foo", 'bar', baz)
• colors (e.g. blue, #04a3f9, rgba(255, 0, 0, 0.5))
• booleans (e.g. true, false)
• nulls (e.g. null)
• lists of values, separated by spaces or commas (e.g. 1.5em 1em 0 2em, Helvetica, Arial, sans-serif)

SassScript也支持其他的CSS属性值（例如Unicode ranges and !important declarations），但是对这些值不做任何处理，只是看做没有加引号的字符串处理。

6.3.1 String

CSS指定了两种类型的CSS字符串，带引号的字符串例如"Lucida Grande" 、 'http://sass-lang.com'，不带引号的字符串例如sans-serif、bold。SassScript两种都可以识别，一般来说如果在SASS文档中使用一种类型的字符串，在编译css中也将使用这个类型。

但也有一个例外，当使用#{}插值是，引起来的字符串将去掉引号。如此这般，我们在mixins中使用选择器名将变得简单。例如：

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}

@include firefox-message(".header");

编译之后

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

需要注意的是，当我们使用不推荐的"="语法时，无论书写时有没有引号，所有的字符串都将会认作没有引号。

6.3.2 Lists

在表征类似CSS的"margin: 10px 15px 0 0"、"font-face: Helvetica, Arial, sans-serif"等规则时，Sass使用列表(Lists)数据类型。Lists是一系列用空格或逗号分隔的属性值，实际上单独的属性也可以认为Lists，具有一个元素的Lists。
Sass的列表函数可以极大的丰富列表的功能，nth函数可以获得列表中的元素，join函数可以联接多个列表，append函数可以向列表中添加元素，@each函数可以给列表中的每个元素添加样式。
除了包含简单元素外，列表还可以包含列表，例如， 1px 2px, 5px 6px是一个二维列表，包含列表1px 2px和列表5px 6px。如果内部列表和外部列表具有一样的分隔符，你可以使用括号将内列表括起来，从而清晰呈现。例如(1px 2px) (5px 6px)也是一个列表1px 2px和列表5px 6px组成的二维列表。

当列表编译成css时，Sass不会添加任何括号，因为CSS不会识别它们。这就意味着，(1px 2px) (5px 6px)和1px 2px 5px 6px编译成CSS之后将会看起来一样。但是，他们在Sass里是不一样的，前面的是一个二维列表，后面的是一个包含四个元素的列表。

列表里也可以没有任何值，但是不会直接输出到CSS中。如果你使用了"font-family: ()"，Sass将会报错。如果一个列表包含空列表或者空元素，空的列表和空元素在编译时将会被移除，例如"1px 2px () 3px"、"1px 2px null 3px"。

6.4运算符

所有数据类型支持等号运算符( ==  and  !=)，另外，每个数据类型都有单独支持的运算符。

6.4.1数学运算符

SassScript支持所有的标准运算符，加减乘除模(ddition +, subtraction -, multiplication *, division /, and modulo %)，并且可以在需要的时候进行单位换算，例如

p {
  width: 1in + 8pt;
}

将会被编译成

p {
  width: 1.111in; }

Number类型也支持所有的关系运算符(<, >, <=, >=)。

CSS允许在属性中使用"/"分隔属性，Sass作为css的扩展也必须支持此特性。所以，在SassScript中当两个数字被"/"分隔时，在编译成CSS时也原样呈现。
但是，下面三种场合的"/"将被解析为除，基本覆盖了大部分使用除的场合。
1.属性或属性的一部分存在变量
2.属性被括号括起来
3.属性是另一个数学表达式的一部分。例如

p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, 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; }

如果你想在变量中使用分隔符(而不是除)，可以使用#{}插值，例如

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

编译之后

p {
  font: 12px/30px; }

6.4.2 颜色运算符

颜色属性支持所有的算术运算符，并且是逐段实现，红绿蓝依次运算，例如：

p {
  color: #010203 + #040506;
}

01 + 04 = 05, 02 + 05 = 07, 03 + 06 = 09,因此编译之后

p {
  color: #050709; }

颜色和数字之间也可以运算，如下面的代码。大多数情况下，使用color函数要比color算数运算高效一些。

p {
  color: #010203 * 2;
}
//编译之后
p{
  color:#020406;}
}

注意，具有alpha通道的颜色值要进行运算必须具有一样的alpha值，运算不对alpha值起作用。

p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}
//编译之后
p{
  color:rgba(255,255,0,0.75)}

alpha通道需要进行调整时，可以使用opacify和 transparentize函数，例如

$translucent-red: rgba(255, 0, 0, 0.5);
p {
  color: opacify($translucent-red, 0.3);
  background-color: transparentize($translucent-red, 0.25);
}
//编译之后哦
p {
  color: rgba(255, 0, 0, 0.9);
  background-color: rgba(255, 0, 0, 0.25); }

IE滤镜需要所有的颜色具备alpha通道，而且严格使用#AABBCCDD的颜色格式，你可以使用ie_hex_str 函数容易的实现转换，例如

$translucent-red: rgba(255, 0, 0, 0.5);
$green: #00ff00;
div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
}
//编译之后
div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr=#FF00FF00, endColorstr=#80FF0000);
}

6.4.3字符串运算符

"+"可以用来连接字符串，例如

p {
  cursor: e + -resize;
}
//编译后
p {
  cursor: e-resize; }

这里需要注意，如果一个引号字符串连接一个非引号字符串(+前面是引号字符串)，则结果是一个引号字符串，否则+前面是非引号字符串，结果也将是非引号字符串，例如

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}
//编译之后
p:before {
  content: "Foo Bar";
  font-family: sans-serif; }

我们可以在字符串内部使用#{}插值方式动态值，例如

p:before {
  content: "I ate #{5 + 10} pies!";
}
//编译之后
p:before {
  content: "I ate 15 pies!"; }

空的属性值在编译时会被当做空字符串处理

$value: null;
p:before {
  content: "I ate #{$value} pies!";
}
//编译后
p:before {
  content: "I ate  pies!"; }

6.4.4逻辑运算符

SassScript支持and or not三种逻辑运算符

6.4.5列表运算符

列表不提供任何特殊的运算符，相反通过函数实现大部分功能。

6.5括号

括号用来影响运算的顺序

p {
  width: (1em + 2em) * 3;
}
//编译之后
p{
  width:9em;}

6.6函数

SassScript定义了一些类似CSS函数语法的函数，函数列表见 这里。例如

p {
  color: hsl(0, 100%, 50%);
}
//编译之后
p {
  color: #ff0000; }

关键字参数

Sass的函数也可以使用显示的关键字参数，例如

p {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}

尽管这样看起来不大简洁，却可以提高代码的可读性，提高函数接口的灵活性，避免太多参数引起的调用困难。这些参数可以以任何顺序进行调用，如果有默认值的参数为可选属性可以省略，因为参数名称也是变量名，下划线和虚线不能交叉使用。
大家可以到 这里找函数列表，也可以使用Ruby自定义函数。

6.7 插值(Interpolation)

使用插值的方式，我们可以在选择器和属性名中使用变量

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}
//编译之后
p.foo {
  border-color: blue; }

同时，我们也可以在属性值中 使用插值，插值周围的运算符将会被当成普通css处理

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}
//编译之后
p {
  font: 12px/30px; }

6.8 变量默认值

使用"!Default"可以声明变量值意味着，如果这个变量已经被赋过值，保留原来的值，如果没有赋值则赋值给变量。

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}
//编译之后
#main {
  content: "First content";
  new-content: "First time reference"; }

如果变量的值为null，SassScript则认为该变量没有被赋值

$content: null;
$content: "Non-null content" !default;

#main {
  content: $content;
}
//编译之后
#main {
  content: "Non-null content"; }

待续……

---------------------------------------------------------------

前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------