Sass

Sass与Scss的异同

sass与scss基本是相同的，唯一的不同是，需要使用分号和花括号而不是换行和缩进。

// sass 写法
#header{
  width: 30%;
  background-color: red;
}

// scss写法
#header
  width: 30%
  background-color: red

变量

$red: red;
div{
  color: $red
}

$side: top;
div{
  padding-#{$side}: 10px;
}

计算功能

div{
  margin: (20px/2);
  padding: 5px + 2px;
  width: 10 * 10%
}

嵌套

div{
  p{
    color: red;
  }
}

编译为

div p{
  color: red;
}

---

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

注意border后面的冒号!!!

编译为

div{
  border-width: 1px;
  border-color: #cccccc;
  border-style: solid;
}

---

// 在嵌套的代码块内，可以使用&引用父元素
div{
  &:hover{
    background: red
  }
}

注释

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

/*! 
  重要注释！
*/

继承

.box1{
  border: 1px solid #ddd;
}

box2要继承box1，就要使用@extend命令

.box2 {
  @extend .box1;
　font-size: 12px;
}

Mixin

重用的代码块

@mixin left {
  float: left;
  margin-left: 10px;
}

使用@include命令，调用这个mixin

div{
  @include left;
}

强大之处

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

div{
  @include left(20px);
}

颜色函数

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c

条件语句

// @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;
}

循环语句

// sass支持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");
　}
}

自定义函数

// SASS允许用户编写自己的函数

@function double($n) {
　@return $n * 2;
}

#sidebar {
　width: double(5px);
}