迷津渡口

懂得简单的编程和css语法，sass语法其实非常简单～

变量声明和使用

使用美元符号$标记：

// 应用到属性值可直接引用
$pcolor:#FB0;
p {color:$pcolor;}
// 应用到属性名使用#{}包裹获取
$side:left;
img {border-#{$side}:1px solid $pcolor;}

变量的数据类型包括：

• 数字（例如 1.2、13、10px）

• 文本字符串，无论是否有引号（例如 "foo"、'bar'、baz）

• 颜色（例如 blue、#04a3f9、rgba(255, 0, 0, 0.5)）

• 布尔值（例如 true、false）

• 空值（例如 null）

• 值列表，用空格或逗号分隔（例如 1.5em 1em 0 2em、Helvetica, Arial, sans-serif）

变量作用域：

在最外层定义的为全局变量，为默认值，在嵌套{}里面定义的为局部变量。

局部变量只有在当前{}体里面起作用，可在自己的作用域覆盖但不改变同名的全局变量。

同作用域的同名变量最后定义值为准。

嵌套规则

使用{}包裹子选择器，层层往下，伪类使用&连接父选择器：

普通嵌套：

#content {
    background-color:#FFF;
    div {margin:10px;}
    body & {margin-left:auto;margin-right:auto;}
    p {
        font-size:1.2em;
        a {
            color:blue;
            &:hover {color:red;}
        }
        body & {padding:5px;}
    }
}

编译结果：

#content { background-color: #FFF; }
#content div { margin: 10px; }
body #content { margin-left: auto; margin-right: auto; }
#content p { font-size: 1.2em; }
#content p a { color: blue; }
#content p a:hover { color: red; }
body #content p { padding: 5px; }

群组和符号选择器嵌套：

群组与单个选择器或群组与群组之间会一一组合成选择器;

符号选择器>，+，~可跟在子选择器前面，或者父选择器后边;

&符号可用来连接父选择器：

.container {
  h1, h2, h3 {margin-bottom: .8em}
}
div, p {
  a {font-size: 1.4em}
}
nav, aside {
  a, span {color: blue}
}
article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

编译结果：

