学习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:;
   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: {
    width: 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;
 }