sass 内置的函数

朱雀 2023-06-25 08:18 81阅读 0赞

## 1. 字符串函数 ##

### 1.1 quote() ###

> `quote($string)`给`$string`前后添加引号。

//SCSS：
    p:after{
      content: quote(hello +' '+ sass); 
      //中间有空格(其他特殊符号)需要拼字符串；quote(hello sass); 直接这样会报错；
    }
    p:before{
      content: quote('This\'s' + ' ' + 'bug');
      //如果$string本身就带有引号，则会统一换成双引号`""`;
    }
    
    //编译为：
    p:after { content: "hello sass"; }
    p:before { content: "This's bug"; }

### 1.2 unquote() ###

> `unquote($string)` 删除 `$string` 前后的引号。

//SCSS：
    p:after{
      content: unquote("This's bug"); //中间的引号未被删除;
    }
    p:before{
      content: unquote(Thissbug);
      //如$string本身就不带引号，则返回$string本身;
    }
    
    //编译为：
    p:after { content: This's bug; }
    p:before { content: sass; }

*其实吧！这俩玩意在项目中我还真没用到过！*

### 1.3 str-length() ###

> `str-length($string)` 返回 `$string` 的长度。

//SCSS：
    p:before { content: str-length('hello sass!'); }
    
    //编译为：
    p:before { content: 11; }

### 1.4 to-upper-case() ###

> `to-upper-case($string)` 将`$string`小写字母转成大写字母。

//SCSS：
    p:before { content: to-upper-case('hello sass!'); }
    
    //编译为：
    p:before { content: "HELLO SASS!"; }

### 1.5 to-lower-case() ###

> `to-lower-case($string)` 将`$string`大写字母转成小写字母。

//SCSS：
    p:before { content: to-lower-case('HELLO SASS!'); }
    
    //编译为：
    p:before { content: "hello sass!"; }

## 2. 数字函数 ##

### 2.1 percentage() ###

> `percentage($number)` 将一个不带单位的数值转成百分比。

//SCSS：
    .box{ width: percentage(.5)}
    .box2{ width: percentage(.1rem / .3rem)}

*经测试，两个相同的单位，除了用除法 '/' 其他+-*%均会报错，且用除法 '/' 也只能在两个相同类型的单位之间进行运算；\*

//编译为：
    .box { width: 50%; }
    .box2 { width: 33.33333%; }

### 2.2 round() ###

> `round($number)` 将`$number` 四舍五入为整数，`$number`可带单位。

//SCSS：
    .xs-row{ width: round(33.33333333333333px)}
    
    //编译为：
    .xs-row { width: 33px; }

### 2.3 ceil() ###

> `ceil($number)` 大于 `$number` ，向上取整。

//SCSS
    .fs14{ font-size: ceil(13.1px)}
    .fs16{ font-size: ceil(15.9px)}
    
    //编译为：
    .fs14 { font-size: 14px; }
    .fs16 { font-size: 16px; }

### 2.4 floor() ###

> 与 `ceil()`相反，`floor($number)` 去除 `$number` 小数，向下取整。

//SCSS：
    .fs14{ font-size: floor(14.1px) }
    .fs16{ font-size: floor(16.9px) }
    
    //编译为：
    .fs14 { font-size: 14px; }
    .fs16 { font-size: 16px; }

### 2.5 abs() ###

> abs($number)，返回 `$number` 的绝对值。

//SCSS：
    .fs16{ font-size: abs(-1.6rem) }
    .fs18{ font-size: abs(1.8rem) }
    
    //编译为：
    .fs16{ font-size: 1.6rem; }
    .fs18{ font-size: 1.8rem; }

### 2.6 min() max() ###

> min($numbers…)，返回 `$number...` 的最小值。  
> max($numbers…)，返回 `$number...` 的最大值。

//SCSS：
    div{ width: min(2rem, 10rem) }
    div{ width: max(2rem, 10rem) }
    div{ width: max(2px, 10rem) } //非相同的单位，报错
    
    //编译为：
    div { width: 2rem; }
    div { width: 10rem; }
    Incompatible units: 'rem' and 'px'

### 2.7 random() ###

> random(\[$limit\])，返回一个随机数。

//SCSS：
    div {
        height: random(); //直接调用
        width: random(666); //传个参
    }
    //编译为：
    div {
      height: 0.3649;
      width: 403;
    }

## 3. 列表函数 ##

> 常用

### 3.1 length() nth() ###

> `length($list)`，返回 `$list` 的长度值；  
> `nth($list, $n)`，返回 `$list` 中指定的某个 `$n`，且 `$n`必须是大于0的整数；
> 
> *Javascript的Array()的索引是从0开始的*，厄...有点扯远了，用过 `css3` 的 `:nth-child(n)`都应该知道啦，索引下标也是从1开始的，So.....

//SCSS：
    $list: google, baidu, sogo;
    @for $i from 1 through length($list){ //取$list的length并循环输出；
      .icon-#{nth($list, $i)}{ //$list中的某个索引值；
        content: '#{nth($list, $i)}'
      }
    }
    
    //编译为：
    .icon-google { content: "google"; }
    .icon-baidu { content: "baidu"; }
    .icon-sogo { content: "sogo"; }

### 3.2 join() ###

> `join($list1, $list2, [$separator])` 将两个列表给连接在起来，组成一个列表；  
> `$separator` 默认值是 `auto`，另外还有 `comma` 和 `space` 两个值，其中 `comma` 值指定列表中的列表项值之间使用逗号 `,` 隔开，`space` 值指定列表中的列表项值之间使用 `空 格` 分隔。

join((blue, red), (#abc, #def), space) => blue red #abc #def //space
    join(10px, 20px, comma) => 10px, 20px //comma

Examples:

//SCSS：
    $list1: google, baidu, sogo;
    $list2: facebook, instagram, twitter;
    $list3: join($list1, $list2); //讲真啦，很少用到join()，反正我是很少用到;
    @for $i from 1 through length($list3){
      .icon-#{nth($list3, $i)}{
        content: '#{nth($list3, $i)}'
      }
    }
    
    //编译为：
    .icon-google { content: "google"; }
    .icon-baidu { content: "baidu"; }
    .icon-sogo { content: "sogo"; }
    .icon-facebook { content: "facebook"; }
    .icon-instagram { content: "instagram"; }
    .icon-twitter { content: "twitter"; }

### 3.3 index() ###

> `index($list, $value)`，返回 `$list` 中的 `$value`所在的位置。

index(1px solid red, solid) => 2
    index(1px solid red, dashed) => null
    index((width: 10px, height: 20px), (height 20px)) => 2

### 3.4 list-separator() ###

> `list-separator($list)`，返回 `$list` 中的分隔符。

list-separator(1px 2px 3px) => space
    list-separator(1px, 2px, 3px) => comma
    list-separator('foo') => space

## 4. Introspection 函数 ##

### 4.1 type-of() ###

> `type_of($value)` 返回 `$value` 的类型。

type-of(abc)   => string
    type-of("abc") => string
    type-of(true)   => bool
    type-of(#fff)   => color
    type-of(green)   => color

### 4.2 unit() ###

> `unit($number)` 返回 `$number` 所使用的单位。