SassScript

SassScript

先看个案例：

 .load-tag {
    &-0 {
      background-color: #fff;
      color: #909399;
      border: 1px solid #909399;
      &.active {
       color: #fff;
       background: #909399;
      }
    }
    &-1 {
      background-color: #fff;
      color: #fe5445;
      border: 1px solid #fe5445;
      &.active {
       color: #fff;
       background: #fe5445;
      }
    }
    &-2 {
      background-color: #fff;
      color: #ffb227;
      border: 1px solid #ffb227;
      &.active {
       color: #fff;
       background: #ffb227;
      }
    }
    &-3 {
      background-color: #fff;
      color: #17ba74;
      border: 1px solid #17ba74;
      &.active {
       color: #fff;
       background: #17ba74;
      }
    }
    &-4 {
      background-color: #fff;
      color: #4898ff;
      border: 1px solid #4898ff;
      &.active {
       color: #fff;
       background: #4898ff;
     }
    }
 }

变量$

SassScript通过$关键字声明和使用一个变量。
声明变量的时候默认为局部变量，可以通过!global将局部变量声明为全局变量。

#menu {
  $width: 5rem !global;
  width: $width;
}

#sidebar {
  width: $width;
}

编译后

#menu {
  width: 5rem; 
}

#sidebar {
  width: 5rem;
}

数据类型

SassScript支持8种数据类型，
1、数值number：1.2,13,10px
2、颜色color：blue、#04a3f9、rgba(255, 0, 0, 0.5)
3、布尔值bollean：true、false
4、空值null：null
5、字符串string：有或没有引号，"menu"、'sidebar'、navbar
6、数组list：由空格或逗号分隔，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
7、对象map：(key1: value1、key2: value2)
8、函数function

String

特性

1、支持2种字符串类型单双引号、没有引号
2、当使用 #{} 插值语法的时候，使用引号字符串会失去引号
使用案例（mixin中使用选择器的名称）

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}
@include firefox-message(".header");

编译后

body.firefox .header:before {
  content: "Hi, Firefox users!"; 
}

列表（list）函数

特性

列表函数可以用于处理列表，例如访问列表中的值，返回列表的长度，向列表添加元素，合并列表中的值等。
Sass的索引是从1开始的

函数	描述
append()	将单个值添加到 list 尾部
index()	返回元素在 list 中的索引
length()	返回 list 的长度
is-bracketed()	判断 list 中是否有中括号
join()	合并两 list
list-separator()	返回以 list 的分隔符类型，可以是空格
nth()	获取list第n项的值
set-nth()	设置 list 第n项的值为value
zip()	将多个 list 按照索引值为一组，重组一个心动多为list

nth() 函数：

使用案例

$lst1: a b c;
$lst2: 1,2,3;

.one{
    content: nth($lst1, 2);
}
.two{
    content: nth($lst2, 2);
}

编译后

.one {
  content: b;
}

.two {
  content: 2;
}

nth() 函数：

使用案例

$lst1: '#fe5445' '#ffb227' '#17ba74';
$lst2: 1,2,3; // 数字建议用逗号隔开
.one{
    color: nth($lst1, 2);
}

编译后

.one {
  color: #ffb227;
}

set-nth() 函数：

set-nth() 函数用于设置列表中指定索引的值。将会覆盖原有元素的值。

使用案例（设置列表中索引为 3 位置的值为 "yt"）

.one{
    content: set-nth([a b c], 3, yt);
}

编译后

.one {
  content: [a b yt];
}

zip()函数：

使用案例

.one{
    border:zip(1px 2px 3px,solid dashed dotted,red yellow blue);
}

编译后

.one {
  border: 1px solid red, 2px dashed yellow, 3px dotted blue;
}

Map

特性

在Sass中，maps代表一种数据类型，可以包含若干键值对的对象类型，使用()包围一个map，里面的键值对用逗号隔开，键和值可以是任何的Sass数据类型，尽管一个值可以用在多个键上，但是通过一个键我们必须只能找到一个值。map不能直接在css中使用，如果你把一个map赋值给一个元素将会报错。下面的代码示例一个经典的map。

$map: (
  key1: value1,
  key2: value2,
  key3: value3
);

函数	描述	示例
map-keys(map)	返回map里面所有的key(list)	map-keys(("foo": 1, "bar": 2)) => "foo", "bar"
map-values(map)	返回map里面所有的value(list)	map-values(("foo": 1, "bar": 2)) => 1, 2
map-get(map,key)	返回map里面指定可以的value	map-get(("foo": 1, "bar": 2), "foo") => 1
map-has-key(map,key)	返回map里面是否含有指定的key	map-has-key(("foo": 1, "bar": 2), "foo") => true
map-merge(map1,map2)	合并map(map)	map-merge(("foo": 1), ("bar": 2)) => ("foo": 1, "bar": 2)
map-remove(map,keys)	删除指定map中的指定key(map)	map-remove(("foo": 1, "bar": 2), "bar") => ("foo": 1)
keywords(args)	返回一个函数参数组成的map(map)	@mixin foo(args...)

