前端基础——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;