关于sass那些事，sass用法。

SASS是一种CSS预处理器依赖ruby。SASS扩展了CSS，添加了新的规则、变量、混入、选择器和继承等特性。

在使用SASS之前首先要安装ruby服务器：http://www.rubyinstaller.org/。 安装好ruby后，打开Start Command PRompt with Ruby，键入gem install sass 安装SASS。之后输入：sass –v 就可以查看SASS的版本。

SASS的CSS扩展规则

嵌套规则

SASS允许CSS样式嵌套进另一个CSS样式中。内部的规则仅仅用在外部的选择器内。例

SASS

#mainbody {  color: #00ffff;  width: 100%;  .content{    color: #000000;  }}// 转换CSS样式如下：#mainbody {  color: #00ffff;  width: 100%;}#mainbody .content {  color: #000000;}

引用父选择器

比起默认的，它通常对使用嵌套样式的父选择器更有用。例如，你也许想要一些特殊的样式，当选择器是hover状态时或者当body元素有一个确定的类。这种情况下，你可以明确地看出哪个一父标签应该被&字符代替。例如：

a {  font-size: 12px;  color: #FFFFFF;  &:hover{color: #00ffff}  body .mainbody & {font-weight: bold}}/*转换为CSS 如下*/a {  font-size: 12px;  color: #FFFFFF;}a:hover {  color: #00ffff;}body .mainbody a {  font-weight: bold;}

嵌套属性

在命名空间中，CSS有非常少的属性；例如，font-family、font-size和font-weigth都在font命名空间内。在CSS中，如果你想去在同一个命名空间内设置多个属性，你必须去一个一个把它们列出来。SASS为这个提供了一个快捷的方法：仅写一次命名空间，然后在它的内部嵌套进每一个下级属性。例如

.funky {  font: {    family: fantasy;    size: 30em;    weight: bold;  }}/*转译为CSS如下*/.funky {  font-family: fantasy;  font-size: 30em;  font-weight: bold;}

SassScript

除了简单的CSS属性语句，SASS提供了一些被称作SassScript的小扩展。SassScript允许属性去使用变量、计算和额外的方法。SassScript可以被用在任何属性值中。

SassScript也可以被用于生成选择器和属性名字，使用的时候需要写入mixins。这将会被允许插入。

变量：$

Sass中最易懂的方法是使用变量。变量使用$作为开始，并且设置像CSS属性：

$width: 5em;

之后你可以把它们用到属性中：

#main {  width: $width;}

变量只被允许用在它们被定义的嵌套选择器中。如果它们被定义到任何选择器的外部，它们被允许用在任何地方。

数据类型

SassScript支持六个主要的数据类型：

numbers(13, 10px)

文本字符和没有引号的文本字符(“foo”, ‘bar’, baz)

颜色(blue, #ffffff, rgba(255, 0, 0, 0.5))

布尔值(true, false)

空(null)

数值列表，通过逗号或空格分开(1.5em 1em 0 1em, Helvetica, Arial, sans-serif)

映射键值对(key1: value1, key2, value2)

SassScript也支持其他所有类型的CSS属性值，例如Unicade和!important声明。但是，它没有对这些值进行特殊操作。它们仅仅是被当做引用结束的字符串来对待。

字符串

CSS指定了两种字符串：用引号引用，例如”jia”, ’http://peerless.wang’，另外的没有引号的例如：sans-serif 或者 bold。SassScript对这两种类型都可以识别，并且通常如果其中一种类型的字符串被用在Sass文档中，这一种字符串将会被输出到CSS结果中。

下面是一个列外，但是：当使用#{}插入，被引用的字符串不会被引用。这使得它更简单的去使用例子中的选择器在混合指令中。例如

@mixin Firefox-message($selector) {    body.firefox #{$selector}:before {    content: "Hi, Firefox users!";  }}@include firefox-message(".header");/*转换为CSS如下*/body.firefox .header:before {  content: "Hi, Firefox users!";}

列表

列表是Sass怎样来表示像margin这样的CSS声明值：10px 15px 0 0 或者font-face: Helvetica, Arial, sans-serif。列表仅是一系列的值，通过空格或逗号隔开。事实上，单独的数值计算也是列表，它们的列表仅有一个值。

另外，列表的用处不是很大，但是SassScript列表方法使它们变得更有用。nth 方法可以使多项变成列表，join方法可以把多个列表整合一起，append方法可以添加项目到列表中。@each指令可以为列表中的每一项添加样式。

除了包含简单的值外，列表也可以包含其他列表。例如，1px 2px, 5px 6px 是一个两项目的列表，它包含列表1px 2px和列表5px 6px。如果内部的列表和列表使用同样的分隔符，你需要去在列表的开始和结束的位置使用圆括号去使它们更明显。例如(1px 2px ) (5px 6px)也是两项列表包含列表1px 2px 和5px 6px。 不同处在于外部使用空格分开，之前是使用逗号分开。

当列表是被填入的是简单的CSS，Sass不会添加圆括号，尽管Sass不能明白它们。意思是(1px, 2px) (5px 6px)和 1px 2px 5px 6px当它们被转换成CSS时将看起来一样。但是，当它们在Sass中时，它们是不一样的：第一个列表包含两个列表，而第二个列表包含4个数字。

列表里面也可以什么都没有。这些列表被表现为()（这也是一个空的映射键值对）。它们不可以被直接输出为CSS；如果你试图这么做，例如font-family()，Sass将会抛出一个错误。如果一个列表包含空列表或者空值，例如 1px 2px () 3px或者1px 2px null 3px，空列表和空值在被转换成CSS之前将会被移除。

逗号间隔的列表也许会有一个拖尾的逗号。这个特别有用因为它允许你去声明一个单元素列表。例如，(1,)是一个包含1列表，(1 2 3,)是一个逗号间隔列表其中包含一个空格间隔的列表，这个空格间隔的列表包含1,2,和3。

映射

映射表示的是一个键和值之间的联合，通过键去查询值。在命名组中它们使得更容易去收集值并且允许动态的组。它们不能被直接翻译成CSS，尽管它们的语法结构与media query语句类似：

$map: (key1: value1, key2: value2, key3: value3);

与列表不同，映射的外面必须总是有圆括号并且总是要以逗号分隔。映射中的键和值都可以是任何SassScript对象。一个映射也许仅有一个值对应一个给定的键（尽管值可能是列表）。一个给定的值也许可以被分配到许多键。

像列表一样，映射更多的操作是使用SassScript函数。map-get函数在映射中查询值，map-merge函数添加值到一个映射。@each指令可以被用于添加样式为每一个值或键映射配对。

映射可以被应用到任何列表中。当被一个list函数使用时，映射会被当做对的列表来对待。例如，(key1: value1, key2: value2)通过list函数将被当做一个嵌套列表key1 value1, key2 value2。列表不能被当做映射，但是，空列表除外。()将被描述为一个没有键和值的空映射和一个没有元素的列表。

映射不能被转换为简单的CSS。在CSS函数中使用其中一个作为变量的值或者一个参数，会抛出错误。

运算

所有类型都支持等式运算(==和!=)。另外，每一个类型都有为它们自己特殊需求的自己的运算。

数值运算

SassScript数值的标准运算计算(加法+、减法-、乘法*、除法/、整除%)，如果它们可以计算，在单元中它们将自动进行。例

p {  width: 1in + 8pt;}/*转换为CSS为*/p {  width: 1.11111in;}

比较运算（<、>、<=、>=）对于数字也都是被支持的，并且等式运算对所有类型都支持。

除法/

CSS允许/符号出现在属性值中作为一种分隔数字的方法。因为SassScript是一种CSS属性语句的扩展，它必须支持这个，因此也允许/被用作分隔符。意思是默认情况下，如果在SassScript中两个数字通过/进行分隔，之后它们将会作为结果出现在CSS中。

但是，在/作为分隔符时将会被划分为三种情况。这些划分在实际使用中，将会覆盖大部分的实例。它们是：

如果这个值或者它中的一部分，是被存储在变量中或者被一个方法返回。

如果这个值被圆括号包围。

如果这个值被用于另一个运算语句的一部分。

例如

p {  font: 10px/8px;             // 简单的CSS，没有做除法运算  $width: 1000px;  width: $width/2;            // 使用变量，做除法运算  width: round(1.5)/2;        // 使用函数，做除法运算  height: (500px/2);          // 使用圆括号，做除法运算  margin-left: 5px + 8px/2px; // 使用加号, 做除法运算}// 转换为CSS：p {  font: 10px/8px;  width: 500px;  width: 1;  height: 250px;  margin-left: 9px;}// 如果你想把简单的CSS/和变量一起使用，你可以使用#{}去插入它们。例如p {  $font-size: 12px;  $line-height: 30px;  font: #{$font-size}/#{$line-height};}// 转换成CSS：p {  font: 12px/30px;}

字符串运算

+运算可以被用于连接字符串

p {  cursor: e + -resize;}// 转换为CSSp {  cursor: e-resize;}

注意，如果是一个引号字符串和一个没有引号的字符串相加（有引号的字符串在左边），结果是一个有引号的字符串。同样的，如果一个没引号的字符串和一个有引号的字符串相加（没有引号的字符串在左边），结果将是没有引号的。例如

p:before {  content: "Foo " + Bar;  font-family: sans- + "serif";}// 转义为CSS为：p:before {  content: "Foo Bar";  font-family: sans-serif;}// 默认的，如果两个值是紧挨着的，它们被看做是一个值。p {  margin: 3px + 4px auto;}// 转换为CSS：p {  margin: 7px auto;}// 在字符串文本中，通过#{}样式可以添加动态值给字符串p:before {  content: "I ate #{5 + 10} pies!";}// 转换为CSSp:before {  content: "I ate 15 pies!";}// 空值将被当做空字符串来对待并插入字符串中。$value: null;p:before {  content: "I ate #{$value} pies!";}// 转换为CSS：p:before {  content: "I ate  pies!";}

布尔运算

SassScript支持对布尔值进行与，或，非运算

列表运算

列表没有任何特殊的运算，相对的它们的操作时通过列表方法进行的。

圆括号

圆括号可以影响运算顺序

p {  width: 1em + (2em * 3);}// 转换为CSS：p {  width: 7em;}

函数

SassScript定义了一些实用的函数，它们被调用通过正常CSS函数语句。

p {  color: hsl(0, 100%, 50%);}// 转换为CSS：p {  color: red;}

关键字参数

Sass函数也可以被调用通过明确的关键字参数。上面的例子也可以被写为：

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

当然这样不太简洁，但它可以使样式单更易读。它也允许函数去呈现更多的灵活的接口，提供很多参数，但是调用起来不会困难。

参数的命名可以以任何顺序，并且默认的参数值可以被省略。因为被命名的参数是变量名，下划线和破折号可以互换使用。

参数

Mixin可以获取SassScript参数值作为参数，但Mixin被引入并且在mixin内生成可用的变量的时候参数会被给出来。

在定义一个Mixin的时候，参数会被以变量的形式写出，并以逗号分隔，并且放在名字后面的圆括号内。之后在Mixin被引入的时候，值会以同样的方式被传入。例如

@mixin sexy-border($color, $width) {  border: {    color: $color;    width: $width;    style: dashed;  }} p { @include sexy-border(blue, 1in); }// 转换为CSSp {  border-color: blue;  border-width: 1in;  border-style: dashed