.container h1, .container h2, .container h3 {margin-bottom: .8em;}
div a, p a {font-size: 1.4em;}
nav a, nav span, aside a, aside span {color: blue;}
article ~ article {border-top: 1px dashed #ccc; }
article > section {background: #eee; }
article dl > dt {color: #333;}
article dl > dd {color: #555;}
nav + article {margin-top: 0;}

属性嵌套：

把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中

nav {  
    border: {
      style: solid;  width: 1px;  color: #ccc;
    }
}
img {  
    border: 1px solid #ccc {
      left: 0px;  right: 0px;
    }
}

编译结果：

nav {border-style:solid;border-width:1px;border-color:#ccc;}
img {border:1px solid #ccc;border-left:0px;border-right:0px;}

注释规则

CSS标准注释 /* comment */ ，会保留到编译后的CSS文件。

若当注释出现在原生css不允许的地方，也会被抹去。

单行注释 // comment，只保留在SASS源文件中，编译后被省略。

在/*后面加一个感叹号，/*! comment */，表示这是"重要注释"。

即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

选择器继承

选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式；

通过继承不但继承基本样式，还包括拓展样式。

通过@extend语法实现：

//通过选择器继承继承样式
.error {
  border: 1px red;
  background-color: #fdd;}
.seriousError {
  @extend .error;
  border-width: 3px;
}
//.seriousError从.error继承样式
.error a{  //应用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //应用到hl.seriousError
  font-size: 1.2rem;
}

编译结果：

.error, .seriousError { border: 1px red; background-color: #fdd; }
.seriousError { border-width: 3px; }
.error a,  .seriousError a { color: red; font-weight: 100; }
h1.error, h1.seriousError { font-size: 1.2rem; }

混合器共享样式

大段需要重用的样式代码段可使用@mixin定义成混合器，然后使用@include重用。

普通混合器：

如常用的跨浏览器圆角代码：

@mixin rounded-corners {  
    -moz-border-radius: 5px;  
    -webkit-border-radius: 5px;  
    border-radius: 5px;
}
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}
.alertbox {
  color: red;
  border: 1px solid #eeeeee;
  @include rounded-corners;
}

编译结果：

.notice { 
    background-color: green;
    border: 2px solid #00aa00;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.alertbox {
    color: red;
    border: 1px solid #eeeeee;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

混合器嵌套关系

混合器在重用时相当于把定义的样式代码段完整插入需要重用的位置；

和父元素嵌套也同样根据插入后形成的新的嵌套关系获得。

@mixin no-bullets {
    list-style: none;
    li {
        list-style-image: none;
        list-style-type: none;
        margin-left: 0px;
    }
}
ul.plain {  
    color: #444;
    @include no-bullets;
}

编译结果：

ul.plain {color: #444;list-style: none;}
ul.plain li {list-style-image: none;list-style-type: none;margin-left: 0px;}

混合器传参和默认参数

混合器传参数相当于函数，有多种方法：

直接传参(按顺序)，逗号分割的索引列表传参（可不按顺序）和默认参数（默认参数在最后，可不传）。

直接传参和索引列表传参：

@mixin link-colors($normal, $hover, $visited) {  
    color: $normal;
    &:hover { color: $hover; }
    &:visited { color: $visited; }
}
a {@include link-colors(blue, red, green);}
.error a {@include link-colors($visited:blue,$hover:green,$normal:red);}

编译结果：

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

.error a { color: red; }
.error a:hover { color: green; }
.error a:visited { color: blue; }

默认参数传参：默认参数可以是变量，也可以是普通数值：

// 默认参数都是和$normal相等，因此可以只传一个参数
@mixin link-colors($normal,$hover: $normal,$visited: $normal){
    color: $normal;
    &:hover { color: $hover; }
    &:visited { color: $visited; }
}
a {@include link-colors(red);}

编译结果：

a { color: red; }
a:hover { color: red; }
a:visited { color: red; }

运算

数字运算

支持普通+,-,*,/,%运算，支持单位换算，也支持大于小于等于及其组合的关系运算，例如

p {width: 1in + 8pt;}

编译结果：

p {width: 1.111in;}

除法运算特殊：CSS允许部分除法运算，在SASS编译时会保留，但以下三种情况会计算：

1. 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。

2. 如果数值被圆括号包围。

3. 如果数值是另一个数学表达式的一部分。

例子：

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

编译结果：

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

使用#{}保存除法给CSS:

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height}; // 使用#{}保留除法到CSS计算
}

编译结果：

p {font:12px/30px;}

颜色运算

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

例：

p {
  color: #010203 + #040506;
}
span {
  color: #010203 * 2;
}
a {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

编译结果：

p { color: #050709; }
span { color: #020406; }
a { color: rgba(255, 255, 0, 0.75); }

字符串运算

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

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

布尔运算

and or not 与或非

以上运算可使用圆括号改变运算顺序～

高级运算：判断语句，循环语句和函数

判断：@if和@else

判断条件，赋值属性：

p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
}
$type: monster;
a {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

编译结果：

p {border: 1px solid; }
a {color: green; }

循环：@for

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

编译结果：

.item-1 {width: 2em; }
.item-2 {width: 4em; }
.item-3 {width: 6em; }

循环：@each

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

编译结果：

.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }

循环：@while

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

编译结果：

.item-6 {width: 12em;}
.item-4 {width: 8em;}
.item-2 {width: 4em;}

自定义函数

@function double($n) {
　　@return $n * 2;
}
#sidebar {
　　width: double(5px);
}

编译结果：

#sidebar {width:10px;}

SASS自带很多有用的函数，需自行去了解～

嵌套导入SASS文件

说明：

一般为了任务的分配和合理的配置，不同作用的SASS使用不同的小文件定义。

文件名称一般以下划线开头，局部引用时可省略下划线和后缀。

引用后直接将代码内容插入引用位置，和混合器一样可形成新的嵌套关系。

引用scss文件会直接插入内容，引用原生css文件则会保留@import在使用时才调用。

用例：

例：当前子目录sass下一个_blue-theme.scss的局部文件，内容为：

aside {
    background: blue;
    color: white;
}

引用：

.blue-theme {@import "sass/blue-theme"}

编译结果：

.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

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

基础教程到此结束，普通使用已经足够了。

需要详细深入了解看官网完整手册API文档吧～