SASS入门3

数据类型

Sass包含以下几种数据类型：
a）数字，如：1、2、13、10px;
b）字符串，有引号字符串或无引号字符串，如："foo"、"bar"、baz；
c）颜色，如：blue、#04a3f9、rgba(255, 0, 0, 0.5)；
d）布尔型，如：true、false；
e）空值，如：null；
f）值列表，用空格或逗号分开，如：1.5em, 1em, 0, 2em、Helvetica, Arial, sans-serif。

Sass也支持其他CSS属性值，比如Uniconde范围，或!important声明。然而，Sass一律视为无引号字符串。

字符串

两种字符串类型：
a）有引号字符串，如 "Lucida Grande" 、'http://sass-lang.com'；
b）无引号字符串，如 sans-serifbold。

在编译CSS文件时不会改变其类型，只有一种情况例外，使用#{}插值语句时，有引号字符串将被编译为无引号字符串，这样方便了在mixin中引用选择器名。

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

编译为：

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

值列表

所谓值列表是指Sass如何处理CSS中：

margin: 10px 15px 0 0

或者：

font-face: Helvetica, Arial, sans-serif

像上面这样通过空格或逗号分隔的一系列的值。

事实上，独立的值也被视为值列表———只包含一个值的值列表。

Sass列表函数赋予了值列表更多功能：
1.nth函数可以直接访问值列表中的某一项；
2.join函数可以将多个值列表连接在一起；
3.append函数可以在值列表中添加值；
4.@each规则则能够给值列表中耳朵每个项目添加样式。

值列表中可以再包含值列表，比如 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。

加法

加法运算是Sass中运算的一种，在变量或属性中都可以做加法运算。如：

.box{
    width: 20px + 8in；
}

编译出来的CSS：

.box{
    width: 788px;
}

但对于携带不同类型的单位时，在Sass中计算会报错，如下图所示：

.box{
    width: 20px + 1em;
}

编译的时候，编译器会报错：

“Incompatible units: 'em' and ‘px'.”

减法

Sass的减法运算和加法运算类似，我们通过一个简单的示例来做阐述：

$full-width: 960px;
$sidebar-width: 200px;

.content{
    width:$full-width - $sidebar-width;
}

编译出来的CSS如下：

.content{
    width: 760px;
}

同样的，运算时碰到不同类型的单位时，编译也会报错，如：

$full-width: 960px;
.content{
    width: $full-width - 1em;
}

编译的时候，编译器报

"Incompatible units: 'em' and 'px'."

错误。

乘法

Sass中的乘法虽然也能支持多种单位（比如em, px, %），但当一个单位同时声明两个值时会有问题。示例：

.box{
    width: 10px * 2px;
}

编译的时候报

"20px*px isn't a valid CSS value."

错误信息。

如果进行乘法运算时，两个值单位相同时，只需要为一个数值提供单位即可。上面的示例可以修改成：

.box{
    width: 10px * 2;
}

编译出来的CSS：

.box{
      width: 20px;
}

Sass的乘法运算和加法、减法运算一样，在运算中有不同类型的单位时，也将会报错。示例：

.box{
    width: 20px * 2em;
}

编译时报

"40em*px isn't a valid CSS value."

错误信息。

除法

Sass 的乘法运算规则也适用于除法运算。不过除法运算还有一个特殊之处。众所周知“/”符号在 CSS 中已做为一种符号使用。因此在 Sass 中做除法运算时，直接使用“/”符号做为除号时，将不会生效，编译时既得不到我们需要的效果，也不会报错。一起先来看一个简单的示例：

.box{
    width: 100px / 2;
}

编译出来的CSS如下：

.box{
    width: 100px / 2;
}

这样的结果对于大家来说没有任何意义。要修正这个问题，只需要给运算的外面添加一个小括号"( )"即可：

.box{
    width: (100px / 2);
}

编译出来的CSS如下：

.box{
    width: 50px;
}

除了上面情况带有小括号，"/"符号会当做除法运算符之外，如果"/"符号在已有的数学表达式中时，也会被认作除法符号。示例：

.box{
     width: 100px / 2 + 2in;
}

编译出来的CSS：
.box{
width: 242px;
}
另外，在Sass除法运算中，当变量进行除法运算时，"/"符号也会被自动识别成除法，示例：

$width: 1000px;
$num: 10;

.item{
    width: $width / 10;
}
.list{
      width: $width / $nums;
}

编译出来的CSS：

.item{
      width:100px;
}
.list{
      width: 100px;
}

综上所述，"/"符号被当做除法运算符时有一下几种情况：
a）如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
b）如果数值被圆括号包围。
c）如果数值是另一个数学表达式的一部分。

如下所示：

//SCSS
p{
    font: 10px/8px;  //纯CSS，不是除法运算
    $width: 1000px;
     width: $width/2;   //使用了变量，是除法运算
     width: round(1.5)/2;   //使用了函数， 是除法运算
     height:(500px/2);   //使用了圆括号， 是除法运算
     marign-left: 5px + 8px / 2px;   //使用了加(+)号， 是除法运算
}

编译出来的CSS

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

Sass 的除法运算还有一个情况。我们先回忆一下，在乘法运算时，如果两个值带有相同单位时，做乘法运算时，出来的结果并不是我们需要的结果。但在除法运算时，如果两个值带有相同的单位值时，除法运算之后会得到一个不带单位的数值。如下所示：

.box{
    width: (1000px / 100px);
}

编译出来的CSS如下：

.box{
    width: 10;
}

变量计算

在Sass中除了可以使用数值进行运算之外，还可以使用变量进行计算。示例：

$content-width: 720px;
$sidebar-width: 220px;
$gutter: 20px;

.container{
    width: $content-width + $sidebar - width + $gutter;
    margin: 0 auto;
}

编译出来的CSS

     .container{
        width: 960px;
        margin: 0 auto;
    }

数字运算

数字运算包括前面介绍的：加法、减法、乘法和除法等运算。而且还可以通过括号来修改他们的运算先后顺序。和我们数学运算是一样的。示例：
.box{
width: ((220px + 720px) - 11 * 20) /12;
}
编译出来的CSS：
.box{
width: 60px;
}

颜色运算

所有算数运算都支持颜色值，并且是分段运算的。也就是说，红、绿和蓝各颜色分段单独进行运算。如：

p {
  color: #010203 + #040506;
}

计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09， 并且被合成为：

如此编译出来的 CSS 为：

p {
  color: #050709;
}

算数运算也能将数字和颜色值一起运算，同样也是分段运算的。示例：

p {
  color: #010203 * 2;
}

计算公式为01 * 2 = 02、02 * 2 = 04和03 * 2 = 06，并且被合成为：

p{
     color: #020406;
}

字符运算

在Sass中可以通过加法符号“+”来对字符串进行连接。例如：

$content: "Hello" + "" + "Sass!";
.box:before {
  content: " #{$content} ";
}

编译出来的CSS：

.box:before {
  content: " Hello Sass! ";
}

除了在变量中做字符连接运算之外，还可以直接通过 +，把字符连接在一起：

div {
  cursor: e + -resize;
}

编译出来的CSS:

div {
  cursor: e-resize;
}

注意，如果有引号的字符串被添加了一个没有引号的字符串 （也就是，带引号的字符串在 + 符号左侧）， 结果会是一个有引号的字符串。 同样的，如果一个没有引号的字符串被添加了一个有引号的字符串 （没有引号的字符串在 + 符号左侧）， 结果将是一个没有引号的字符串。 例如：

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

编译出来的 CSS：

p:before {
  content: "Foo Bar";
  font-family: sans-serif; }