学习Sass（二）

前面简单介绍了sass的安装，特点和使用方法等，这里记录下sass的基本语法。

1.变量

2.运算

3.嵌套

4.代码复用

5.高级语法

6.自定义函数

一、变量

变量以$开始，像css属性那样赋值，如：

$color: #ccc;
div {
    color: $color;
}

若变量定义在的选择器内，则仅在嵌套层级的范围内可用（可理解为块级作用域）。不在任何选择器内定义的变量则在任何地方可用（可理解为全局变量）。

$color: #ccc;  /*全局范围内可用*/
div {
    $width: 200px; /*仅在定义的选择器内可用*/
    width: $width;
     color: $color;
}
p {
    color: $color;
}

若在选择器内定义的变量后面加上！global标志，则可“升级”为“全局变量”，在任何地方可用。

$color: #ccc;  /*全局范围内可用*/
div {
  $width: 200px; /*仅在定义的选择器内可用*/
  width: $width;
  color: $color;
  $height: 100px !global;/*全局范围内可用*/
 }
p {
  color: $color;
  height: $height;
 }

字符串类型变量，有两种类型：带引号（包括单、双引号）和不使用引号。css文件会保留其字符串形式。特殊情况：在字符串中使用#{}引用字符串变量时会去掉引号，这样主要是为了便于使用，比如mixins中的选择器名称。例如：。

$name: "peter";
$job: 'programmer';
$weight: bold;

body.chrome{
    content:"Hi #{$name},chrome users!My job is #{$job}";
    //也可写成如下形式content:"Hi "+ $name+",chrome users!The job is "+$job;      
    font-weight:$weight;
}

编译为：

body.chrome {
  content: "Hi peter,chrome users!My job is programmer";
  font-weight: bold; 
}

变量值后面加！default，当变量被赋予其他值时引用新值，没有就使用默认的值，换句话说就是个“备胎”啊！ 

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

#main {
  content: $content;  /* 引用新值 */
}
#main:after{
  content: $new_content; /* 引用默认值 */
}

编译为：
#main {
  content: "First content"; 
}

#main:after {
  content: "First time reference"; 
} 

注：变量中的连字符下划线_和划线-可以互换的，如定义了$body_height，可以使用$body-height访问。 

二、运算

SassScript 支持对数字标准的算术运算（加法+，减法 - ，乘法*，除法/和取模%）。数字支持关系运算符(<, >, <=, >=)，并且所有类型支持相等运算符(==, !=)。这里介绍常用的除法和加法。

2.1 除法

原生CSS允许‘/' 出现在属性值之间作为分隔数字的方式，sass是CSS属性语法的扩展，所以也必须支持这一点。那么‘/’何时被作为除法预算符呢？

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; // 使用了 +, 作为除法
  font: (italic bold 10px/8px); // 在一个列表（list）中，括号可以被忽略。
}

编译为：
p {
  font: 10px/8px;
  width: 500px;
  width: 1;
  height: 250px;
  margin-left: 9px;
  font: italic bold 10px/8px; 
}

2.2 加法

加法可用于连接字符串

p {
  cursor: e + -resize;
}

编译为：
p {
  cursor: e-resize; 
}

用作运算表达式

p {
  margin: 3px + 4px auto;
}

编译为：
p {
  margin: 7px auto;
}

三、嵌套

sass允许选择器嵌套 

div {
  h1 {
    color: red;
  }
}

编译为：
div h1 {
  color: red;
} 

属性嵌套

div {
  border: {    
     1px;
    color: #ccc;
    style: solid;
  }
}

编译为：
div {
  border-width: 1px;
  border-color: #ccc;
  border-style: solid; 
}

注意：border必须加上后面的冒号。

在嵌套的代码块内，使用&引用父元素。

a {
  color: #000;
  &:hover{
    color: blue;
  }
}

编译为：
a {
  color: #000;
}
a:hover {
  color: blue;
}

如果没有父选择器，&的值将是空。这意味着你可以在一个mixin中使用它来检测父选择是否存在：

@mixin does-parent-exist {
  @if & {
    &:hover {
      color: red;
    }
  } @else {
    a {
      color: red;
    }
  }
} 

四、代码复用

4.1 @import

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

• 如果文件的扩展名是 .css。
• 如果文件名以 http:// 开始。
• 如果文件名是 url()。
• 如果@import 中包含任何的媒体查询（media queries）。

//以下代码导入的是css文件
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

@import可同时导入多个文件

@import  “reset.css”, "style";

@import导入的css文件在编译后不会被合并，但sass会被编译合并到css文件中。如果你有一个 SCSS 或 Sass 文件要导入，但不希望将其编译到一个CSS文件中，你可以在文件名的开头添加一个下划线，告诉Sass不要将其编译到一个正常的CSS文件中。但注意，在导入语句中不要添加下划线。例如：要导入的文件为"_main.scss"，导入语句要写成：@import "main.scss";。另外注意，请不要将带下划线与不带下划线的同名文件放置在同一个目录下，因为带下划线的文件将会被忽略。

