前端基础——sass的使用

安装Ruby。
再配置环境变量，如：

C:\Ruby23-x64\bin

安装sass:

gem install sass

SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。另外，SCSS 还能识别大部分 CSS hacks（一些 CSS 小技巧）和特定于浏览器的语法，例如：古老的 IE filter 语法。

1、变量

less中的变量@key: value;
sass中的变量$key:value;
特殊变量：如果变量嵌套在字符串中，则需要写在 #{} 符号里面;
多值变量：多值变量分为list类型和map类型，list有点像js对象中的数组，map类型像js中的对象。
list:

//一维数据
$px: 5px 10px 20px 30px;

//二维数据，相当于js中的二维数组
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);

map:

$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);

2、混合（方法）

不带参数：

  @mixin boxc {
    width: 100px;
    height: 100px;
    background-color: #f90;
  }
  .box {
    @include boxc;
  }

带参数：

  @mixin triangle($direction: left, $bdWidth: 10px, $color: #09f) {
    width: 0;
    height: 0;
    border: $bdWidth solid transparent;
    border-#{$direction}-color: $color;
  }
  .box {
    @include triangle(right, 15px, #29f);
  }

3、继承

  .box {
    width: 100px;
    height: 100px;
    border: 5px dashed #09f;
  }
  .box1 {
    @extend .box;
    border-color: #f90;
  }

4、if语句

  @mixin square($w: 50, $h: 50) {
    @if $w < 100 {
      background-color: #333;
    } @else if $w > 200 {
      background-color: #999;
    } @else {
      background-color: #99f;
    }
  }
  .box {
    width: 200px;
    height: 200px;
    @include square(250, 250);
  }

5、for语句

第一种：

  @for $i from 1 to 3 {
    .box-#{$i} {
      width: percentage($i / 100);
    }
  }

编译出来：

.box-1 {
    width: 1%;
}
.box-2 {
    width: 2%;
}

第二种：

  @for $i from 1 through 3 {
    .box-#{$i} {
      width: percentage($i / 100);
    }
  }

编译出来：

box-1 {
    width: 1%;
}
box-2 {
    width: 2%;
}
box-3 {
    width: 3%;
}

两种形式的区别在于 through 包括 end 的值，to 不包括 end 值。

6、while语句

  $i: 0;
  @while $i < 6 {
    .box-#{$i} {
      background-color: rgba($i * 50, 255, 255, 1);
    }
    $i: $i + 2;
  }

编译出来：

box-0 {
    background-color: cyan;
}
box-2 {
    background-color: #64ffff;
}
box-4 {
    background-color: #c8ffff;
}

7、each语句

@each in 枚举

  $list: a, b, c;
  @each $i in $list {
    .box-#{$i} {
      color: #f00;
    }
  }

编译出来：

.box-a {
    color: #f00;
}
.box-b {
    color: #f00;
}
.box-c {
    color: #f00;
}

8、三元运算符

  $boolean: false;
  .box {
    width: if($boolean, 200px, 300px);
  }

编译出来：

.box {
    width: 300px;
}

9、function

  $designWidth: 750px;
  @function pxToVw($px: 10px) {
    @return $px / ($designWidth / 100) * 1vw;
  }
  .box {
    font-size: pxToVw(12px);
  }

编译结果：

.box {
    font-size: 1.6vw;
}

10、计算功能

  .box {
    width: 2 * 50px;
    height: 100px + 20px;
    padding: (20px / 2);
  }

编译结果：

.box {
    width: 100px;
    height: 120px;
    padding: 10px;
}