案例1（使用@each指令遍历map，设置不同的皮肤和按钮）

$load-tag-map: (
  0: #909399,
  1: #fe5445,
  2: #ffb227,
  3: #17ba74,
  4: #4898ff,
);

@mixin load-tag-style($color) {
  background-color: #fff;
  color: $color;
  border: 1px solid $color;
  &.active {
    color: #fff;
    background-color: $color;
  }
}

/* 遍历load-tag-map */
@each $key, $value in $load-tag-map {
  &-#{$key} {
    @include load-tag-style($value#909399);
  }
}

//编译后
见最开头的案例

案例2（使用map定义不同的值）

$card_transition_map: (
  trans1: 200ms transform ease-in-out,
  trans2: 400ms background ease-in,
  trans3: 600ms color linear
);

.card {
  transition: map-values($card_transition_map);
}

//编译后
.card {
    transition: 200ms transform ease-in-out, 
                400ms background ease-in, 
                600ms color linear;
}

map-has-key($map, $key) 案例
返回一个布尔值。当 $map 中有这个 $key，则函数返回 true，否则返回 false。

$map: ('xs' : '200px', 'sm': '100px');
$key: 'xs';
.card {
  @if map-has-key($map, $key) {
    height: map-get($map, $key)
  }
}

//编译后
.card {
    height: 200px;
}

控制指令和表达式

if()

内置的if()函数允许在一个条件处理分支返回两种可能的结果，它可以用于任意的脚本上下文。if()函数只能判断相应的那个参数并且返回，这允许引用已经被定义或者计算的变量，否则将会导致错误发生（例如除以零）。

div {
  width: if(true, 1px, 2px);
  height: if(false, 1px, 2px);
}

// 编译后
div {
  width: 1px;
  height: 2px;
}

@if

@if指令接收一个 SassScript表达式，当表达式返回false或者null之外的数据时，会选择使用后面的嵌套语句

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

// 编译后
p {
  border: 1px solid;
}

@else if

@if语句后面可以跟随多个@else if语句和一个@else语句，如果@if语句失败，SASS 将逐个尝试@else 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;
}

@for

@for指令用于重复输出一组样式，每次重复时都会存在一个计数器变量用于调整输出结果。

@for $i from 1 through 3 {
  .item-#{$i} {
    width: 2em * $i;
  }
}

// 编译后
.item-1 {
  width: 2em;
}

.item-2 {
  width: 4em;
}

.item-3 {
  width: 6em;
}

@each

@each 指令的使用格式为 @each $var in <list or map>，其中 $var 可以是任意变量名称（例如$length或$name），而 <list or map> 是一个返回list或者map的 SassScript 表达式。

@each规则设置$var为list或map当中的每一项，输出样式中将会使用$var的实际值。
反面案例示范：

.icon-healthy {
  background-size: cover !important;
  &-1 {
    background: url('~@/assets/images/healthy1.png') no-repeat;
  }
  &-2 {
    background: url('~@/assets/images/healthy2.png') no-repeat;
  }
  &-3 {
    background: url('~@/assets/images/healthy3.png') no-repeat;
  }
  &-4 {
    background: url('~@/assets/images/healthy4.png') no-repeat;
  }
  &-6 {
    background: url('~@/assets/images/healthy6.png') no-repeat;
  }
  &-7 {
    background: url('~@/assets/images/healthy7.png') no-repeat;
  }
  &-8 {
    background: url('~@/assets/images/healthy8.png') no-repeat;
  }
  &-9 {
    background: url('~@/assets/images/healthy9.png') no-repeat;
  }
  &-10 {
    background: url('~@/assets/images/healthy10.png') no-repeat;
  }
}

优化后

@each $animal in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 {
  .icon-healthy-#{$animal} {
    background: url("~@/assets/images/#{$animal}.png") no-repeat;
  }
}

@each 多重赋值

@each 指令能够以 @each $var1, $var2, ... in <list> 的格式使用多个变量，如果 <list> 是一个列表中的列表元素，那么子列表中的每个元素将会被分配至各自的变量，例如：

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

数值运算

特性

1、支持常见的数值运算 +、-、*、/、%
2、计算过程中保留单位，所以不同单位不能在一起进行运算（例如：px 和 em）
3、两个相同单位的数值相乘后会造成运算结果单位重复（例如：10px * 10px == 100px * px），显然这里px * px是一个无效单位，此时SASS会因为使用非法单位而报错。

布尔运算（支持 与and、或or、非not 运算）

$year: 2018;
$moth: 8;
$day: 6;
$name: Hank;
#app {
  @if ($year > 2010 and $moth==8 or $day==6 not $name==Hank) {
    color: blue;
  } @else {
    color: red;
  }
}

//编译后
#app {
  color: blue;
}

SassScript 中的&

如同使用选择器一样，SassScript 中的 & 引用着当前的父选择器列表（一个由逗号分隔 List 作为元素再通过空格进行分隔的 List）。

.navbar.text .sidebar.word,
.menu.item {
  $selector: &; // ((".navbar.text" ".sidebar.word"), ".menu.item")
}