Sass

---

概念

• 是Ruby语言写的
• 以.scss 作为拓展名
• 编译成css后才能被浏览器识别
• CSS设计师专用，Sass程序员专用，使CSS可编程
• 提供编程语言才有的特性：如变量，条件语句，循环语句，宏，函数

---

命令行

//安装Sass，安装前需要安装Ruby
gem install sass
//在屏幕上显示.scss文件转化的css代码
sass test.scss
//将显示结果保存成.css文件
sass test.scss test.css
//让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本
//监听一个文件
sass --watch input.scss:output.css
//监听一个目录
sass --watch app/sass:public/stylesheets

---

注释

• 标准的CSS注释 /* comment */ ，会保留到编译后的文件。
• 单行注释 // comment，只保留在SASS源文件中，编译后被省略。
• 在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

---

变量

• 可以在外部声明，也可以在规则块内声明

$nav-color:#F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}
//编译后
nav {
  width: 100px;
  color: #F90;
}

---

嵌套

• 标签嵌套

div {
  hi {
    color: red;
  }
}
//编译后
div h1 {
  color: red;
}

• 属性嵌套

p {
  border: {
    color: red;
  }
}
//编译后
p {
  border-color: red;
}

• 父选择器&，主要解决伪类问题

a {
  &:hover { 
    color: #ffb3ff; 
  }
}
//翻译后
a:hover {
  color: #ffb3ff;
}

• 群组选择器嵌套

div {
  h1, h2, h3 {
    color: red
  }
}
//翻译后
div h1, div h2, div h3 {
  color: red
}

• 子选择器嵌套

div {
  >p {
    >color: red
  }
}
//翻译后
div > p {
  color: red
}

---

@import导入

• 在一个scss文件中导入另一个scss文件比如在a.scss中导入b.scss

//a.scss中的内容
aside {
  background: blue;
  color: white;
}
//在b.scss中导入a.scss
.blue-theme {
  @import "blue-theme"
}
//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。
.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}
//翻译后
.blue-theme aside {
  background: blue;
  color: #fff;
}

• 不能在.scss中直接导入.css，但可以把原始的.css文件改名为.scss后缀后导入

---

@mixin混合器

• 类似c语言中的宏
• 当有大段重用样式时，可以用混合器来定义

//使用@mixin来定义一段样式快
@mixin left {
  float: left;
  margin-left: 10px;
}
//使用@include命令，调用这个mixin。
div {
  color: red; 
  @include left;
}
//编译后
div {
  float: left;
  margin-left: 10px;
}
//混合器可以指定参数和缺省值。
@mixin rounded($vert, $horz, $radius: 10px) {
　　　　border-#{$vert}-#{$horz}-radius: $radius;
　　　　-moz-border-radius-#{$vert}#{$horz}: $radius;
　　　　-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
//使用的时候，可以像下面这样调用：
#footer { @include rounded(top, left, 5px); }

---

条件与循环

• @if判断

p {
　　@if 1 + 1 == 2 { border: 1px solid; }
　　@if 5 < 3 { border: 2px dotted; }
}

• @else

@if lightness($color) > 30% {
　　background-color: #000;
} @else {
　　background-color: #fff;
}

• @for循环

@for $i from 1 to 10 {
　　.border-#{$i} {
　　　　border: #{$i}px solid blue;
　　}
}

• @while循环

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

• @each循环，与for类似

@each $member in a, b, c, d {
　　.#{$member} {
　　　　background-image: url("/image/#{$member}.jpg");
　　}
}

---

自定义函数

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

---

继承

• SASS允许一个选择器，继承另一个选择器。

//比如，现有class1：
.class1 {
　　border: 1px solid #ddd;
}
//class2要继承class1，就要使用@extend命令：
.class2 {
　　@extend .class1;
　　font-size:120%;
}

---

计算

• SASS允许在代码中使用表达式计算

body {
　　margin: (14px/2);
　　top: 50px + 100px;
　　right: $var * 10%;
}