4.2 @extend

sass允许一个选择器继承另一选择器的样式，这也是工作中常遇到的需求。例如现在有class1 

.class1 {
  border: 1px solid #ccc;
  background-color: #fff;
} 

class2要继承class1的样式，可以使用@extend

.class1 {
  border: 1px solid #ccc;
  background-color: #fff;
}
.class2 {
  @extend .class1;
  font-size: 16px;
}

编译为：
.class1, .class2 {
  border: 1px solid #ccc;
  background-color: #fff;
}

.class2 {
  font-size: 16px;
}

4.3 @mixin

 混入(mixin)允许您定义可以在整个样式表中重复使用的样式，而避免了使用无语意的选择器。通过@mixin 加名称 就可以定义一个Mixins模块，在模块内你可以添加任何你想重复使用的样式。 

@mixin btn {  
  height: 40px;
  padding: 5px 10px;
  text-decoration: none;
}
.btn-block{
  @include btn;
  display: block;
}

编译为：
.btn-block {
  height: 40px;
  padding: 5px 10px;
  text-decoration: none;
  display: block;
} 

@mixin也可以包含在任何规则的外部（即，在文档的根），但注意不能被其他父选择器引用。

@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}

@include silly-links;
/*以下p选择器会报错*/
p{
  font-size: 14px;
  @include still-links;
} 

编译为：
a {
  color: blue;
  background-color: red;
}

@mixin另一个重要用处是可以指定参数和缺省值。

@mixin left($value: 10px) {
  float: left;
　margin-left: $value;
}
div {
  @include left(20px);
}

编译为：
div {
  float: left;
  margin-left: 20px;
}

利用混入，生成浏览器前缀的实例：

@mixin rounded($vert, $horz,$radius: 10px){
    border-#{$vert}-#{$horx}-radius: $radius;
    -moz-border-#{$vert}-#{$horx}radius: $radius;
    -webkit- border-#{$vert}-#{$horx}-radius: $radius;
}
#navbar li { @include rounded(top, left); }

编译为：
#navbar li {
  border-top-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;
} 

五、高级语法

sass支持基本的控制语句和表达式。

5.1 @if...@else 

$type: monster;
 p {
   @if $type == ocean {
      color: blue;
    } @else if $type == matador {
      color: red;
    } @else if $type == monster {
      color: green;
    } @else {
      color: black;
    }
  }

编译为：
p {
  color: green;
} 

5.2 @for语句

该指令有两种形式：@for $var from <start> through <end> 和 @for $var from <start> to <end>。

　　@for $var from <start> through <end>：范围包括<start>和<end>的值。

　　@for $var from <start> to <end>：从<start>开始运行，但不包括<end>的值。

当<start>比<end>大的时候，计数器将递减，而不是增量。$var可以是任何变量名，比如$i。 

@for $i from 1 through 3 {
    .item-#{$i} {
      border: #{$i}px solid #ccc;
    }
  }
  @for $i from 3 to 1 {
    .list-#{$i} {
      border: #{$i}px solid #ccc;
    }
  }

编译为：
.item-1 {
  border: 1px solid #ccc;
}

.item-2 {
  border: 2px solid #ccc;
}

.item-3 {
  border: 3px solid #ccc;
}

.list-3 {
  border: 3px solid #ccc;
}

.list-2 {
  border: 2px solid #ccc;
}

 5.3 @while语句

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

编译为:
.item-6 {
  width: 6em;
}

.item-4 {
  width: 4em;
}

.item-2 {
  width: 2em;
}

5.4 @each

@each指令通常格式是@each $var in <list or map>。$var 可以是任何变量名，<list or map>是一个返回列表或map 的 SassScript 表达式。


@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");
}

还可以多重赋值

@each $animal, $color, $cursor in (puma, black, default),(sea-slug, blue, pointer),(egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

编译为：
.puma-icon {
  background-image: url("/images/puma.png");
  border: 2px solid black;
  cursor: default;
}

.sea-slug-icon {
  background-image: url("/images/sea-slug.png");
  border: 2px solid blue;
  cursor: pointer;
}

.egret-icon {
  background-image: url("/images/egret.png");
  border: 2px solid white;
  cursor: move;
}

@each 用在maps键值对中。注意maps用圆括号括起来，而不是大括号。

@each $key, $value in (h1:6em, h2:4em, h3:2em){
  #{$key}{
    height: $value;
  }
}

编译为：
h1 {
  height: 6em;
}

h2 {
  height: 4em;
}

h3 {
  height: 2em;
} 

六、自定义函数

sass支持自定义函数，并能在脚本上下文中使用。 

@function add($a, $b) {
  @return $a + $b;
}
#sidebar { 
  width: add(5px,25px); 
}

编译为：
#sidebar {
  width: 30px;
}