scss函数

 scss @media 媒体查询增强 嵌套

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

最后被编译为

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px;
  }
}

数组相关内置函数

• length($list)：返回数组$list的长度
• nth($list, $n)：返回数组$list中第$n个元素

字符串相关函数 

• quote($str)：给入参的字符串添加引号
• unquote($str)：给入参的字符串去除引号

对象相关函数

• map-has-key($map, $key)：判断对象$map是否有键$key

• map-get($map, $key) ：获取对象$map下键$key对应的值

三元if函数 

其实就是三元表达式 

• if($condition, $if-true, $if-false)：若$condition值为true，则返回$if-true，否则返回$if-false

自定义函数

SCSS允许我们自定义函数，语法如下：

@function function-name([$val1, $val2, $val3, ...]) {

        @return $res;

}

函数通过@function声明

函数形参可以不传，可以传一个或多个，或者可变参数。

函数必须通过@return返回，且必须要有返回值。

我们可以将一些复杂逻辑定义为函数，来避免复杂逻辑的重复书写，而代替以函数调用。

比如移动端适配布局时，我们需要将元素的固定尺寸换算为rem尺寸，或者vw尺寸，此时我们就可以将换算逻辑定义为函数：